<template>
  <div class="data-panel">
    <div class="sub-data-block first-block">
      <div class="subTitle">
        <span v-text="counts.labelText"/>采集量（人）
      </div>

      <div class="statisBlock">
        <span class="bigSize" v-text="counts.collect"/>
      </div>

      <div class="statisBlockCompare">
        同比去年<span :class="collectGrowthYear?'positiveGrowth':'negativeGrowth'" v-text="comp.collectLastYear" />
      </div>
      <div class="statisBlockCompare">
        环比上月<span :class="collectGrowthMonth?'positiveGrowth':'negativeGrowth'" v-text="comp.collectLastMonth" />
      </div>
    </div>

    <div class="sub-data-block">
      <div class="subTitle">
        <span v-text="counts.labelText"/>识别量（人）
      </div>

      <div class="statisBlock">
        <span class="bigSize" v-text="counts.check"/>
      </div>

      <div class="statisBlockCompare">
        同比去年<span :class="checkGrowthYear?'positiveGrowth':'negativeGrowth'" v-text="comp.checkLastYear" />
      </div>
      <div class="statisBlockCompare">
        环比上月<span :class="checkGrowthMonth?'positiveGrowth':'negativeGrowth'" v-text="comp.checkLastMonth" />
      </div>
    </div>

    <div class="sub-data-block">
      <div class="subTitle">
        <span v-text="counts.labelText"/>虹膜入库量（人）
      </div>

      <div class="statisBlock">
        <span class="bigSize" v-text="counts.regist"/>
      </div>

      <div class="statisBlockCompare">
        同比去年<span :class="registGrowthYear?'positiveGrowth':'negativeGrowth'" v-text="comp.registLastYear" />
      </div>
      <div class="statisBlockCompare">
        环比上月<span :class="registGrowthMonth?'positiveGrowth':'negativeGrowth'" v-text="comp.registLastMonth" />
      </div>
    </div>

    <div class="sub-data-block">
      <div class="subTitle">
        <span v-text="counts.labelText"/>报警量（人）
      </div>

      <div class="statisBlock" style="margin-top: 50px;">
        采集报警量：<span class="middleSize" v-text="counts.collectAlarm"/>
      </div>
      <div class="statisBlock">
        识别报警量：<span class="middleSize" v-text="counts.checkAlarm"/>
      </div>
    </div>

    <div class="sub-data-block last-block">
      <div class="subTitle">
        <span v-text="counts.labelText"/>报警量占比
      </div>

      <div class="statisBlock" style="margin-top: 50px;">
        采集报警占比：<span class="middleSize" v-text="comp.collectAlarmRate"/>
      </div>
      <div class="statisBlock">
        识别报警占比：<span class="middleSize" v-text="comp.checkAlarmRate"/>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { formatToString, format, getLastMonth, getLastMonthDate } from '@/utils/calendarUtil'
