<!--
 * @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: 'trafficCamera',
  components: {Corner1, ChartLayout, SimpleBlock},
  data () {
    return {
      data: {
        total: {name: '监控总数', value: '', unit: '个'},
        hd: {name: '高清', value: '', unit: '个'},
        md: {name: '标清', value: '', unit: '个'},
        online: {name: '在线', value: '', unit: '个'},
        offline: {name: '离线', value: '', unit: '个'},
        onlineRate: {name: '在线率', value: '', unit: '%'}
      },
      images: {
        total: require('@/assets/images/city/icon-camera.png'),
        hd: require('@/assets/images/city/icon-hd.png'),
        md: require('@/assets/images/city/icon-ld.png'),
        unknown: require('@/assets/images/city/icon-shouli.png'),
        online: require('@/assets/images/city/icon-online.png'),
        offline: require('@/assets/images/city/icon-offline.png'),
        onlineRate: require('@/assets/images/city/icon-rate.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>