<template>
  <div class="app-container home">
    <Table ref="table" :queryApi="list">
      <template #search>
          <CategoryCascader label="服务类型" prop="cateId"/>
          <Input label="服务主题" prop="name" />
          <DictSelect label="状态" prop="isSale" dictType="goods_status"/>
      </template>
      <template #operations>
        <el-button @click="handleAdd" size="mini" type="primary">新增</el-button>
      </template>
      <template #default>
          <Column type="index" label="序号"/>
          <Column label="服务主题" prop="name" />
          <Column label="服务类型" prop="categoryName" />
          <Column label="服务人数" prop="goodsServerList"><template #default="{row}">{{(row.goodsServerList || []).length}}</template></Column>
          <DateColumn label="创建时间" prop="createTime" />
          <DictColumn label="状态" prop="isSale" dictType="goods_status"/>
          <Column label="操作">
            <template #default="{row}">
              <el-button type="text" @click="() => handleDetail(row)">查看</el-button>
              <el-button type="text" @click="() => handleModify(row)">修改</el-button>
              <el-button v-if="row.isSale === 0" type="text" @click="() => onShelf(row)">上架</el-button>
              <el-button v-if="row.isSale === 1" type="text" @click="() => offShelf(row)">下架</el-button>
              <el-button type="text" @click="() => remove(row)">删除</el-button>
            </template>
          </Column>
      </template>
    </Table>
  </div>
</template>

<script>
import CategoryCascader from './components/CategoryCascader.vue'
import { mapGetters } from 'vuex'
import {list, remove, onShelf, offShelf} from '@/api/merchant/merchantService'

export default {
  name: "MerchantService",
  components: {CategoryCascader},
  data(){
    return {
    }
  },
  computed: {
    ...mapGetters(['merchantId']),
  },
  methods: {
    list, remove, onShelf, offShelf,
    handleAdd(){
      this.$router.push('/merchant/service/create')
    },
    handleModify({goodsId}){
      this.$router.push('/merchant/service/modify?goodsId='+goodsId)
    },
    handleDetail({goodsId}){
      this.$router.push('/merchant/service/detail?goodsId='+goodsId)
    },
    async remove({name, goodsId}){
      await this.$modal.confirm('是否确认服务主题为"' + name + '"的数据项？')
      const {code} = await remove(goodsId)
      if (code === 200) {
        this.$message.success('删除成功')
        this.$refs.table.getList()
      }
    },
    async onShelf({goodsId}){
      const {code} = await onShelf(goodsId)
      if (code === 200) {
        this.$message.success('上架成功')
        this.$refs.table.getList()
      }
    },
    async offShelf({goodsId}){
      const {code} = await offShelf(goodsId)
      if (code === 200) {
        this.$message.success('下架成功')
        this.$refs.table.getList()
      }
    }
  }
}
</script>