<template>
  <Container>
    <Table v-if="merchantId" ref="table" :queryApi="list" :labelWidth="'70px'">
      <template #search>
          <CategoryCascader label="服务类型" prop="cateId"/>
          <Input label="服务主题" prop="name" :maxlength="30" />
          <Input label="服务编号" prop="goodsIndex"/>
          <DictSelect label="状态" prop="isSale" dictType="goods_status"/>
      </template>
      <template #operations>
        <el-button @click="handleAdd" size="mini" type="primary" icon="el-icon-plus">创建服务</el-button>
      </template>
      <template #default>
          <!-- <Column type="index" label="序号"/> -->
          <Column label="服务编号" prop="goodsIndex"/>
          <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)" icon="el-icon-view">查看</el-button>
              <el-button type="text" @click="() => handleModify(row)" icon="el-icon-edit">编辑</el-button>
              <el-button v-if="row.isSale === 0" type="text" @click="() => onShelf(row)" icon="el-icon-top">上架</el-button>
              <el-button v-if="row.isSale === 1" type="text" @click="() => offShelf(row)" icon="el-icon-bottom">下架</el-button>
              <el-button type="text" @click="() => remove(row)" icon="el-icon-delete">删除</el-button>
            </template>
          </Column>
      </template>
    </Table>
    <el-alert v-else title="当前用户不存在商品信息" type="error" :closable="false" center/>
  </Container>
</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, 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({name, goodsId}){
      await this.$modal.confirm('是否确认上架服务主题为【' + name + '】的数据项？')
      const {code} = await onShelf(goodsId)
      if (code === 200) {
        this.$message.success('上架成功')
        this.$refs.table.getList()
      }
    },
    async offShelf({name, goodsId}){
      await this.$modal.confirm('是否确认下架服务主题为【' + name + '】的数据项？')
      const {code} = await offShelf(goodsId)
      if (code === 200) {
        this.$message.success('下架成功')
        this.$refs.table.getList()
      }
    }
  }
}
</script>
