<template>
  <div class="posCenter">
    <card class="cardO" title="资料增量" :tips="topData.tips">
      <top :echart-data="topData.data" v-if="topData.show" />
    </card>
    <card class="cardT" title="借阅统计">
      <div class="wrapper">
        <div class="types">
          <div class="typeItem">
            <div class="typeText">申请</div>
            <div class="label">累计申请</div>
            <div class="value">{{ centerData.data.applyTotal }}</div>
          </div>
          <div class="typeItem">
            <div class="typeText">借阅中</div>
            <div class="label">累计借阅中</div>
            <div class="value">{{ centerData.data.readTotal }}</div>
          </div>
          <div class="typeItem">
            <div class="typeText">归还</div>
            <div class="label">累计归还</div>
            <div class="value">{{ centerData.data.returnedTotal }}</div>
          </div>
        </div>
        <div class="type_chart">
          <typeChart :echart-data="centerData.data" v-if="centerData.show" />
        </div>
        <div class="autoScrollTableWrapper" ref="autoScrollTableWrapperRef">
          <autoScrollTable :table-data="footData.data" v-if="footData.show" />
        </div>
      </div>
    </card>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeUnmount, nextTick } from 'vue'
import card from './card.vue'
import { inheritAttr } from '@/utils/v3'
import createResizeObserver from '@/utils/resizeObserver'
import {
  getDocumentSubjectFileAddAnalysis,
  getDocumentSubjectBorrowDetailAnalysis,
  getDocumentSubjectOperateLog
} from '@/api/document/thematicMap'
import top from './echart/center/top.vue'
import typeChart from './echart/center/typeChart.vue'
import autoScrollTable from './echart/center/autoScrollTable.vue'
const { proxy } = getCurrentInstance()
const topData = reactive({
  data: {
    archiveAddNums: [],
    archiveAddTotal: 0,
    fileAddNums: [],
    fileAddTotal: 0,
    readAddNums: [],
    readAddTotal: [],
    timeList: []
  },
  tips: '',
  show: false
})
const centerData = reactive({
  data: {
    applyNums: [],
    applyTotal: 0,
    readNums: [],
    readTotal: 0,
    returnedNums: [],
    returnedTotal: 0,
    timeList: []
  },
  show: false
})
const footData = reactive({
  data: [],
  show: false
})
let unobserve = null

const getDocumentSubjectFileAddAnalysisFn = async () => {
  const res = await getDocumentSubjectFileAddAnalysis()
  if(res?.code !== 200) return
  inheritAttr(res.data, topData.data)
  topData.tips = `累计${res.data.fileAddTotal || 0}个`
  topData.show = true
}

const getDocumentSubjectBorrowDetailAnalysisFn = async () => {
  const res = await getDocumentSubjectBorrowDetailAnalysis()
  if(res?.code !== 200) return
  inheritAttr(res.data, centerData.data)
  centerData.show = true
}

const getDocumentSubjectOperateLogFn = async () => {
  const res = await getDocumentSubjectOperateLog()
  if(res?.code !== 200) return
  footData.data = res.data || []
  footData.show = true
}

onMounted(() => {
  getDocumentSubjectFileAddAnalysisFn()
  getDocumentSubjectBorrowDetailAnalysisFn()
  getDocumentSubjectOperateLogFn()
  //监听盒子大小变化重载组件
  unobserve = createResizeObserver(proxy.$refs.autoScrollTableWrapperRef, () => {
    footData.show = false
    nextTick(() => {
      footData.show = true
    })
  })
})

onBeforeUnmount(() => {
  //取消监听
  unobserve()
})
</script>

<style lang="scss" scoped>
.posCenter {
  height: 100%;
  .cardO {
    height: calc(33.33% - 10px);
  }
  .cardT {
    margin-top: 15px;
    height: calc(66.66% - 5px)
  }
  .wrapper {
    height: 100%;
    .types {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      .typeItem {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        margin: 0 10px;
        &:nth-of-type(1) {
          background: url('@/assets/images/document/thematicMap/apply.png') no-repeat;
          background-size: 100% 100%;
          .typeText {
            color: #FFB643;
          }
        }
        &:nth-of-type(2) {
          background: url('@/assets/images/document/thematicMap/borrow.png') no-repeat;
          background-size: 100% 100%;
          .typeText {
            color: #FF4040;
          }
        }
        &:nth-of-type(3) {
          background: url('@/assets/images/document/thematicMap/give_back.png') no-repeat;
          background-size: 100% 100%;
          .typeText {
            color: #41D356;
          }
        }
        .typeText {
          font-size: 16px;
          font-weight: 700;
        }
        .label {
          font-size: 12px;
          margin: 0 10px;
        }
        .value {
          font-size: 18px;
          font-weight: 700;
        }
      }
    }
    .type_chart {
      margin-top: 20px;
      height: 174px;
    }
    .autoScrollTableWrapper {
      margin-top: 20px;
      height: calc(100% - 254px);
    }
  }
}

</style>