<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"
        @sort-change="sortChange"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="{ isSelected, selectedListIds }">
          <el-button
            v-auth="['article:recycle:write']"
            type="success"
            :disabled="!isSelected"
            :icon="Delete"
            @click="deleteAction(selectedListIds)"
          >
            批量删除
          </el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button v-auth="['article:recycle:write']" type="primary" link :icon="Setting" @click="settingAction(scope.row)">
            设置
          </el-button>
          <el-button v-auth="['article:recycle:write']" type="primary" link :icon="Delete" @click="deleteAction([scope.row.id])">
            删除
          </el-button>
        </template>
      </ProTable>
    </div>
    <SettingDialog ref="dialogRef" />
  </div>
</template>
<script setup lang="ts" name="ClauseTrash">
import { ref, reactive } from "vue";
import { ClauseTrash, 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 { getClauseTrashList, deleteClauseTrash } from "@/api/modules/corpus/clause-trash";
import { Setting, Delete } from "@element-plus/icons-vue";
import SettingDialog from "./components/SettingDialog.vue";

// ProTable 实例
const dialogRef = ref<null | typeof SettingDialog>();
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
  sortBy: ""
});
// 表格配置项
const columns = reactive<ColumnProps<Clause.ClauseInfo>[]>([
  { type: "selection", width: 50 },
  { prop: "articleContent", label: "条文内容", align: "left" },
  { prop: "diseaseName", label: "所属疾病" },
  { prop: "bookName", label: "书名" },
  { prop: "chapter", label: "卷篇" },
  { prop: "author", label: "作者" },
  {
    prop: "dynastySort",
    label: "朝代",
    render: scope =>
      scope.row.endDynastySort && scope.row.startDynastySort !== scope.row.endDynastySort
        ? `${scope.row.startDynastyName}~${scope.row.endDynastyName}`
        : scope.row.startDynastyName || "--"
  },
  {
    prop: "publicationDate",
    label: "成书年代",
    render: ({ row }) =>
      row.publicationDate < 0
        ? `公元前${-row.publicationDate}`
        : `${typeof row.publicationDate === "number" ? row.publicationDate : "--"}`
  },
  { prop: "styleId", label: "体裁", enum: StyleId.getAllEnumValues() },
  { prop: "version", label: "版本信息" },
  { prop: "delTime", label: "删除时间", sortable: "custom" },
  { prop: "operation", label: "操作", width: 240, fixed: "right" }
]);
// 分页列表获取数据
const getTableList = (params: ClauseTrash.ReqClauseTrashParams) => {
  return getClauseTrashList(params);
};

// 删除
const deleteAction = async (ids: number[]) => {
  await useHandleData(deleteClauseTrash, { articleIds: ids }, `是否删除当前${ids.length}条数据，删除后条文彻底从系统中删除`);
  proTable.value?.getTableList();
};

//  设置
function settingAction(row: Clause.ClauseInfo) {
  dialogRef.value?.open({ id: row.id, publicationDate: row.publicationDate }).then(() => {
    proTable.value?.getTableList();
  });
}

// 排序
function sortChange({ prop, order }: any) {
  initParam.sortBy = order ? `${prop} ${order.replace("ending", "")}` : "";
  console.log("排序", initParam.sortBy);
}
</script>
<style lang="scss" scoped></style>
