<!--
 * @Description: 交通整体概况
 * @Author: 王晓颖
 * @Date: 2020-11-30 15:20:49
 -->
<template>
  <chart-layout title="交通概况">
    <div class="block-container">
      <div class="block" v-for="(value,key,index) in data" :key="index">
        <simple-block :data="value" size="small" :color="value.color">
          <img :src="value.icon">
        </simple-block>
      </div>
    </div>
    <corner1 slot="corner"/>
  </chart-layout>
</template>

<script>
import SimpleBlock from '@/components/block/simpleBlock'
import SingleLayout from '@/components/layout/singleLayout'
import mockData from '../../../../../static/city.json'
// import {fetchInfrastructure} from '@/api/jgzl'
export default {
  name: 'TrafficIntroduce',
  components: {SingleLayout, SimpleBlock},
  data () {
    return {
      data: {
        jgzl: {name: '在岗警力', value: '', unit: '人', color: '', icon: require('@/assets/images/traffic/icon-police.png')},
        cscl: {name: '交通事件', value: '', unit: '个', color: '', icon: require('@/assets/images/traffic/icon-case.png')},
        stgy: {name: '平均车速', value: '', unit: 'km/h', color: '', icon: require('@/assets/images/traffic/icon-speed.png')},
        csgy: {name: '拥堵里程', value: '', unit: 'km', color: '', icon: require('@/assets/images/traffic/icon-gem-length.png')},
        hp: {name: '拥堵里程比例', value: '', unit: '%', color: '', icon: require('@/assets/images/traffic/icon-distance.png')},
        hl: {name: '拥堵时间', value: '', unit: 'h', color: '', icon: require('@/assets/images/traffic/icon-time.png')}
      }
    }
  },
  mounted () {
    // this.getData()
    this.data.jgzl.value = mockData.traffic.introduce.police
    this.data.cscl.value = mockData.traffic.introduce.event
    this.data.stgy.value = mockData.traffic.introduce.speed
    this.data.csgy.value = mockData.traffic.introduce.mileage
    this.data.hp.value = mockData.traffic.introduce.rate
    this.data.hl.value = mockData.traffic.introduce.time
  },
  methods: {
    getData () {
      // for (const item of Object.keys(this.data)) {
      //   this.getItemData(item)
      // }
    },
    // item，传参数
    getItemData (item) {
      console.log(item)
      // fetchInfrastructure(item).then(response => {
      //   if (response.code === 200) {
      //     this.data.item.value = response.data.total
      //   }
      // }).catch((e) => {
      //   this.data[item.value = 7
      // })
    }
  }
}
</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;
    padding-top:0.04rem;
    .block{
      width: 33%;
      height: 45%;
    }
  }
</style>