<template>
  <div class="main-box">
    <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-auth="['article:home:export']"
            type="primary"
            :disabled="!isSelected"
            :icon="Download"
            plain
            @click="exportAction(selectedListIds)"
          >
            导出
          </el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link :icon="View" @click="viewAction(scope.row)"> 详情 </el-button>
        </template>
      </ProTable>
    </div>
  </div>
</template>
<script setup lang="ts" name="AnnotationHome">
import { ref, reactive, h } from "vue";
import { useRouter } from "vue-router";
import { AnnoHome, Clause } from "@/api/interface";
import { getDictOptions, getAllUserList } from "@/api/modules/common";
import { getAnnoHomeList, exportAnnoHome } from "@/api/modules/annotation/home";
import { useDownload, usePageKeepALive } from "@/hooks";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { StyleId, AnnoStatus } from "@/enums";
import { View, Download } from "@element-plus/icons-vue";

const DETAIL_PAGE_ROUTE = "AnnoHomeDetail";
// 页面缓存
usePageKeepALive([DETAIL_PAGE_ROUTE], () => {
  proTable.value?.getTableList();
});

// ProTable 实例
const proTable = ref<ProTableInstance>();
const router = useRouter();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
// 表格配置项
const columns = reactive<ColumnProps<Clause.ClauseInfo>[]>([
  { type: "selection", width: 50 },
  {
    prop: "firstArticleNo",
    label: "首见条文编号",
    search: {
      el: "input",
      order: 1,
      props: {
        prefixIcon: h("span", "SJ"),
        type: "number",
        max: 999999999,
        onBlur: (e: any) => {
          const searchParam = proTable.value!.searchParam;
          if (searchParam.firstArticleNo.length > e.target.max.length) {
            searchParam.firstArticleNo = e.target.max;
          }
        }
      }
    },
    render: ({ row }) => `SJ${row.firstArticleNo}`
  },
  { prop: "articleContent", label: "条文内容", search: { el: "input", order: 2 } },
  {
    prop: "diseaseId",
    label: "所属疾病",
    render: scope => scope.row.diseaseName || "--",
    enum: () => getDictOptions("disease"),
    fieldNames: { label: "dictLabel", value: "dictCode" },
    search: { el: "select", order: 3, props: { filterable: true } }
  },
  {
    prop: "bookId",
    label: "书名",
    render: scope => scope.row.bookName || "--",
    enum: () => getDictOptions("book"),
    fieldNames: { label: "dictLabel", value: "dictCode" },
    search: { el: "select", order: 4, props: { filterable: true } }
  },
  { prop: "chapter", label: "卷篇" },
  { prop: "styleId", label: "体裁", enum: StyleId.getAllEnumValues(), search: { el: "select", order: 5 } },
  {
    prop: "annotationBy",
    label: "标注员",
    enum: () => getAllUserList(),
    fieldNames: { label: "nickName", value: "userId" },
    search: { el: "select", order: 6, props: { filterable: true } }
  },
  {
    prop: "annotationStatus",
    label: "状态",
    tag: true,
    enum: AnnoStatus.getAllEnumValues(),
    search: { el: "select", order: 7 }
  },
  { prop: "operation", label: "操作", width: 200, fixed: "right" }
]);
// 分页列表获取数据
const getTableList = (params: AnnoHome.ReqAnnoHomeParams) => {
  return getAnnoHomeList(params);
};

// 查看详情
function viewAction(row: Clause.ClauseInfo) {
  router.push({
    name: DETAIL_PAGE_ROUTE,
    query: {
      id: row.id
    }
  });
}

// 批量导出
async function exportAction(ids: string[] | number[]) {
  await useDownload(exportAnnoHome, "导出标注信息", { articleIds: ids }, true, ".xlsx");
  proTable.value?.clearSelection();
}
</script>
<style lang="scss" scoped></style>
