<template>
  <div class="main-box">
    <PageToolbar class="mt1 mb10" />
    <div class="view-box scroll-y">
      <div class="card">
        <div class="title mb10">
          SJ{{ clauseInfo.firstArticleNo }} {{ dayjs(clauseInfo.annotationSubmitTime).format("YYYY-MM-DD") }}
        </div>
        <ClauseInfo :info="clauseInfo" />
      </div>
      <el-divider />
      <div class="table-box" :style="{ height: sortRelatedList.length === 0 ? '300px' : 'auto' }">
        <ProTable
          row-key="id"
          :tool-button="false"
          :columns="columns"
          :data="sortRelatedList"
          :pagination="false"
          @sort-change="sortChange"
        >
          <!-- 表格 header -->
          <template #tableHeader>
            <yx-title class="mb10">相关条文</yx-title>
          </template>
          <!-- 表格操作 -->
          <template #operation="scope">
            <el-button v-auth="['system:post:remove']" type="primary" link :icon="View" @click="viewAction(scope.row)">
              详情
            </el-button>
          </template>
        </ProTable>
      </div>
    </div>
    <ClauseDialog ref="dialogRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { View } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
import { usePageLeave } from "@/hooks/usePageLeave";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Clause } from "@/api/interface";
import { getFirstClauseDetail, getRelateClauseList } from "@/api/modules/corpus/first-clause";
import ClauseDialog from "./components/ClauseDialog.vue";
import ClauseInfo from "./components/ClauseInfo.vue";

// hooks
usePageLeave("Retrieval");
const route = useRoute();

// ref
const dialogRef = ref<null | typeof ClauseDialog>(null);
const sortBy = ref<{ prop: string; order: null | "descending" | "aecending" }>({ prop: "", order: null });
const relatedList = ref<Clause.ClauseInfo[]>([]);
const clauseInfo = ref({} as Clause.ClauseInfo);

// 相关条文
const sortRelatedList = computed<Clause.ClauseInfo[]>(() => {
  const result = [...relatedList.value];

  const { prop, order } = sortBy.value;
  if (!order) return result;
  // 成书年代
  if (prop === "publicationDate") {
    // 降序
    if (order === "descending") {
      return result.sort((a, b) => {
        if (typeof a.publicationDate !== "number") {
          return 1;
        }
        if (typeof b.publicationDate !== "number") {
          return -1;
        }
        return b.publicationDate - a.publicationDate;
      });
    } else {
      // 生序
      return result.sort((a, b) => {
        if (typeof a.publicationDate !== "number") {
          return 1;
        }
        if (typeof b.publicationDate !== "number") {
          return -1;
        }
        return a.publicationDate - b.publicationDate;
      });
    }
  } else if (prop === "similarityValue") {
    // 相似度
    if (order === "descending") {
      return result.sort((a: any, b: any) => b.similarityValue - a.similarityValue);
    } else {
      return result.sort((a: any, b: any) => a.similarityValue - b.similarityValue);
    }
  }
  return result;
});
// 条文内容、所属疾病、书名、卷篇、作者、朝代、成书年代、体裁、版本信息
const columns = computed<ColumnProps<Clause.ClauseInfo>[]>(() => {
  return [
    { type: "index", label: "序号", width: 80 },
    { prop: "articleContent", label: "条文内容" },
    { prop: "bookName", label: "书名" },
    { prop: "chapter", label: "卷篇" },
    { prop: "author", label: "作者" },
    {
      prop: "dynastyName",
      label: "朝代",
      render: scope =>
        scope.row.endDynastySort && scope.row.startDynastySort !== scope.row.endDynastySort
          ? `${scope.row.startDynastyName}~${scope.row.endDynastyName}`
          : scope.row.startDynastyName || "--"
    },
    {
      prop: "similarityValue",
      label: "相似度",
      sortable: "custom",
      render: ({ row }) => (row.similarityValue || row.similarityValue === 0 ? `${row.similarityValue}%` : "--")
    },
    {
      prop: "publicationDate",
      label: "成书年代",
      sortable: "custom",
      render: ({ row }) =>
        row.publicationDate < 0
          ? `公元前${-row.publicationDate}`
          : `${typeof row.publicationDate === "number" ? row.publicationDate : "--"}`
    },
    { prop: "version", label: "版本信息" },
    { prop: "operation", label: "操作", width: 180, fixed: "right" }
  ];
});

// 获取详情
async function loadDetail() {
  const res = await getFirstClauseDetail({ id: Number(route.query.id) });
  clauseInfo.value = res.data;
}

loadDetail();

// 获取相关列表数据
async function getTableList() {
  const res = await getRelateClauseList({ id: Number(route.query.id) });
  relatedList.value = res.data || [];
}
getTableList();

// 编辑
function viewAction(row: Clause.ClauseInfo) {
  dialogRef.value?.open(row);
}

// 排序
function sortChange({ prop, order }: any) {
  sortBy.value = { prop, order };
}
</script>

<style lang="scss" scoped>
.main-box {
  padding: 0;
  padding-bottom: 10px;
  .view-box {
    flex: 1;
    padding: 0 10px;
    .card {
      width: 100%;
    }
  }
  .title {
    font-size: 16px;
    color: #228fff;
  }
}
</style>
