<template>
  <div class="knowledge-collect-container layout-pd">
    <el-card shadow="never">
      <el-form :model="state.queryParams" ref="ruleFormRef" :inline="true" @submit.native.prevent>
        <el-form-item label="关键词" prop="Keyword">
          <el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="queryList" style="width: 250px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
          <el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <!-- 表格 -->
      <el-table :data="state.tableData" v-loading="state.loading">
        <el-table-column prop="knowledge.title" label="知识标题" show-overflow-tooltip></el-table-column>
        <el-table-column prop="knowledgeTypeText" label="知识分类" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="knowledge.statusText" label="知识状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="score" label="知识评分" show-overflow-tooltip></el-table-column>
        <el-table-column prop="creatorName" label="收藏人" show-overflow-tooltip></el-table-column>
        <el-table-column  label="收藏时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" fixed="right" align="center">
          <template #default="{ row }">
            <el-button link type="primary" @click="onPreview(row)" v-auth="'knowledge:index:preview'" title="知识详情"> 知识详情 </el-button>
          </template>
        </el-table-column>
        <template #empty>
          <Empty />
        </template>
      </el-table>
      <!-- 分页 -->
      <pagination
          :total="state.total"
          v-model:page="state.queryParams.PageIndex"
          v-model:limit="state.queryParams.PageSize"
          @pagination="queryList"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup name="knowledgeCollect">
import {onMounted, reactive, ref} from 'vue';
import {ElMessage, FormInstance} from 'element-plus';
import {formatDate} from '/@/utils/formatTime';
import {auth} from '/@/utils/authFunction';
import {useRouter} from "vue-router";
import {collectList} from '/@/api/knowledge/collect';

// 定义变量内容
const state = reactive<any>({
  loading: false, // 加载状态
  queryParams: {
    // 查询参数
    PageIndex: 1,
    PageSize: 10,
    Keyword: null, // 知识分类
  },
  total: 0, // 总条数
  tableData: [], // 表格数据
  typeData: [], // 知识分类
});
const ruleFormRef = ref<RefType>(null); // 表单ref
// 获取参数列表
const queryList = () => {
  state.loading = true;
  if (!auth('knowledge:collect:query')) ElMessage.error('抱歉，您没有权限获取知识收藏列表！');
  else {
    collectList(state.queryParams)
        .then((res) => {
          state.loading = false;
          state.tableData = res.result.items ?? [];
          state.total = res.result.total ?? 0;
        })
        .finally(() => {
          state.loading = false;
        });
  }
};
// 重置表单
const resetQuery = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  queryList();
};
// 知识详情
const router = useRouter();
const onPreview = (row: any) => {
  router.push({
    name: 'knowledgePreview',
    params: {
      id: row.knowledgeId,
      tagsViewName: '知识详情',
    },
  });
};

// 页面加载时
onMounted(() => {
  queryList();
});
</script>
