<template>
  <table-template :soul="this">
    <template #action="{ record }">
      <a-space>
        <a @click="edit(record.id)">编辑</a>
        <a v-if="hasPerm('SYS0200201.DELETE')" style="color: red" @click="deleteRow(record.id)">删除</a>
      </a-space>
    </template>
    <template #free>
      <ServiceWorkerEdit ref="ServiceWorkerEdit" :success="reset" />
    </template>
  </table-template>
</template>
<script>
import { TableTemplate, TableScript, SearchType } from '@/components/table'
import { getPage, deleteWorker } from '@/api/worker'
import dayjs from 'dayjs'
import ServiceWorkerEdit from './ServiceWorkerEdit.vue'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 120,
    filter: { type: SearchType.STRING }
  },
  { title: '手机号', dataIndex: 'phone', width: 120, align: 'center' },
  { title: '' },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 150,
    customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
  },
  {
    title: '操作',
    width: 120,
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]

export default {
  name: 'ServiceWorkerList',
  mixins: [TableScript],
  components: { TableTemplate, ServiceWorkerEdit },
  data() {
    return {
      columns,
      useYScroll: true,
      title: '维修工管理',
      loadingKeys: [],
      toolbar: [
        {
          text: '新增',
          handler: 'add',
          bizCode: 'SYS0200201.EDIT'
        }
      ]
    }
  },
  methods: {
    queryData: getPage,
    add() {
      this.$refs.ServiceWorkerEdit.show(null)
    },
    edit(id) {
      this.$refs.ServiceWorkerEdit.show(id)
    },
    deleteRow(id) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '是否删除',
        onOk() {
          deleteWorker(id).then(({ code }) => {
            if (code == 200) {
              _this.$message.success('删除成功')
              _this.reset()
            }
          })
        }
      })
    }
  }
}
</script>