<template>
  <table-template :soul="this">
    <template #action="{ record }">
      <a-space>
        <template v-if="record.type == 1">
          <a @click="add(record)">添加服务项</a>
          <a @click="editCategory(record)">修改信息</a>
        </template>
        <template v-if="record.type == 2">
          <a @click="edit(record)">修改信息</a>
        </template>
      </a-space>
    </template>
    <template #enable="{ record, index }">
      <a-switch
        v-if="hasPerm('SYS0210101.ENABLE') && record.type == 2"
        :checked="record.enabled"
        checked-children="启用"
        un-checked-children="禁用"
        :loading="loadingKeys.includes(record.id)"
        @click="enableChange(record, index)"
      />
    </template>
    <template #showInHome="{ record, index }">
      <a-switch
        v-if="hasPerm('SYS0210101.ENABLE') && record.type == 2"
        :checked="record.showInHome"
        checked-children="展示"
        un-checked-children="隐藏"
        :loading="showInHomeLoadingKeys.includes(record.id)"
        @click="showInHomeChange(record, index)"
      />
    </template>
    <template #free>
      <SubClassEdit ref="SubClassEdit" :success="reset" />
      <CategoryEdit ref="CategoryEdit" :success="reset" />
    </template>
  </table-template>
</template>
<script>
import { TableTemplate, TableScript, SearchType } from '@/components/table'
import { getCategoryList, saveOrUpdateSubClass } from '@/api/serv'
import SubClassEdit from './SubClassEdit.vue'
import CategoryEdit from './CategoryEdit.vue'
import dayjs from 'dayjs'

const columns = [
  {
    title: '名称',
    dataIndex: 'serviceName'
  },
  {
    title: '排序号',
    width: 130,
    dataIndex: 'sequence'
  },
  {
    title: '是否启用',
    scopedSlots: { customRender: 'enable' },
    enum: 'SYS0002',
    dataIndex: 'enabled',
    filter: { type: SearchType.ENUM }
  },
  {
    title: '首页展示',
    scopedSlots: { customRender: 'showInHome' },
    enum: 'SYS0002',
    dataIndex: 'showInHome',
    filter: { type: SearchType.ENUM }
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 200,
    sorter: true,
    customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
  },
  { title: '操作', scopedSlots: { customRender: 'action' }, width: 190 }
]

export default {
  name: 'ServiceList',
  mixins: [TableScript, {}],
  components: { TableTemplate, SubClassEdit, CategoryEdit },
  data() {
    return {
      columns,
      useYScroll: true,
      title: '服务管理',
      pagination: false,
      codes: [['SYS0002'], []],
      loadingKeys: [],
      showInHomeLoadingKeys: [],
      rowKey: 'key'
    }
  },
  methods: {
    queryData: getCategoryList,
    loadSuccess() {
      this.expandedRowKeys = this.dataSource.map((d) => d.id + '')
    },
    enableChange(record, index) {
      if (this.loadingKeys.includes(record.id)) {
        return
      }
      this.loadingKeys.push(record.id)
      saveOrUpdateSubClass({ id: record.id, enabled: !record.enabled })
        .then(({ code }) => {
          if (code == 200) {
            this.$message.success('保存成功')
            const pIndex = this.dataSource.findIndex(
              (d) => d.id == record.categoryId
            )
            this.dataSource[pIndex].children[index].enabled = !record.enabled
          }
        })
        .finally(() => {
          this.loadingKeys.splice(this.loadingKeys.indexOf(record.id), 1)
        })
    },
    showInHomeChange(record, index) {
      if (this.loadingKeys.includes(record.id)) {
        return
      }
      this.showInHomeLoadingKeys.push(record.id)
      saveOrUpdateSubClass({ id: record.id, showInHome: !record.showInHome })
        .then(({ code }) => {
          if (code == 200) {
            this.$message.success('保存成功')
            const pIndex = this.dataSource.findIndex(
              (d) => d.id == record.categoryId
            )
            this.dataSource[pIndex].children[index].showInHome =
              !record.showInHome
          }
        })
        .finally(() => {
          this.showInHomeLoadingKeys.splice(
            this.showInHomeLoadingKeys.indexOf(record.id),
            1
          )
        })
    },
    edit(record) {
      const categoryName = this.dataSource.filter(
        (d) => d.id == record.categoryId
      )[0].serviceName
      this.$refs.SubClassEdit.show({
        id: record.id,
        categoryId: record.categoryId,
        categoryName
      })
    },
    add(record) {
      this.$refs.SubClassEdit.show({
        id: null,
        categoryId: record.id,
        categoryName: record.serviceName
      })
    },
    editCategory(record) {
      this.$refs.CategoryEdit.show(record.id)
    }
  }
}
</script>