<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      row-key="id"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
      :form-props="{ labelWidth: '120px' }"
      :select-on-indeterminate="true"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="{ isSelected, selectedListIds }">
        <el-button
          v-if="isAllocated"
          v-auth="['article:allocation:write']"
          type="primary"
          :disabled="!isSelected"
          :icon="Remove"
          @click="cancelAction(selectedListIds)"
        >
          批量取消
        </el-button>
        <el-button
          v-else
          v-auth="['article:allocation:write']"
          type="primary"
          :disabled="!isSelected"
          :icon="Pointer"
          @click="divisionAction(selectedListIds)"
        >
          批量分工
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button
          v-if="!isAllocated"
          v-auth="['article:allocation:write']"
          type="primary"
          link
          @click="divisionAction([scope.row.id], true)"
        >
          分工
        </el-button>
        <template v-else>
          <el-button v-auth="['article:allocation:write']" type="primary" link @click="cancelAction([scope.row.id])">
            取消分工
          </el-button>
          <el-button
            v-auth="['article:allocation:write']"
            type="primary"
            link
            @click="divisionAction([scope.row.id], false, scope.row.annotationBy)"
          >
            重新分工
          </el-button>
        </template>
      </template>
    </ProTable>
    <DivisionDialog ref="dialogRef" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, defineProps, defineExpose } from "vue";
import { Remove, Pointer } from "@element-plus/icons-vue";
import { AnnoDivision, Clause } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { StyleId } from "@/enums";
import { getDictOptions } from "@/api/modules/common";
import { getAnnoDivisionList, cancelDivide } from "@/api/modules/annotation/division";
import DivisionDialog from "./DivisionDialog.vue";

//props
const props = defineProps({
  isAllocated: {
    type: Boolean,
    default: () => false
  }
});
// ProTable 实例
const proTable = ref<ProTableInstance>();

const dialogRef = ref<typeof DivisionDialog | null>(null);

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
  sortBy: ""
});
// 表格配置项
const columns = reactive<ColumnProps<Clause.ClauseInfo>[]>([
  { type: "selection", width: 50 },
  {
    prop: "firstArticleNo",
    label: "首见条文编号",
    render: ({ row }) => `SJ${row.firstArticleNo}`
  },
  { prop: "articleContent", label: "条文内容" },
  {
    prop: "diseaseId",
    label: "所属疾病",
    render: scope => scope.row.diseaseName || "--",
    enum: () => getDictOptions("disease"),
    fieldNames: { label: "dictLabel", value: "dictCode" },
    search: { el: "select", order: 1, props: { filterable: true } }
  },
  {
    prop: "bookId",
    label: "书名",
    render: scope => scope.row.bookName || "--",
    enum: () => getDictOptions("book"),
    fieldNames: { label: "dictLabel", value: "dictCode" },
    search: { el: "select", order: 2, props: { filterable: true } }
  },
  { prop: "chapter", label: "卷篇" },
  { prop: "styleId", label: "体裁", enum: StyleId.getAllEnumValues(), search: { el: "select", order: 3 } },
  { prop: "annotationName", label: "标注员", isShow: props.isAllocated },
  { prop: "operation", label: "操作", width: 240, fixed: "right" }
]);
// 分页列表获取数据
const getTableList = (params: AnnoDivision.ReqAnnoDivisionParams) => {
  return getAnnoDivisionList({
    ...params,
    allocationType: props.isAllocated ? 2 : 1
  });
};

// 分工操作
const divisionAction = async (ids: string[] | number[], isBatch = false, annotationBy?: number) => {
  dialogRef.value
    ?.open({
      annotationBy,
      articleIds: ids
    })
    .then(() => {
      proTable.value?.getTableList();
      isBatch && proTable.value?.clearSelection();
    });
};

// 取消分配操作
const cancelAction = async (ids: string[] | number[], isBatch = false) => {
  await useHandleData(
    cancelDivide,
    { articleIds: ids },
    `是否对当前${ids.length}条条文进行取消分配，取消分配后条文状态为【待标注分工】！`
  );
  proTable.value?.getTableList();
  isBatch && proTable.value?.clearSelection();
};

defineExpose({
  getTableList: () => proTable.value?.getTableList()
});
</script>
<style lang="scss" scoped>
.table-box {
  width: 100%;
}
</style>
