<!--
 * @Description: 巡查情况总计
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <div class="inspection-container">
    <!--当天情况-->
    <div class="block-container">
      <div class="block-header" style="visibility: hidden">
        <div>
          <span>今日</span>
        </div>
      </div>
      <div class="block" v-for="(value,index) in today" :key="'inspection_'+index">
        <simple-block :data="value" :color="value.color" size="small" font-family="DS-DigitalBold">
          <img :src="value.icon">
        </simple-block>
      </div>
    </div>
    <!--本月-->
    <div class="block-container-2">
      <div class="block-header">
        <div>
          <span>本月累计</span>
        </div>
      </div>
      <div class="block" v-for="(value,index) in month" :key="'inspection_month_'+index">
        <div>
          <span class="value">{{value.value}}</span><span class="unit">{{value.unit}}</span>
        </div>
      </div>
    </div>
    <!--全年-->
    <div class="block-container-2">
      <div class="block-header">
        <div>
          <span>全年累计</span>
        </div>
      </div>
      <div class="block" v-for="(value,index) in month" :key="'inspection_month_'+index">
        <div>
          <span class="value">{{value.value}}</span><span class="unit">{{value.unit}}</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import SimpleBlock from '@/components/block/simpleBlock'
export default {
  name: 'InspectionCount',
  components: {SimpleBlock},
  data () {
    return {
      today: {
        count: {name: '巡查次数', value: '12', unit: '次', color: '', icon: require('@/assets/images/city/icon-inspection.png')},
        time: {name: '巡查时间', value: '24', unit: 'h', color: '', icon: require('@/assets/images/city/icon-time.png')},
        distance: {name: '巡查里程', value: '932', unit: 'km', color: '', icon: require('@/assets/images/city/icon-distance.png')},
        case: {name: '立案数', value: '30', unit: '件', color: '', icon: require('@/assets/images/city/icon-case.png')},
        fines: {name: '罚款金额', value: '5313', unit: '元', color: '', icon: require('@/assets/images/city/icon-fines.png')}
      },
      month: {
        count: {name: '巡查次数', value: '573', unit: '次'},
        time: {name: '巡查时间', value: '653', unit: 'h'},
        distance: {name: '巡查里程', value: '53432', unit: 'km'},
        case: {name: '立案数', value: '523', unit: '件'},
        fines: {name: '罚款金额', value: '965552', unit: '元'}
      },
      year: {
        count: {name: '巡查次数', value: '573', unit: '次'},
        time: {name: '巡查时间', value: '653', unit: 'h'},
        distance: {name: '巡查里程', value: '53432', unit: 'km'},
        case: {name: '立案数', value: '523', unit: '件'},
        fines: {name: '罚款金额', value: '965552', unit: '元'}
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      // for (const item of Object.keys(this.data)) {
      //   this.getItemData(item)
      // }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .inspection-container{
    height: 100%;
    width: 100%;
    .block-container{
      height: 40%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 0.04rem;
      padding-top:0.04rem;
      box-sizing: border-box;
      .block-header{
        width:10%;
        padding: 0.05rem;
        text-align: right;
        visibility: hidden;
      }
      .block{
        flex:1;
        height: 100%;
      }
    }
    .block-container-2{
      height: 20%;
      color:white;
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 0.04rem;
      box-sizing: border-box;
      .block-header{
        width:10%;
        padding: 0.05rem;
        text-align: right;
        font-size: 0.1rem;
        font-weight: bold;
        color: rgb(0, 232, 255)
      }
      .block{
        flex:1;
        height: 100%;
        text-align: right;
        padding: 0.01rem 0.05rem;
        box-sizing: border-box;
        padding-right: 0.2rem;
        .value{
          font-size:0.15rem;
          font-weight: bold;
          font-family: DS-DigitalBold;
        }
        .unit{
          font-size:0.08rem
        }
      }
    }
  }

</style>