<!--
 * @Description: 人员管理统计
 * @Author: 王晓颖
 * @Date:2021-01-12 09:46:35
 -->
<template>
  <div class="chart-div">
    <div class="chart-child" style="flex:2;padding:5px;">
      <div class="block-div">
        <simple-block :data="staffCount" size="small" font-family="DS-DigitalBold">
          <!--<img :src="value.icon">-->
        </simple-block>
      </div>
      <div class="block-div">
        <simple-block :data="attendanceCount" size="small" font-family="DS-DigitalBold">
          <!--<img :src="value.icon">-->
        </simple-block>
      </div>
      <div class="block-div">
        <simple-block :data="attendancePercent" size="small" font-family="DS-DigitalBold">
          <!--<img :src="value.icon">-->
        </simple-block>
      </div>
    </div>
    <!--<div class="chart-child" style="flex:1">-->
    <!--&lt;!&ndash;<ve-pie :data="chartData" style="width:100%;height:100%;"></ve-pie>&ndash;&gt;-->
    <!--<dv-active-ring-chart :config="config" style="width:100%;height:100%" />-->
    <!--</div>-->
  </div>
</template>

<script>
import SimpleBlock from '@/components/BigData/Block/simpleBlock'
import { getAttendancePercent } from '@/api/sanitation/statistics'
import { getSingleCount } from '@/api/sanitation/statistics'
import { getYesterDay, getToday} from '@/utils/dateutils'

export default {
  name: 'StaffStatistic',
  components: { SimpleBlock },
  data() {
    return {
      color: '',
      staffCount: {
        name: '人员总数', // 标题
        value: '--', // 数值
        unit: ''
      },
      attendanceCount: {
        name: '出勤总人数', // 标题
        value: '--', // 数值
        unit: ''
      },
      attendancePercent: {
        name: '出勤率', // 标题
        value: '--', // 数值
        unit: ''
      },
      chartData: {
        columns: ['出勤状态', '人数'],
        rows: [
          { '出勤状态': '出勤', '人数': 284 },
          { '出勤状态': '未出勤', '人数': 57 }
        ]
      },
      config: {
        radius: '60%',
        activeRadius: '65%',
        color: ['#37A2DA', '#9FE6B8'],
        data: [
          {
            name: '出勤',
            value: 284
          },
          {
            name: '未出勤',
            value: 57
          }
        ],
        digitalFlopStyle: {
          fontSize: 18,
          fill: 'black'
        }
      }
    }
  },
  created() {
    this.getStaffCount()
    this.fetchAttendance()
  },
  methods: {
    getStaffCount() {
      getSingleCount('staff').then(response => {
        if (response.code === 200) {
          this.staffCount.value = response.data
          if (this.attendanceCount.value + '' !== '--') {
            this.attendancePercent.value = this.divideWithTwoDecimals(Number(this.attendanceCount.value), this.staffCount.value)
          }
        }
      })
    },
    divideWithTwoDecimals(numerator, denominator) {
      console.log('求商并保留两位小数', numerator, denominator)
      if (denominator === 0) { // 防止除以0的错误
        return
      }
      const result = (numerator / denominator).toFixed(2)
      console.log('计算结果', result)
      return (result * 100).toFixed(2) + '%'
    },
    fetchAttendance() {
      const params = {
        type: 'day',
        staffType: '',
        startTime: getYesterDay('yyyy-MM-dd'),
        endTime: getYesterDay('yyyy-MM-dd')
      }
      getAttendancePercent(params).then(response => {
        if (response.code === 200) {
          // this.staffCount.value = response.data.total
          this.attendanceCount.value = response.data[0].count // 出勤总人数
          // this.attendanceCount.attendancePercent = response.data.percent
          if (this.staffCount.value + '' !== '--') {
            this.attendancePercent.value = this.divideWithTwoDecimals(Number(this.attendanceCount.value), this.staffCount.value)
          }
        }
      })
    }
  }
}
</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-direction: column;
    justify-content: space-between;
    .block-div{
      min-height: 27%;
      padding:3px;
    }
  }

}
</style>
<style>
  .active-ring-name{
    color:black !important;
    font-size:16px !important;
  }
</style>