<template>
  <div>
    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">新增</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'topRight',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <DeviceDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>

<script lang="ts">
  // import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable } from '/@/components/Table'
  import { Card } from 'ant-design-vue'
  import { defineComponent, reactive } from 'vue'
  import { getDevices } from '/@/api/sys/other'
  import { BasicColumn, FormSchema, TableAction } from '/@/components/Table'
  import { h } from 'vue'
  import { Tag } from 'ant-design-vue'
  import { useDrawer } from '/@/components/Drawer'
  import DeviceDrawer from './DeviceDrawer.vue'
  import { deleteDevice } from '/@/api/sys/other'

  export const columns: BasicColumn[] = [
    {
      title: '类型',
      dataIndex: 'type',
    },
    {
      title: '设备编号',
      dataIndex: 'sn',
    },
    {
      title: '基地',
      dataIndex: 'base_name',
    },
    {
      title: '监控点',
      dataIndex: 'monitoring_point',
    },
    {
      title: '状态',
      dataIndex: 'status',
      customRender: ({ record }) => {
        const status = record.status
        // 状态: 0 禁用, 1 在线, 2 离线, 3 故障
        const list = [
          {
            value: 0,
            color: 'red',
            label: '禁用',
          },
          {
            value: 1,
            color: 'green',
            label: '在线',
          },
          {
            value: 2,
            color: 'pink',
            label: '离线',
          },
          {
            value: 3,
            color: 'orange',
            label: '故障',
          },
        ]
        const item = list.find((e) => e.value === status)
        const color = item?.color ?? 'red'
        const text = item?.label ?? status
        return h(Tag, { color: color }, () => text)
      },
    },
  ]

  export const searchFormSchema: FormSchema[] = [
    {
      field: 'account',
      label: '',
      component: 'Input',
      colProps: { span: 4 },
    },
    {
      field: 'nickname',
      label: '',
      component: 'Input',
      colProps: { span: 4 },
      componentProps: {
        placeholder: '请输入1',
      },
    },
  ]

  export default defineComponent({
    components: {
      [Card.name]: Card,
      BasicTable,
      TableAction,
      DeviceDrawer,
    },
    setup() {
      const [registerDrawer, { openDrawer }] = useDrawer()
      const searchInfo = reactive<Recordable>({})
      const [registerTable, { reload, updateTableDataRecord }] = useTable({
        api: getDevices,
        rowKey: 'id',
        columns,
        formConfig: {
          labelWidth: 120,
          schemas: searchFormSchema,
        },
        useSearchForm: true,
        showTableSetting: false,
        bordered: true,
        handleSearchInfoFn(info) {
          console.log('handleSearchInfoFn', info)
          return info
        },
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          fixed: undefined,
        },
      })

      function handleCreate() {
        openDrawer(true, {
          isUpdate: false,
        })
      }

      function handleEdit(record: Recordable) {
        openDrawer(true, {
          record,
          isUpdate: true,
        })
      }

      async function handleDelete(record: Recordable) {
        try {
          await deleteDevice(record.id)
        } finally {
          reload()
        }
      }

      function handleSuccess() {
        reload()
      }

      return {
        searchInfo,
        handleEdit,
        handleDelete,
        handleSuccess,
        registerDrawer,
        handleCreate,
        registerTable,
      }
    },
  })
</script>

<style scoped></style>
