<template>
  <div class="posLeft">
    <card class="cardT" title="借阅统计">
      <div class="borrowAnalysis">
        <div class="borrowAnalysisItem">
          <div class="borrowAnalysisItemIn">
            <div class="icon"></div>
            <div class="info">
              <p class="in_label">累计借阅</p>
              <p class="in_value">{{ topData.totalCount || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="borrowAnalysisItem">
          <div class="borrowAnalysisItemIn">
            <div class="icon"></div>
            <div class="info">
              <p class="in_label">本月借阅</p>
              <p class="in_value">{{ topData.monthCount || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="borrowAnalysisItem">
          <div class="borrowAnalysisItemIn">
            <div class="icon"></div>
            <div class="info">
              <p class="in_label">逾期人数</p>
              <p class="in_value">{{ topData.expireUserCount || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="borrowAnalysisItem">
          <div class="borrowAnalysisItemIn">
            <div class="icon"></div>
            <div class="info">
              <p class="in_label">逾期次数</p>
              <p class="in_value">{{ topData.expireCount || 0 }}</p>
            </div>
          </div>
        </div>
      </div>
    </card>
    <card class="cardT" title="资料统计" :tips="centerData.tips">
      <div class="fileAnalysis">
        <div class="fileAnalysisItem" v-for="(item, index) in centerData.dataList">
          <div class="left">
            <div class="icon" :style="{ color: colors[index % 6] }"></div>
            <div class="label">{{ item.analysisName }}</div>
          </div>
          <div class="right">
            <div class="value">{{ item.analysisCount }}</div>
            <div class="unit">个</div>
          </div>
        </div>
      </div>
    </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="first" v-if="$index === 0"></div>
            <div class="second" v-else-if="$index === 1"></div>
            <div class="third" v-else-if="$index === 2"></div>
            <div v-else>{{ $index + 1 < 10 ? '0' + ($index + 1) : $index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="标签" prop="typeName" show-overflow-tooltip width="80" />
        <el-table-column label="数量" prop="count" show-overflow-tooltip width="60" />
        <el-table-column label="占比" prop="percent" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="proportion">
              <div class="proportionIn" :style="{ width: `${row.percent}%` }"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="percent" show-overflow-tooltip width="80">
          <template #default="{ row }">
            <span style="color: #37c4ff">{{ `${row.percent}%` }}</span>
          </template>
        </el-table-column>
      </el-table>
    </card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import card from './card.vue';
import { inheritAttr } from '@/utils/v3';
import {
  getDocumentSubjectBorrowAnalysis,
  getDocumentSubjectFileTypeAnalysis,
  getDocumentSubjectFileTagAnalysis,
} from '@/api/document/thematicMap';

const topData = reactive({
  expireCount: '',
  expireUserCount: '',
  monthCount: '',
  totalCount: '',
});

const centerData = reactive({
  totalNum: 0,
  dataList: [],
  tips: '',
});
const colors = ['#116BFF', '#FF5D5D', '#48E398', '#FFBE78', '#FFF373', '#DB7AFF'];

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

const getDocumentSubjectBorrowAnalysisFn = async () => {
  const res = await getDocumentSubjectBorrowAnalysis();
  if (res?.code !== 200) return;
  inheritAttr(res.data, topData);
};

const getDocumentSubjectFileTypeAnalysisFn = async () => {
  const res = await getDocumentSubjectFileTypeAnalysis();
  if (res?.code !== 200) return;
  inheritAttr(res.data, centerData);
  centerData.tips = `累计${centerData.totalNum}个`;
};

const getDocumentSubjectFileTagAnalysisFn = async () => {
  const res = await getDocumentSubjectFileTagAnalysis();
  if (res?.code !== 200) return;
  console.log(res.data);
  if (!Array.isArray(res.data)) return;
  footData.dataList = res.data;
  footData.totalNum = footData.dataList.reduce((pre, item) => (pre += item.count * 1), 0);
  footData.tips = `累计${footData.totalNum}个`;
};

onMounted(() => {
  getDocumentSubjectBorrowAnalysisFn();
  getDocumentSubjectFileTypeAnalysisFn();
  getDocumentSubjectFileTagAnalysisFn();
});
</script>

<style lang="scss" scoped>
.posLeft {
  height: 100%;
  .cardT {
    height: calc(33.33% - 10px);
    margin-top: 15px;
    &:nth-of-type(1) {
      margin-top: 0;
    }
  }
  .borrowAnalysis {
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    .borrowAnalysisItem {
      width: calc(50% - 5px);
      height: calc(50% - 5px);
      margin-top: 10px;
      margin-right: 10px;
      background: linear-gradient(0deg, rgba(33, 99, 174, 0.2) 0%, rgba(33, 99, 174, 0.1) 100%);
      border-radius: 4px;
      display: flex;
      justify-content: center;
      &:nth-of-type(1) {
        margin-top: 0;
        .icon {
          background: url('@/assets/images/document/thematicMap/month.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      &:nth-of-type(2) {
        margin-top: 0;
        margin-right: 0;
        .icon {
          background: url('@/assets/images/document/thematicMap/total.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      &:nth-of-type(3) {
        .icon {
          background: url('@/assets/images/document/thematicMap/people.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      &:nth-of-type(4) {
        margin-right: 0;
        .icon {
          background: url('@/assets/images/document/thematicMap/overdue.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      .borrowAnalysisItemIn {
        // width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        .icon {
          width: 34px;
          height: 34px;
          margin-right: 26px;
        }
        .info {
          p {
            margin: 0;
            &:first-of-type {
              font-size: 14px;
              color: #6093da;
            }
            &:last-of-type {
              margin-top: 12px;
              font-size: 24px;
              font-weight: bold;
              color: #cae0ff;
            }
          }
        }
      }
    }
  }
  .fileAnalysis {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    .fileAnalysisItem {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(50% - 5px);
      height: 60px;
      margin-right: 10px;
      color: #116bff;
      font-size: 14px;
      background: linear-gradient(0deg, rgba(33, 99, 174, 0.2) 0%, rgba(33, 99, 174, 0.1) 100%);
      border-radius: 4px;
      &:nth-of-type(2n) {
        margin-right: 0;
      }
      .left {
        display: flex;
        align-items: center;
        margin-right: 25px;
        .icon {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #116bff;
          margin-right: 6px;
        }
      }
      .right {
        display: flex;
        align-items: center;
        .value {
          color: #cae0ff;
          font-size: 20px;
          margin-right: 10px;
        }
      }
    }
  }
  .table {
    .first,
    .second,
    .third {
      width: 12px;
      height: 18px;
      margin: 0 auto;
    }
    .first {
      background: url('@/assets/images/document/thematicMap/first.png') no-repeat;
      background-size: 100% 100%;
    }
    .second {
      background: url('@/assets/images/document/thematicMap/second.png') no-repeat;
      background-size: 100% 100%;
    }
    .third {
      background: url('@/assets/images/document/thematicMap/third.png') no-repeat;
      background-size: 100% 100%;
    }
    .proportion {
      height: 8px;
      background: rgba(15, 105, 255, 0.1);
      .proportionIn {
        height: 100%;
        background: rgba(15, 105, 255);
      }
    }
  }
}
</style>