<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="getTableList"
      :init-param="initParam"
      :form-props="{ labelWidth: '120px' }"
      :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="{ isSelected, selectedListIds }">
        <template v-if="!isAudit">
          <el-button type="primary" :disabled="!isSelected" :icon="Check" @click="batchAuditAction(selectedListIds)">
            批量审核
          </el-button>
        </template>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button v-if="!isAudit" type="primary" link :icon="Edit" @click="auditAction(scope.row)"> 审核 </el-button>
      </template>
    </ProTable>
    <AuditDialog ref="dialogRef"></AuditDialog>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, defineProps, defineExpose } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Check, Edit } from "@element-plus/icons-vue";
import AuditDialog from "@/components/AuditDialog/index.vue";

//props
const props = defineProps({
  isAudit: {
    type: Boolean,
    default: () => false
  }
});
console.log("props", props);
// ref
const proTable = ref<ProTableInstance>();
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
// 表格配置项
const columns = reactive<ColumnProps[]>([
  ...(!props.isAudit ? [{ type: "selection", width: 50 }] : []),
  { prop: "semanticsName", label: "语义名称", search: { el: "input" } },
  { prop: "updateTime", label: "添加时间", search: { el: "date-range-picker", custom: true } },
  { prop: "updatePerson", label: "更新人" },
  {
    prop: "dataSources",
    label: "添加人员",
    // enum: () => getDictOptions("sys_oper_type"),
    // enum: [{ label: "添加", value: "1" }],
    search: { el: "select" }
  },
  ...(props.isAudit
    ? ([
        { prop: "updateTime", label: "审核时间", search: { el: "date-range-picker", custom: true } },
        {
          prop: "dataSources",
          label: "审核结果",
          // enum: () => getDictOptions("sys_oper_type"),
          // enum: [{ label: "添加", value: "1" }],
          search: { el: "select" }
        },
        { prop: "operation", label: "操作", width: 330, fixed: "right" }
      ] as any)
    : [])
]);
// 分页列表获取数据
let getTableList = [
  {
    id: 1,
    semanticsId: "111222",
    semanticsName: "语义名称的",
    updateTime: "2024-10-01 12:02:03",
    updatePerson: "更新人",
    dataSources: "数据来源",
    notes: "备注"
  }
];
// 批量审核操作
const batchAuditAction = async (ids: string[] | number[]) => {
  console.log("批量审核操作ids", ids);
  dialogRef.value?.open({ semanticsIds: ids }).then(proTable.value?.getTableList);
  // await useHandleData(
  //   auditProcess,
  //   { articleIds: ids, auditStatus: AnnoStatusEnum.PASSED, refuseReason: "" },
  //   `批量审核默认为【审核通过】结果，确认当前${ids.length}条条文标注结果合格！`
  // );
  proTable.value?.getTableList();
  proTable.value?.clearSelection();
};
// 审核
const dialogRef = ref<InstanceType<typeof AuditDialog> | null>(null);
function auditAction(row?: any) {
  dialogRef.value?.open({ semanticsName: row.semanticsName, semanticsIds: row.id }).then(proTable.value?.getTableList);
}
defineExpose({
  getTableList() {
    proTable.value?.getTableList();
  }
});
</script>
<style lang="scss" scoped>
.table-box {
  width: 100%;
}
</style>
