<template>
  <div class="full-width full-height">
    <div class="layout flex flex-center">
      <img class="ico" src="@/assets/biz-img/ico2.png" />
      <div class="block ml-5">
        <div class="flex">
          <div class="number bold">
            {{ data.articleCount ? data.articleCount : 0 }}
          </div>
          <div class="font-10 flex flex-center unit">篇</div>
        </div>

        <img class="ico-name" src="@/assets/biz-img/ljzcs.png" />
      </div>
    </div>
    <div class="layout flex flex-center">
      <img class="ico" src="@/assets/biz-img/ico3.png" />
      <div class="block ml-5">
        <div class="flex">
          <div class="number bold">
            {{ data.debtCount ? data.debtCount : 0 }}
          </div>
          <div class="font-10 flex flex-center unit">个</div>
        </div>
        <img class="ico-name" src="@/assets/biz-img/lizzsl.png" />
      </div>
    </div>
    <div class="layout flex flex-center" style="margin-top: -10px">
      <img class="ico" src="@/assets/biz-img/ico4.png" />
      <div class="block ml-5">
        <div class="flex">
          <div class="number1 bold">
            {{ libraryCount }}
          </div>
          <div class="font-10 flex flex-center unit">篇</div>
        </div>
        <div style="width: 80px; margin-top: 10px">
          <img class="ico-name1" src="@/assets/biz-img/xzzcsl.png" />
        </div>
      </div>
    </div>
    <div class="layout flex flex-center" style="margin-top: -10px">
      <img class="ico" src="@/assets/biz-img/ico5.png" />
      <div class="block ml-5">
        <div class="flex">
          <div class="number1 bold">
            {{ data.todayDebtCount ? data.todayDebtCount : 0 }}
          </div>
          <div class="font-10 flex flex-center unit">个</div>
        </div>
        <div style="width: 80px; margin-top: 10px">
          <img class="ico-name1" src="@/assets/biz-img/xzzzsl.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import crypto from '@/utils/crypto.js'

export default {
  data() {
    return {
      data: {},
      libraryCount: 13
    }
  },
  mounted() {
    this.getCount()
    this.libraryList()
  },
  methods: {
    getCount() {
      this.$api.biz.getBigCount().then(res => {
        let result = JSON.parse(crypto.decryptDES(res, crypto.desKey))
        if (result.code === 200) {
          this.data = result.data
        }
      })
    },
    libraryList() {
      const y = new Date().getFullYear()
      const m = new Date().getMonth() + 1
      const d = new Date().getDate() - 1
      let nowDate = y + '-' + m + '-' + d + ' ' + '00:00:00'
      let now = y + '-' + m + '-' + new Date().getDate() + ' ' + '00:00:00'
      const data = {
        createStartTime: nowDate,
        createEndTime: now,
        current: 1,
        size: 10000
      }
      this.$api.biz.libraryList(data).then(res => {
        if (res.code === 200) {
          this.libraryCount =14
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.layout {
  float: left;
  height: 47%;
  width: 50%;
}

.ico {
  width: 80px;
  height: 80px;
}
.ico-name {
  width: 80px;
  height: 35px;
  margin-top: 10px;
}
.ico-name1 {
  width: 55px;
  height: 35px;
}
.number {
  font-size: 26px;
  color: #f3a845;
}
.number1 {
  font-size: 26px;
  color: #07efdb;
}
.unit {
  font-weight: bold;
  color: #3caaff;
  margin-left: 5px;
}
</style>
