<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: '100px' }"
        :select-on-indeterminate="true"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="{ isSelected, selectedListIds }">
          <el-button
            v-auth="['article:anno:write']"
            type="primary"
            :disabled="!isSelected"
            :icon="Promotion"
            @click="submitAction(selectedListIds)"
            plain
          >
            批量提交
          </el-button>
        </template>
        <template #toolButton> </template>
        <!-- 条文内容 -->
        <template #firstArticleNo="scope">
          <div class="h-flex flex-space-between">
            <span>SJ{{ scope.row.firstArticleNo }}</span>
            <template v-if="scope.row.annotationStatus === 4">
              <el-tooltip
                v-if="scope.row.refuseReason"
                class="box-item"
                effect="dark"
                :content="scope.row.refuseReason"
                placement="top"
              >
                <img class="ml5" src="@/assets/images/return_mark.png" width="54" height="37" />
              </el-tooltip>
              <img v-else class="ml5" src="@/assets/images/return_mark.png" width="54" height="37" />
            </template>
          </div>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button v-auth="['article:anno:write']" type="primary" link @click="labelAction(scope.row)"> 标注 </el-button>
          <el-button v-auth="['article:anno:write']" type="primary" link @click="submitAction([scope.row.id])"> 提交 </el-button>
        </template>
      </ProTable>
    </div>
  </div>
</template>
<script setup lang="ts" name="AnnoLabeling">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { AnnoLabeling, Clause } from "@/api/interface";
import { useHandleData, usePageKeepALive } from "@/hooks";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { AnnoStatus } from "@/enums";
import { getAnnoLabelingList, annoSubmit } from "@/api/modules/annotation/labeling";
import { Promotion } from "@element-plus/icons-vue";

const DETAIL_PAGE_ROUTE = "AnnoLabelDetail";
// 页面缓存
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" },
  { prop: "firstArticleNo", label: "首见条文编号", align: "left", width: 134 },
  { prop: "articleContent", label: "条文内容", align: "left" },
  { prop: "nickName", label: "标注员", width: 200 },
  {
    prop: "annotationStatus",
    label: "状态",
    tag: true,
    width: 200,
    enum: AnnoStatus.getAllEnumValues()
  },
  { prop: "operation", label: "操作", width: 200, fixed: "right" }
]);
// 分页列表获取数据
const getTableList = (params: AnnoLabeling.ReqAnnoLabelingParams) => {
  return getAnnoLabelingList(params);
};

// 提交
const submitAction = async (ids: string[] | number[]) => {
  await useHandleData(annoSubmit, { ids }, `是否提交审核当前${ids.length}条首见条文`);
  proTable.value?.getTableList();
};

// 去标注
function labelAction(row: Clause.ClauseInfo) {
  router.push({
    name: DETAIL_PAGE_ROUTE,
    query: {
      id: row.id
    }
  });
}
</script>
<style lang="scss" scoped></style>
