<template>
  <div class="main-box">
    <div class="class-book">
      <div>书目分类</div>
      <TreeFilter
        ref="treeFilterRef"
        :request-api="getUserDepartment"
        :default-value="initParam.deptId"
        @change="changeTreeFilter"
        :operate="true"
      />
    </div>
    <div class="table-box">
      <div>书目</div>
      <ProTable ref="proTable" :columns="columns" :data="getTableList" :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }">
        <!-- 表格 header 按钮 -->
        <template #tableHeaderRight>
          <el-button :icon="Rank" plain> 转移分类</el-button>
          <el-button type="primary" :icon="Upload"> 导入分类 </el-button>
          <el-button plain @click="openDialog()"> 添加分类</el-button>
          <el-button type="primary" :icon="Upload"> 导入书目 </el-button>
          <el-button type="primary" :icon="Upload"> 导入原文 </el-button>
          <el-button plain @click="viewAction('')"> 添加书目</el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link> 详情 </el-button>
          <el-button type="primary" link :icon="EditPen" @click="viewAction(scope.row)"> 编辑 </el-button>
          <el-button type="primary" link :icon="Delete"> 删除 </el-button>
        </template>
      </ProTable>
      <ClassifyDialog ref="dialogRef"></ClassifyDialog>
      <BookListDialog ref="dialogRefBookList"></BookListDialog>
    </div>
  </div>
</template>
<script setup lang="ts" name="BookListManage">
import { ref, reactive } from "vue";
import { getUserDepartment } from "@/api/modules/system/user";
import TreeFilter from "@/components/TreeFilter/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, Rank, Upload } from "@element-plus/icons-vue";
import ClassifyDialog from "./components/ClassifyDialog.vue";
import BookListDialog from "./components/BookListDialog.vue";
import { useRouter } from "vue-router";

const initParam = reactive({ deptId: "" });
// 树形筛选切换
const changeTreeFilter = (val: string) => {
  // proTable.value!.pageable.pageNum = 1;
  initParam.deptId = val;
};
// ref
const proTable = ref<ProTableInstance>();
const router = useRouter();

const columns = reactive<ColumnProps[]>([
  { prop: "semanticsName", label: "书名", search: { el: "input" } },
  { prop: "semanticsName", label: "作者" },
  { prop: "semanticsName", label: "朝代" },
  { prop: "semanticsName", label: "提要" },
  { prop: "updateTime", label: "更新时间" },
  { prop: "updatePerson", label: "更新人" },
  { prop: "operation", label: "操作", width: 330, fixed: "right" }
]);
// 分页列表获取数据
let getTableList = [
  {
    id: 1,
    semanticsId: "111222",
    semanticsName: "爱月庐医案-爱月庐医案爱月庐医案-爱月庐医案爱月庐医案-爱月庐医案爱月庐医案爱月庐医案",
    updateTime: "2024-10-01 12:02:03",
    updatePerson: "更新人",
    dataSources: "数据来源",
    notes: "备注"
  }
];
// 打开 drawer(新增、查看、编辑)
const dialogRef = ref<InstanceType<typeof ClassifyDialog> | null>(null);
const openDialog = () => {
  dialogRef.value?.open().then(proTable.value?.getTableList);
};
const DETAIL_PAGE_ROUTE = "BooksDetail";

// 详情
function viewAction(row) {
  router.push({
    name: DETAIL_PAGE_ROUTE,
    query: {
      id: row.id
    }
  });
}
// 打开 drawer
// const dialogRefBookList = ref<InstanceType<typeof BookListDialog> | null>(null);
// const openDialogBookList = () => {
//   dialogRefBookList.value?.open().then(proTable.value?.getTableList);
// };
</script>
<style lang="scss" scoped>
.main-box {
  flex-direction: row;
  .class-book {
    flex: 1;
  }
  .table-box {
    flex: 3;
  }
}
</style>
