<template>
  <div class="posRight">
    <card class="cardO" title="阅读统计" :tips="topData.tips">
      <top :echart-data="topData.data" v-if="topData.show" />
    </card>
    <card class="cardT" title="资料分类" :tips="footData.tips">
      <el-table ref="table" :data="footData.dataList" style="height: 100%" class="table">
        <el-table-column width="55" label="排名">
          <template #default="{ row, $index }">
            <div :class="{ border: $index < 3 }">{{ $index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" prop="analysisName" show-overflow-tooltip />
        <el-table-column label="文件数量" prop="analysisCount" show-overflow-tooltip />
        <el-table-column label="所属大类" prop="parentTypeName" show-overflow-tooltip />
        <el-table-column label="占比" prop="percent" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ row.percent ? row.percent + '%' : '' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { inheritAttr } from '@/utils/v3';
import { getDocumentSubjectFileReadAnalysis, getDocumentSubjectFileSecondTypeAnalysis } from '@/api/document/thematicMap';
import card from './card.vue';
import top from './echart/right/top.vue';
const topData = reactive({
  data: {
    typeNames: [],
    counts: [],
  },
  totalNum: 0,
  tips: '',
  show: false,
});

const footData = reactive({
  totalNum: 0,
  dataList: [],
  tips: '',
});

const getDocumentSubjectFileReadAnalysisFn = async () => {
  const res = await getDocumentSubjectFileReadAnalysis();
  if (res?.code !== 200) return;
  console.log(res.data);
  inheritAttr(res.data, topData.data);
  topData.totalNum = topData.data.counts.reduce((pre, item) => (pre += item * 1), 0);
  topData.tips = `累计${topData.totalNum}次`;
  topData.show = true;
};

const getDocumentSubjectFileSecondTypeAnalysisFn = async () => {
  const res = await getDocumentSubjectFileSecondTypeAnalysis();
  if (res?.code !== 200) return;
  console.log(res.data);
  inheritAttr(res.data, footData);
  footData.tips = `累计${footData.totalNum}个`;
};

onMounted(() => {
  getDocumentSubjectFileReadAnalysisFn();
  getDocumentSubjectFileSecondTypeAnalysisFn();
});
</script>

<style lang="scss" scoped>
.posRight {
  height: 100%;
  .cardO {
    height: calc(33.33% - 10px);
  }
  .cardT {
    margin-top: 15px;
    height: calc(66.66% - 5px);
  }
  .border {
    border: 1px solid rgba(21, 154, 254, 1);
  }
}
</style>