<template>
  <div>
    <BasicTable style="flex: auto" @register="registerTable">
      <template #toolbar>
        <Authority value="api:yt:order:post">
          <Button type="primary" @click="handleCreate">
            {{ t('repair.order.createOrderText') }}
          </Button>
        </Authority>
      </template>
      <template #situationImg="{ record }">
        <TableImg
          :size="30"
          :showBadge="false"
          :simpleShow="true"
          :imgList="
            typeof record.situationImg !== 'undefined' && record.situationImg !== '' && record.situationImg != null
              ? [record.situationImg]
              : null
          "
        />
      </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>
      <template #action="{ record }">
        <TableAction
          :actions="[
             {
              label: t('common.maintenance'),
              auth: 'api:yt:order:update',
              icon: 'ant-design:caret-right-outlined',
              ifShow: () => record.status === 'SCHEDULING',
              onClick:recordSave.bind(null,record)
            },
            {
              label: t('common.checkOK'),
              auth: 'api:yt:order:update',
              icon: 'ant-design:caret-right-outlined',
              ifShow: () => record.status === 'REPAIRFINISH',
              onClick:handleUpdateStatus.bind(null, record, 'ACCEPTANCEPASSED')
            },
            {
              label: t('common.checkFail'),
              auth: 'api:yt:order:update',
              icon: 'ant-design:caret-right-outlined',
              ifShow: () => record.status === 'REPAIRFINISH',
              onClick:handleUpdateStatus.bind(null, record, 'SCHEDULING')
            },
          ]"
        />
      </template>
    </BasicTable>
    <orderModal @register="registerModal" @handleReload="handleReload" />
    <FormDrawer
      @register="registerApplicationApiFormDrawer"
    />
    <RepairFormModal
      v-model:visible="modalVisible"
      :initial-data="initialData"
      @submit="handleSubmit"
    />
  </div>
</template>
<script setup lang="ts">
  import { orderModal, RepairFormModal } from "./components/index"
  import { BasicTable, TableAction, TableImg } from '/@/components/Table';
  import { useTable } from '/@/components/Table';
  import {getRepairOrderList, saveRecord, updateStatus} 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';
  import {useModal} from "/@/components/Modal";
  const { t } = useI18n();
  const [registerModal, { openModal }] = useModal();
  import {FormDrawer} from "./components/FormDrawer/index";
  import {useDrawer} from "/@/components/Drawer";
  import {useMessage} from "/@/hooks/web/useMessage";
  import {ref} from "vue";
  import {dateFormat} from "/@/utils/common/compUtils";
  const modalVisible = ref(false);
  const [registerApplicationApiFormDrawer, {  }] = useDrawer();
  const { createMessage } = useMessage();
  const initialData = ref({
    form: {
      orderId:'',
      repairBy: '',
      repairByName: '',
      repairDate: '',
      description: '',
      malfunctionReasonId: '',
    },
  });
  const [
    registerTable,
    { reload, setLoading,  setSelectedRowKeys },
  ] = 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: () => {},
    },
  });

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

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


  const handleUpdateStatus = async (record?: any,value?: string) => {
    console.log(record,'record')
    console.log(value,'value')
    let id = record.id;
    let status = value;

    try {
      setLoading(true);
      await updateStatus({ id,status });
      createMessage.success(t('common.editSuccessText'));
      handleReload();
    } catch (error) {
      throw error;
    } finally {
      setLoading(false);
    }
  }

  const recordSave = async (record?: any) => {
    modalVisible.value = true;
    initialData.value = {
      form: {
        orderId: record?.id || '',
        repairBy: '',
        repairByName: '',
        repairDate: '',
        description: '',
        malfunctionReasonId: '',
      }
    }
  }
  const handleSubmit = async (data) => {
    const format = 'yyyy-MM-dd hh:mm:ss';
    const _data = {
      ...data,
      repairDate: dateFormat(data?.repairDate, format),
    }
      try {
        setLoading(true);
        await saveRecord(_data); // 提交维修表单数据
        createMessage.success(t('common.editSuccessText'));
        handleReload();
        modalVisible.value = false;
      } catch (error) {
        throw error;
      } finally {
        setLoading(false);
      }
  };
</script>