<!--
 * @Description:
 * @Author: 王晓颖
 * @Date:
 -->
<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 {fetchCarByType, fetchStaffByType} from '@/api/cityManage'
export default {
  name: 'introduce2',
  components: {Corner1, ChartLayout, SimpleBlock},
  data () {
    return {
      data: {
        sanitation: {name: '环卫车', value: '12', unit: '辆'},
        construction: {name: '渣土车', value: '14', unit: '辆'},
        policeCar: {name: '警车', value: '31', unit: '辆'},
        patroller: {name: '巡查员', value: '42', unit: '人'},
        receptionist: {name: '受理员', value: '8', unit: '人'},
        police: {name: '交警', value: '121', unit: '人'}
      },
      images: {
        sanitation: require('@/assets/images/city/icon-huanwei.png'),
        construction: require('@/assets/images/city/icon-zhatu.png'),
        policeCar: require('@/assets/images/city/icon-jingche.png'),
        patroller: require('@/assets/images/city/icon-xuncha.png'),
        receptionist: require('@/assets/images/city/icon-shouli.png'),
        police: require('@/assets/images/city/icon-jingcha.png')
      }
    }
  },
  created(){
    this.getData()
  },
  methods:{
    getData(){
      this.getSanitation()
      this.getConstruction()
      this.getPoliceCar()
      this.getPatroller()
      this.getReceptionist()
      this.getPolice()
    },
    // 环卫车
    getSanitation(){
      fetchCarByType('sanitation').then(response=>{
        if(response.code===200){
          this.data.sanitation.value = response.data.total
        }
      })
    },
    // 渣土车
    getConstruction(){
      fetchCarByType('construction').then(response=>{
        if(response.code===200){
          this.data.construction.value = response.data.total
        }
      })
    },
    // 警车
    getPoliceCar(){
      fetchCarByType('police').then(response=>{
        if(response.code===200){
          this.data.policeCar.value = response.data.total
        }
      })
    },
    // 巡查员
    getPatroller(){
      fetchStaffByType('patroller').then(response=>{
        if(response.code===200){
          this.data.patroller.value = response.data.total
        }
      })
    },
    // 受理员
    getReceptionist(){
      fetchStaffByType('receptionist').then(response=>{
        if(response.code===200){
          this.data.receptionist.value = response.data.total
        }
      })
    },
    // 交警
    getPolice(){
      fetchStaffByType('police').then(response=>{
        if(response.code===200){
          this.data.police.value = response.data.total
        }
      })
    }
  }
}
</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>