<template>
  <div>
    <BasicTable style="flex: auto" @register="registerTable">
      <template #toolbar>
        <Authority value="api:yt:product:category:post">
          <Button type="primary">
            {{ t('repair.order.createCategoryText') }}
          </Button>
        </Authority>
      </template>
      <template #deviceId="{ record }">
        <span>{{ record?.deviceInfo?.name }}</span>
      </template>
      <template #status="{ record }">
        <Tag
          :color="
            record.status == 'SCHEDULING'
              ? 'yellow'
              : record.status == 'REPAIRFINISH'
              ? 'blue'
              : 'green'
          "
          class="ml-2"
        >
          {{ t(`repair.order.${record.status}`) }}
        </Tag>
      </template>
      <template #emergency="{ record }">
        <Tag :color="record.emergency ? 'error' : 'green'" class="ml-2">
          {{ record.emergency ? '是' : '否' }}
        </Tag>
      </template>
    </BasicTable>
  </div>
</template>
<script setup lang="ts">
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useTable } from '/@/components/Table';
  import { getRepairOrderList } from '/@/api/repair/order';
  import { columns, searchFormSchema } from './index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Button, Tag } from 'ant-design-vue';
  import { Authority } from '/@/components/Authority';
  const { t } = useI18n();

  const [
    registerTable,
    { reload, setLoading, getSelectRowKeys, setSelectedRowKeys, getRowSelection },
  ] = useTable({
    title: t('repair.order.listText'),
    api: getRepairOrderList,
    columns,
    formConfig: {
      labelWidth: 100,
      schemas: searchFormSchema,
    },
    immediate: true,
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    clickToRowSelect: false,
    rowKey: 'id',
    actionColumn: {
      width: 230,
      title: t('common.actionText'),
      slots: { customRender: 'action' },
      fixed: 'right',
    },
    rowSelection: {
      type: 'checkbox',
      getCheckboxProps: (record: any) => {},
    },
  });
</script>