<template>
  <div>
    <BasicTable :clickToRowSelect="false" @register="registerTable">
      <template #toolbar>
        <Authority value="api:yt:servicePlan:post">
          <Button type="primary" @click="handleCreate">
            {{ t('inspection.servicePlan.createPlanText') }}
          </Button>
        </Authority>
      </template>
      <template #status="{ record }">
        <Tag
          :color="
            record.status == 'NOTSTART'
              ? 'red'
              : record.status == 'UNDERWAY'
              ? 'blue'
              : record.status == 'COMPLETED'
              ? 'green'
              : 'yellow'
          "
          class="ml-2"
        >
          {{ t(`inspection.servicePlan.${record.status}`) }}
        </Tag>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: t('common.viewText'),
              auth: 'api:yt:servicePlan:get',
              icon: 'ant-design:eye-outlined',
              onClick: handleViewDetail.bind(null, record),
            },
            {
              label: t('common.editText'),
              auth: 'api:yt:servicePlan:update',
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
              ifShow: () => record.status === 'NOTSTART',
            },
            {
              label: t('common.delText'),
              auth: 'api:yt:servicePlan:delete',
              icon: 'ant-design:delete-outlined',
              color: 'error',
              ifShow: () => record.status === 'NOTSTART',
              popConfirm: {
                title: t('common.deleteConfirmText'),
                confirm: handleDelete.bind(null, record),
              },
            },
            {
              label: t('common.start'),
              auth: 'api:yt:servicePlan:update',
              icon: 'ant-design:caret-right-outlined',
              ifShow: () => record.status === 'NOTSTART',
              popConfirm: {
                title: t('common.startConfirmText'),
                confirm: handleUpdateStatus.bind(null, record),
              },
            },
            {
              label: t('common.stop'),
              auth: 'api:yt:servicePlan:update',
              icon: ' <PauseCircleOutlined />',
              ifShow: () => record.status === 'NOTSTART' || record.status === 'UNDERWAY',
              popConfirm: {
                title: t('common.stopConfirmText'),
                confirm: handleUpdateStatus.bind(null, record, 'STOP'),
              },
            },
            {
              label: t('common.down'),
              auth: 'api:yt:servicePlan:update',
              icon: 'ant-design:check-circle-outlined',
              ifShow: () => record.status === 'UNDERWAY',
              popConfirm: {
                title: t('common.downConfirmText'),
                confirm: handleUpdateStatus.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <servicePlanModal
      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 {
    deleteServePlan,
    getServicePlanList,
    updateServiceStatus,
    savePreservePlan,
    getPreserveDetail,
  } from '/@/api/inspection/servicePlan';
  import { servicePlanModal } from './components/index';
  import { columns, searchFormSchema } from './index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Button, Tag } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { t } = useI18n();
  import { ref } from 'vue';
  const { createMessage } = useMessage();
  const modalVisible = ref(false);
  const isViewMode = ref(false);
  const modalTitle = ref('');
  const initialData = ref({
    form: {
      preserveCode: '',
      preserveName: '',
      status: '',
      times: '',
      frequency: '',
    },
    tableData: [],
  });
  const [registerTable, { reload, setLoading, setSelectedRowKeys }] = useTable({
    title: t('inspection.servicePlan.listText'),
    api: getServicePlanList,
    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',
    },
  });

  // 新增
  const handleCreate = () => {
    modalTitle.value = '新增';
    initialData.value = {
      form: {
        preserveCode: '',
        preserveName: '',
        status: '',
        times: '',
        frequency: '',
      },
      tableData: [],
    };
    modalVisible.value = true;
  };

  const handleSubmit = async (data) => {
    modalVisible.value = false;
    await savePreservePlan(data);
    createMessage.success('提交成功');
    handleReload();
  };

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

  const handleViewDetail = async (record?: any) => {
    let id = record.id;
    modalTitle.value = '查看';
    try {
      const response = await getPreserveDetail({ id });
      initialData.value = {
        form: response, // 表单数据
        tableData: response.preserveDetailList, // 表格数据
      };
      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 getPreserveDetail({ id });
      initialData.value = {
        form: response, // 表单数据
        tableData: response.preserveDetailList, // 表格数据
      };
      modalVisible.value = true; // 打开弹框
      isViewMode.value = false;
    } catch (error) {
      throw error;
    } finally {
    }
  };

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

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