<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title"> 审批管理 </div>
    </header>
    <main class="safety-platform-container__main">
      <div class="search-table-container">
        <header>
          <el-button type="primary" @click="handleCreateApproval" :icon="Plus">添加审批流程</el-button>
        </header>
        <BasicTable
          :tableConfig="tableConfig"
          :tableData="tableData"
          @update:page-size="handleSizeChange"
          @update:page-number="handleCurrentChange"
        >
          <template #action="scope">
            <ActionButton text="设置审批流程" @click="handleEditApproval(scope.row.id)" />
            <ActionButton
              text="删除"
              :popconfirm="{
                title: '确定要删除?',
              }"
              @confirm="handleDeleteApproval(scope.row)"
            />
          </template>
        </BasicTable>
      </div>
    </main>
  </div>
  <ApprovalCreateDialog ref="approvalCreateDialogRef" @success="getTableData" />
</template>

<script setup lang="ts">
  import { Plus } from '@element-plus/icons-vue';
  import { ElMessage } from 'element-plus';
  import BasicTable from '@/components/BasicTable.vue';
  import ActionButton from '@/components/ActionButton.vue';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { TABLE_OPTIONS, APPROVAL_TABLE_COLUMNS } from './config/table';
  import { onMounted, ref } from 'vue';
  import { getApprovalInstanceList, delApprovalInstance } from '@/api/approval/approval';
  import { useRouter } from 'vue-router';
  import { ApprovalInstanceType } from './types';
  import ApprovalCreateDialog from './components/ApprovalCreateDialog.vue';

  const router = useRouter();

  const { tableConfig, pagination } = useTableConfig(APPROVAL_TABLE_COLUMNS, TABLE_OPTIONS);

  const tableQuery = ref({
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    queryParam: undefined,
  });

  const tableData = ref<ApprovalInstanceType[]>([]);
  const handleSizeChange = (value: number) => {
    pagination.pageSize = value;
    tableQuery.value.pageSize = value;
    getTableData();
  };
  const handleCurrentChange = (value: number) => {
    pagination.pageNumber = value;
    tableQuery.value.pageNumber = value;
    getTableData();
  };

  async function getTableData() {
    tableConfig.loading = true;

    const res = await getApprovalInstanceList(tableQuery.value);
    tableData.value = res.records;
    pagination.total = res.totalRow;
    tableConfig.loading = false;
  }

  onMounted(() => {
    getTableData();
  });

  const approvalCreateDialogRef = ref<InstanceType<typeof ApprovalCreateDialog>>();
  const handleCreateApproval = () => {
    approvalCreateDialogRef.value?.openDialog();
  };

  const handleEditApproval = (id: number) => {
    router.push({
      name: 'SystemApprovalNode',
      query: {
        id,
      },
    });
  };
  const handleDeleteApproval = async (row: ApprovalInstanceType) => {
    if (row.isRelated || row.isApplied) {
      ElMessage.error('审批流应用中，无法删除');
      return;
    }
    try {
      tableConfig.loading = true;
      await delApprovalInstance(row.id);
      getTableData();
    } catch (e) {
      console.log(e);
    }
  };
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;
</style>
