<template>
  <div>
    <BasicTable style="flex: auto" @register="registerTable">
      <template #toolbar>
        <Authority value="api:yt:errorReason:post">
          <Button type="primary" @click="handleCreate">
            {{ t('equipment.errorReason.createCategoryText') }}
          </Button>
        </Authority>
      </template>
      <template #status="{ record }">
        <Switch
          @click="(e) => handleSwitch(e, record)"
          :loading="switchLoading"
          v-model:checked="record.status"
          checkedValue="ENABLE"
          unCheckedValue="DISABLE"
        />
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: t('common.detailText'),
              icon: 'ant-design:eye-outlined',
              auth: 'api:yt:errorReason:get',
              onClick: handleDetail.bind(null, record),
            },
            {
              label: t('common.editText'),
              auth: 'api:yt:errorReason:update',
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: t('common.delText'),
              auth: 'api:yt:errorReason:delete',
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: t('common.deleteConfirmText'),
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <reasonModal @register="registerModal" @handleReload="handleReload" />
    <FormDrawer
      @register="registerApplicationApiFormDrawer"
    />
  </div>
</template>

<script setup lang="ts">
import {BasicTable, TableAction, useTable} from '/@/components/Table';
import { useI18n } from '/@/hooks/web/useI18n';
import {
  deleteEquipmentError,
  equipmentErrorCategory,
  getEquipmentErrorList
} from '/@/api/equipment/errorReason';
import { columns, searchFormSchema } from './index';
import {Button,  Switch} from 'ant-design-vue';
import {Authority} from "/@/components/Authority";
import {useModal} from "/@/components/Modal";
import { reasonModal } from './components/index';
import {useMessage} from "/@/hooks/web/useMessage";
import { useDrawer} from "/@/components/Drawer";

import {FormDrawer} from "./components/FormDrawer/index";
import {ref} from "vue";
const switchLoading = ref<boolean>(false);
const { t } = useI18n();
const { createMessage } = useMessage();

const [
  registerTable,
  { reload, setLoading, getSelectRowKeys, setSelectedRowKeys },
] = useTable({
  title: t('equipment.errorReason.listText'),
  api: getEquipmentErrorList,
  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',
  },
});
const [registerApplicationApiFormDrawer, { openDrawer }] = useDrawer();
const [registerModal, { openModal }] = useModal();

const handleDetail = (record?: any) => {
  openDrawer(true, {
    isUpdate: 2,
    record,
  });
};
// 编辑
const handleEdit = (record?: any) => {
  openModal(true, {
    isUpdate: true,
    record,
  });
};

// 新增
const handleCreate = () => {
  openModal(true, {
    isUpdate: false,
  });
};

const handleReload = () => {
  setSelectedRowKeys([]);
  reload();
};

const handleDelete = async (record?: any) => {
  let ids:any = [];
  if (record) {
    ids = [record.id];
  } else {
    ids = getSelectRowKeys();
  }

  try {
    setLoading(true);
    await deleteEquipmentError({ ids });
    createMessage.success(t('common.deleteSuccessText'));
    handleReload();
  } catch (error) {
    throw error;
  } finally {
    setLoading(false);
  }
};

// 状态->编辑
const handleSwitch = async (e: any, record: any) => {
  switchLoading.value = true;
  await equipmentErrorCategory({ ...record, status: e });
  setTimeout(() => {
    switchLoading.value = false;
  }, 1500);
  createMessage.success(
    `${e !== 'ENABLE' ? t('common.disableText') : t('common.enableText')}${t('common.successText')}`
  );
  handleReload();
};

</script>