<template>
  <div>
    <BasicTable :clickToRowSelect="false" @register="registerTable">
      <template #toolbar>
        <Authority value="api:yt:inspectionPlan:post">
          <Button type="primary" @click="handleCreate">
            {{ t('inspection.inspectionPlan.createCategoryText') }}
          </Button>
        </Authority>
      </template>
      <template #status="{ record }">
        <Tag
          :color="
            record.status == 'NOT_START'
              ? 'yellow'
              : record.status == 'UNDERWAY'
              ? 'blue': record.status == 'FINISH'
              ? 'green': 'red'
          "
          class="ml-2"
        >
          {{ t(`inspection.inspectionPlan.${record.status}`) }}
        </Tag>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: t('common.viewText'),
              auth: 'api:yt:inspectionPlan:get',
              icon: 'ant-design:eye-outlined',
              onClick: handleViewDetail.bind(null, record),
            },
            {
              label: t('common.editText'),
              auth: 'api:yt:inspectionPlan:update',
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
              ifShow: () => record.status === 'NOT_START',
            },
            {
              label: t('common.delText'),
              auth: 'api:yt:inspectionPlan:delete',
              icon: 'ant-design:delete-outlined',
              color: 'error',
              ifShow: () => record.status === 'NOT_START',
              popConfirm: {
                title: t('common.deleteConfirmText'),
                confirm: handleDelete.bind(null, record),
              },
            },
            {
              label: t('common.start'),
              auth: 'api:yt:inspectionPlan:update',
              icon: 'ant-design:caret-right-outlined',
              ifShow: () => record.status === 'NOT_START',
              popConfirm: {
                title: t('common.startConfirmText'),
                confirm: handleUpdateStatus.bind(null, record),
              },
            },
            {
              label: t('common.stop'),
              auth: 'api:yt:inspectionPlan:update',
              icon: ' <PauseCircleOutlined />',
              ifShow: () => record.status === 'NOT_START' || record.status === 'UNDERWAY',
              popConfirm: {
                title: t('common.stopConfirmText'),
                confirm: handleUpdateStatus.bind(null, record,'STOP'),
              },
            },
            {
              label: t('common.down'),
              auth: 'api:yt:inspectionPlan:update',
              icon: 'ant-design:check-circle-outlined',
              ifShow: () => record.status === 'UNDERWAY',
              popConfirm: {
                title: t('common.downConfirmText'),
                confirm: handleUpdateStatus.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <insPlanModal
      v-model:visible="modalVisible"
      :initial-data="initialData"
      :is-view-mode="isViewMode"
      @submit="handleSubmit"
      :title="modalTitle"
    />
  </div>
</template>
<script setup lang="ts">
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import {
  deleteInspectionPlan,
  getInspectionPlanList,
  getInsPlanDetail,
  updateInspectionStatus, updateInsStatus
} from '/@/api/inspection/inspectionPlan';
import { columns, searchFormSchema } from './index';
import { useI18n } from '/@/hooks/web/useI18n';
import {Button, message, Tag} from 'ant-design-vue';
import {useMessage} from "/@/hooks/web/useMessage";
import { insPlanModal } from "./components/index"
import {ref} from "vue";
import {dateFormat} from "/@/utils/common/compUtils";
const { t } = useI18n();
const { createMessage } = useMessage();
const modalVisible = ref(false);
const isViewMode = ref(false);
const modalTitle = ref('');
const initialData = ref({
  form: {
    code: '',
    name: '',
    status: '',
    enabled: '',
    startTime: '',
    endTime: '',
    remark: '',
  },
  tableData: [],
});

const [
  registerTable,
  { reload, setLoading, setSelectedRowKeys  },
] = useTable({
  title: t('inspection.inspectionPlan.listText'),
  api: getInspectionPlanList,
  columns,
  formConfig: {
    labelWidth: 100,
    schemas: searchFormSchema,
  },
  immediate: true,
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  showIndexColumn: false,
  clickToRowSelect: false,
  rowKey: 'id',
  actionColumn: {
    width: 360,
    title: t('common.actionText'),
    slots: { customRender: 'action' },
    fixed: 'right',
  },
  rowSelection: {
    type: 'checkbox',
    getCheckboxProps: () => {},
  },
});

const handleDelete = async (record?: any) => {
  let id = record.id;
  try {
    setLoading(true);
    await deleteInspectionPlan({ id });
    createMessage.success(t('common.deleteSuccessText'));
    handleReload();
  } catch (error) {
    throw error;
  } finally {
    setLoading(false);
  }
};

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

const handleUpdateStatus = async (record?: any,value?: string) => {
  let id = record.id;
  let status = '';
  if (record.status === 'NOT_START') {
    status = 'UNDERWAY'
  }else if(record.status === 'UNDERWAY'){
    status = 'FINISH'
  }else if(record.status === 'FINISH'){
    status = 'STOP'
  }
  if (value === 'STOP') {
    status = 'STOP'
  }
  try {
    setLoading(true);
    await updateInsStatus({ id,status });
    createMessage.success(t('common.editSuccessText'));
    handleReload();
  } catch (error) {
    throw error;
  } finally {
    setLoading(false);
  }
}

const handleViewDetail = async (record?: any) => {
  let id = record.id;
  modalTitle.value = '查看';
  try {
    const response = await getInsPlanDetail({id})
    initialData.value = {
      form: response, // 表单数据
      tableData: response.tkCheckDetailsDTOList, // 表格数据
    };
    modalVisible.value = true; // 打开弹框
    isViewMode.value = true;
  }catch (error) {
    throw error;
  }finally {

  }
}

const handleEdit = async (record?: any) => {
  let id = record.id;
  modalTitle.value = '修改';
  try {
    const response = await getInsPlanDetail({id})
    initialData.value = {
      form: response, // 表单数据
      tableData: response.tkCheckDetailsDTOList, // 表格数据
    };
    modalVisible.value = true; // 打开弹框
  }catch (error) {
    throw error;
  }finally {

  }
}

// 新增
const handleCreate = () => {
  modalTitle.value = '新增';
  initialData.value = {
    form: {
      code: '',
      name: '',
      status: '',
      enabled: '',
      startTime: '',
      endTime: '',
      remark: '',
    },
    tableData: [],
  }
  modalVisible.value = true;
};

const handleSubmit = async (data) => {
  const format = 'yyyy-MM-dd hh:mm:ss';
  const _data = {
    ...data,
    startTime: dateFormat(data?.startTime, format),
    endTime: dateFormat(data?.endTime, format),
  }
  modalVisible.value = false;
  await updateInspectionStatus(_data)
  message.success('提交成功');
  handleReload()
};


</script>