<!--
 * @Description: 各种类型人口数量
 * @Author: 王晓颖
 * @Date: 2020-09-15 09:29:47
 -->
<template>
  <chart-layout title="智慧环卫" @click="getData">
    <div class="block-container">
      <div class="block" v-for="(value,key,index) in data" :key="index">
        <simple-block :data="value">
          <img :src="images[key]">
        </simple-block>
      </div>
    </div>
    <corner1 slot="corner"/>
  </chart-layout>
</template>

<script>
import SimpleBlock from './components/simpleBlock'
import ChartLayout from '@/components/layout/chartLayout'
import Corner1 from '@/components/corner/Corner1'
import {fetchCameraByType, fetchCameraByStatus} from '@/api/smartTraffic'
export default {
  name: 'Environment',
  components: {Corner1, ChartLayout, SimpleBlock},
  data () {
    return {
      data: {
        dev: {name: '环卫设施', value: '', unit: '个'},
        work: {name: '环卫工作', value: '', unit: '件'},
        complete: {name: '工作完成数', value: '', unit: '件'},
        rate: {name: '工作完成率', value: '', unit: '%'},
        person: {name: '环卫人员', value: '', unit: '人'},
        car: {name: '环卫车', value: '', unit: '辆'}
      },
      images: {
        dev: require('@/assets/images/city/dev.png'),
        work: require('@/assets/images/city/work.png'),
        complete: require('@/assets/images/city/complete.png'),
        rate: require('@/assets/images/city/rate.png'),
        person: require('@/assets/images/city/person.png'),
        car: require('@/assets/images/city/car.png')
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      // this.getCameraByType()
      // this.getCameraByStatus()
    },
    getCameraByType () {
      fetchCameraByType().then(response => {
        if (response.code === 200) {
          this.data.hd.value = response.data.hd
          this.data.md.value = response.data.md
          this.data.total.value = response.data.hd + response.data.md
        }
      })
    },
    getCameraByStatus () {
      fetchCameraByStatus().then(response => {
        if (response.code === 200) {
          this.data.online.value = response.data.online
          this.data.offline.value = response.data.offline
          const rate = response.data.online / (response.data.online + response.data.offline)
          this.data.onlineRate.value = Math.round(rate * 100)
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block-container{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0.04rem;
  .block{
    width: 33%;
    height: 45%;
  }
}
</style>