<!--
 * @Description: 今日作业情况统计
 * @Author: 王晓颖
 * @Date:2021-01-11 18:59:02
 -->
<template>
  <div class="chart-div">
    <div class="chart-child" style="flex:2;padding:5px;">
      <div class="block-div">
        <image-block :data="wasteCount" size="small" font-family="DS-DigitalBold">
          <svg-icon icon-class="icon-transfercar" class="device-icon"/>
        </image-block>
      </div>
      <div class="block-div">
        <image-block :data="cleanCount" size="small" font-family="DS-DigitalBold">
          <svg-icon icon-class="icon-route" class="device-icon"/>
        </image-block>
      </div>
      <div class="block-div">
        <image-block :data="toiletCleanCount" size="small" font-family="DS-DigitalBold">
          <svg-icon icon-class="icon-clean" class="device-icon"/>
        </image-block>
      </div>
      <div class="block-div">
        <image-block :data="staff" size="small" font-family="DS-DigitalBold">
          <svg-icon icon-class="icon-staff" class="device-icon"/>
        </image-block>
      </div>
    </div>
  </div>
</template>

<script>
import ImageBlock from '@/components/BigData/Block/imageBlock'
import { getToday, getYesterDay } from '@/utils/dateutils'
import { getTransferJobCount, getAttendancePercent, getToiletJobCount, getCleanJobCount } from '@/api/sanitation/statistics'
export default {
  name: 'JobStatistic',
  components: { ImageBlock },
  data() {
    return {
      color: '',
      commonParams: {
        type: 'day',
        startTime: getYesterDay('yyyy-MM-dd'), // 请求的昨天的数据
        endTime: getYesterDay('yyyy-MM-dd') // 请求的昨天的数据
      },
      wasteCount: {
        name: '垃圾转运作业次数', // 标题
        value: '--', // 数值
        unit: '次'
      },
      cleanCount: {
        name: '路面清扫作业次数', // 标题
        value: '--', // 数值
        unit: '次'
      },
      toiletCleanCount: {
        name: '公厕保洁作业次数', // 标题
        value: '--', // 数值
        unit: '次'
      },
      staff: {
        name: '出勤人数', // 标题
        value: '--', // 数值
        unit: '人'
      }
    }
  },
  created() {
    this.getWasteBinJobCount()
    this.fetchCleanJobCount()
    this.fetchToiletJobCount()
    this.fetchAttendance()
  },
  methods: {
    getWasteBinJobCount() {
      getTransferJobCount(this.commonParams).then(response => {
        if (response.data.length > 0) {
          this.wasteCount.value = response.data[0].count
        }
      })
    },
    fetchCleanJobCount() {
      getCleanJobCount(this.commonParams).then(response => {
        if (response.data.length > 0) {
          this.cleanCount.value = response.data[0].count
        }
      })
    },
    fetchToiletJobCount() {
      getToiletJobCount(this.commonParams).then(response => {
        if (response.data.length > 0) {
          this.toiletCleanCount.value = response.data[0].count
        }
      })
    },
    fetchAttendance() {
      getAttendancePercent(this.commonParams).then(response => {
        if (response.code === 200) {
          // this.staffCount.value = response.data.total
          this.staff.value = response.data[0].count
          // this.attendanceCount.attendancePercent = response.data.percent
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.chart-div{
  display: flex;
  height: 100%;
  width: 100%;
  /*flex-direction: column;*/
  justify-content: space-between;
  .chart-child{
    height: 100%;
    flex:1;
    display: flex;
    flex-wrap:wrap;
    .block-div{
      width:50%;
      height:50%;
      padding:3px;
      .device-icon{
        font-size:1.5rem;
        color: #1890ff
      }
    }
  }
}
</style>