export default {
  name: 'DataPanel',
  data() {
    return {
      dateShortcuts: {
        today: '', // 今日日期字符串
        thisMonth: '', // 本月月初字符串
        lastMonthStart: '', // 上月月初字符串
        lastMonth: '', // 上月今日字符串
        lastYearMonthStart: '', // 上年同期月初字符串
        lastYearMonth: '' // 上年同期字符串
      },
      counts: {
        labelText: '本月',
        collect: 0, // 本期采集人数
        check: 0, // 本期识别人数
        regist: 0, // 本期虹膜入库人数
        collectAlarm: 0, // 本期采集报警数
        checkAlarm: 0 // 本期识别报警数
      },
      comp: {
        collectLastYear: '12%', // 采集量同比
        collectLastMonth: '-16%', // 采集量环比
        checkLastYear: '12%', // 识别量同比
        checkLastMonth: '-16%', // 识别量环比
        registLastYear: '12%', // 入库量同比
        registLastMonth: '-16%', // 入库量环比
        collectAlarmRate: '11.6%', // 采集报警占比
        checkAlarmRate: '5.1%' // 识别报警占比
      },
      collectGrowthYear: '',
      collectGrowthMonth: '',
      checkGrowthYear: '',
      checkGrowthMonth: '',
      registGrowthYear: '',
      registGrowthMonth: ''
    }
  },
  mounted() {
    this.initDateShortcuts()
  },
  methods: {
    // 初始化查询的日期
    initDateShortcuts() {
      const now = new Date()
      const lastYear = now.getFullYear() - 1
      const thisMonth = now.getMonth() + 1
      let lastMonth = now.getMonth()
      if (lastMonth === 0) {
        lastMonth = 12
      }

      this.dateShortcuts.today = formatToString(now, 'DATE') // 今日
      this.dateShortcuts.thisMonth = formatToString(now, 'MONTH') + '-01' // 月初

      this.dateShortcuts.lastMonthStart = getLastMonth() + '-01' // 上月初
      this.dateShortcuts.lastMonth = getLastMonthDate() // 上月同期

      this.dateShortcuts.lastYearMonthStart = lastYear + '-' + format(thisMonth) + '-01' // 上年同期月初
      this.dateShortcuts.lastYearMonth = this.dateShortcuts.lastYearMonthStart.substring(0, 8) + this.dateShortcuts.today.substring(8, 10)

      // 初始化日期之后查询当月数据
      this.queryDataThisMonth()
    },
    // 查询本月数据
    queryDataThisMonth() {
      const that = this
      request({
        url: '/bigScreen/getMonthAnalysis',
        method: 'post',
        params: {
          startDate: this.dateShortcuts.thisMonth,
          endDate: this.dateShortcuts.today
        }
      }).then(response => {
        if (response.code === 200) {
          that.counts.collect = response.data.colCount
          that.counts.check = response.data.recCount
          that.counts.regist = response.data.colSaveCount
          that.counts.collectAlarm = response.data.colAlarmCount
          that.counts.checkAlarm = response.data.recAlarmCount

          if (that.counts.collect === 0) {
            that.comp.collectAlarmRate = '0.0%'
          } else {
            that.comp.collectAlarmRate = ((that.counts.collectAlarm / that.counts.collect) * 100).toFixed(1) + '%'
          }
          if (that.counts.check === 0) {
            that.comp.checkAlarmRate = '0.0%'
          } else {
            that.comp.checkAlarmRate = ((that.counts.checkAlarm / that.counts.check) * 100).toFixed(1) + '%'
          }

          // 查询上月和上年数据
          that.queryDataLastMonth()
          that.queryDataLastYearMonth()
        }
      })
    },
    // 查询上月数据
    queryDataLastMonth() {
      const that = this
      request({
        url: '/bigScreen/getMonthAnalysis',
        method: 'post',
        params: {
          startDate: this.dateShortcuts.lastMonthStart,
          endDate: this.dateShortcuts.lastMonth
        }
      }).then(response => {
        if (response.code === 200) {
          // 上月数据
          const lastCollect = response.data.colCount
          const lastCheck = response.data.recCount
          const lastRegist = response.data.colSaveCount

          // 计算环比数据
          that.collectGrowthMonth = that.counts.collect - lastCollect >= 0
          if (lastCollect === 0) {
            that.comp.collectLastMonth = '+∞'
          } else {
            that.comp.collectLastMonth = ((that.counts.collect - lastCollect) / lastCollect * 100).toFixed(2) + '%'
          }

          that.checkGrowthMonth = that.counts.check - lastCheck >= 0
          if (lastCheck === 0) {
            that.comp.checkLastMonth = '+∞'
          } else {
            that.comp.checkLastMonth = ((that.counts.check - lastCheck) / lastCheck * 100).toFixed(2) + '%'
          }

          that.registGrowthMonth = that.counts.regist - lastRegist >= 0
          if (lastRegist === 0) {
            that.comp.registLastMonth = '+∞'
          } else {
            that.comp.registLastMonth = ((that.counts.regist - lastRegist) / lastRegist * 100).toFixed(2) + '%'
          }
        }
      })
    },
    // 查询去年同期数据
    queryDataLastYearMonth() {
      const that = this
      request({
        url: '/bigScreen/getMonthAnalysis',
        method: 'post',
        params: {
          startDate: this.dateShortcuts.lastYearMonthStart,
          endDate: this.dateShortcuts.lastYearMonth
        }
      }).then(response => {
        if (response.code === 200) {
          // 上年同期数据
          const lastCollect = response.data.colCount
          const lastCheck = response.data.recCount
          const lastRegist = response.data.colSaveCount

          // 计算同比数据
          that.collectGrowthYear = that.counts.collect - lastCollect >= 0
          if (lastCollect === 0) {
            that.comp.collectLastYear = '+∞'
          } else {
            that.comp.collectLastYear = ((that.counts.collect - lastCollect) / lastCollect * 100).toFixed(2) + '%'
          }

          that.checkGrowthYear = that.counts.check - lastCheck >= 0
          if (lastCheck === 0) {
            that.comp.checkLastYear = '+∞'
          } else {
            that.comp.checkLastYear = ((that.counts.check - lastCheck) / lastCheck * 100).toFixed(2) + '%'
          }

          that.registGrowthYear = that.counts.regist - lastRegist >= 0
          if (lastRegist === 0) {
            that.comp.registLastYear = '+∞'
          } else {
            that.comp.registLastYear = ((that.counts.regist - lastRegist) / lastRegist * 100).toFixed(2) + '%'
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  .data-panel {
    height: 320px;
  }

  .sub-data-block {
    width: calc((100vw - 120px) / 5);
    height: 300px;
    border: 2px solid #3370E3;
    background-color: rgba(41, 85, 252, 0.2);
    float: left;
    margin: 20px 10px 0px 10px;
  }
  .first-block {
    margin-left: 20px;
  }
  .last-block {
    margin-right: 20px;
  }

  .subTitle {
    font-weight: bold;
    font-family: '微软雅黑',serif;
    color: #fff;
    font-size: 24px;
    padding: 10px 10px 10px 30px;
    background: url("images/sub-title-background.png") no-repeat;
  }

  .statisBlock {
    text-align: center;
    margin: 30px 10px 10px 10px;
    padding: 10px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 24px;
  }

  .bigSize {
    font-size: 72px;
  }

  .middleSize {
    font-size: 36px;
  }

  .statisBlockCompare {
    text-align: left;
    margin: 10px 10px 10px 30px;
    padding: 5px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 24px;
  }

  .positiveGrowth {
    color: #00ff00;
    padding-left: 20px;
    font-size: 30px;
  }
  .negativeGrowth {
    color: #ff0000;
    padding-left: 20px;
    font-size: 30px;
  }

  @media(max-width: 1440px) {
    .data-panel {
      height: 285px;
    }

    .sub-data-block {
      width: calc((100vw - 108px) / 5);
      margin: 15px 9px 0px 9px;
      height: 270px;
    }
    .first-block {
      margin-left: 18px;
    }
    .last-block {
      margin-right: 18px;
    }

    .subTitle {
      font-size: 20px;
      padding: 9px 9px 9px 24px;
    }

    .statisBlock {
      margin: 24px 9px 9px 9px;
      padding: 9px 0px;
      font-size: 20px;
    }

    .bigSize {
      font-size: 64px;
    }

    .middleSize {
      font-size: 27px;
    }

    .statisBlockCompare {
      margin: 9px 9px 9px 27px;
      padding: 4px;
      font-size: 21px;
    }

    .positiveGrowth {
      padding-left: 15px;
      font-size: 27px;
    }
    .negativeGrowth {
      padding-left: 15px;
      font-size: 27px;
    }
  }

  @media(max-width: 1366px) {
    .data-panel {
      height: 225px;
    }

    .sub-data-block {
      width: calc((100vw - 96px) / 5);
      margin: 12px 8px 0px 8px; /* top right bottom left */
      height: 210px;
    }
    .first-block {
      margin-left: 16px;
    }
    .last-block {
      margin-right: 16px;
    }

    .subTitle {
      font-size: 16px;
      padding: 8px 8px 8px 20px;
    }

    .statisBlock {
      margin: 21px 8px 8px 8px;
      padding: 4px 0px;
      font-size: 16px;
    }

    .bigSize {
      font-size: 48px;
    }

    .middleSize {
      font-size: 28px;
    }

    .statisBlockCompare {
      margin: 8px 8px 8px 24px;
      padding: 4px 0px;
      font-size: 15px;
    }

    .positiveGrowth {
      padding-left: 10px;
      font-size: 20px;
    }
    .negativeGrowth {
      padding-left: 10px;
      font-size: 20px;
    }
  }
</style>