<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="['wordLib:exportOrImport']" type="primary" :icon="Plus" @click="importAction"> 导入 </el-button>
          <el-button
            v-auth="['wordLib:exportOrImport']"
            type="primary"
            :disabled="!isSelected"
            :icon="Download"
            plain
            @click="exportAction(selectedListIds)"
          >
            导出
          </el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link @click="viewAction(scope.row)"> 详情 </el-button>
          <el-button v-auth="['wordLib:write']" type="primary" link @click="switchStatusAction(scope.row)">
            {{ scope.row.enableFlag ? "禁用" : "启用" }}
          </el-button>
          <el-button v-auth="['wordLib:write']" type="primary" link @click="deleteAction(scope.row)"> 删除 </el-button>
        </template>
      </ProTable>
      <ImportExcelDialog
        ref="importRef"
        :file-size="50"
        title="词表库"
        temp-path="./excel/lexicon_temp.xlsx"
        :api="importLexicon"
      />
    </div>
  </div>
</template>
<script setup lang="ts" name="AnnoLexicon">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { AnnoLexicon } from "@/api/interface";
import { useHandleData, useDownload, usePageKeepALive } from "@/hooks";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcelDialog from "@/components/ImportExcelDialog/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import {
  getTandardWordList,
  enabledTandardWord,
  disabledTandardWord,
  deleteTandardWord,
  exportLexicon,
  importLexicon
} from "@/api/modules/annotation/lexicon";
import { Download, Plus } from "@element-plus/icons-vue";

const DETAIL_PAGE_ROUTE = "AnnoLexiconDetail";
// 页面缓存
usePageKeepALive([DETAIL_PAGE_ROUTE], () => {
  proTable.value?.getTableList();
});
// ProTable 实例
const proTable = ref<ProTableInstance>();
const importRef = ref<typeof ImportExcelDialog>();
const router = useRouter();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
// 表格配置项
const columns = reactive<ColumnProps<AnnoLexicon.ResStandardList>[]>([
  { type: "selection", width: 50 },
  { type: "index", label: "序号", width: 80 },
  { prop: "wordName", label: "词表名称", align: "left", search: { el: "input", order: 1 } },
  { prop: "operation", label: "操作", width: 300, fixed: "right" }
]);
// 分页列表获取数据
const getTableList = (params: AnnoLexicon.ReqStandardParams) => {
  return getTandardWordList(params);
};

// 导入
function importAction() {
  importRef.value?.open().then(() => {
    proTable.value?.getTableList();
  });
}

// 切换启用/禁用状态 不需要二次确认
const switchStatusAction = async (row: AnnoLexicon.ResStandardList) => {
  if (row.enableFlag) {
    await disabledTandardWord({ id: row.id });
  } else {
    await enabledTandardWord({ id: row.id });
  }

  ElMessage.success("操作成功");
  proTable.value?.getTableList();
};
// 删除
const deleteAction = async (row: AnnoLexicon.ResStandardList) => {
  await useHandleData(deleteTandardWord, { id: row.id }, `是否删除当前词语，删除后该词语和词语关联关系取消！`);
  proTable.value?.getTableList();
};

// 查看详情
function viewAction(row: AnnoLexicon.ResStandardList) {
  router.push({
    name: DETAIL_PAGE_ROUTE,
    query: {
      id: row.id,
      name: row.wordName
    }
  });
}
// 批量导出
async function exportAction(ids: string[] | number[]) {
  await useDownload(exportLexicon, "", { ids }, true, ".xlsx");
  proTable.value?.clearSelection();
}
</script>
<style lang="scss" scoped></style>
