<!--
 * @Description: 城市整体概况： 面积，区域数量，人口，街道，社区，网格
 * @Author: 王晓颖
 * @Date: 2020-09-14 16:36:21
 -->
<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 {fetchBaseInfo} from '@/api/cityManage'
export default {
  name: 'introduce',
  components: {Corner1, ChartLayout, SimpleBlock},
  data () {
    return {
      data: {
        area: {name: '总面积', value: '231.01', unit: '平方公里'},
        quhua: {name: '区域数量', value: '3', unit: ''},
        population: {name: '人口', value: '21.5973', unit: '万人'},
        street: {name: '街道数量', value: '23', unit: '个'},
        community: {name: '社区数量', value: '46', unit: '个'},
        building: {name: '楼栋数量', value: '96353', unit: '个'},
        room: {name: '房屋数量', value: '9737', unit: '个'},
        grid: {name: '网格数量', value: '88', unit: '个'}
      },
      images: {
        area: require('@/assets/images/city/icon-area.png'),
        quhua: require('@/assets/images/city/icon-quhua.png'),
        population: require('@/assets/images/city/icon-population.png'),
        street: require('@/assets/images/city/icon-street.png'),
        community: require('@/assets/images/city/icon-community.png'),
        building: require('@/assets/images/city/icon-building.png'),
        room: require('@/assets/images/city/icon-house.png'),
        grid: require('@/assets/images/city/icon-grid.png')
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.getArea()
      this.getQuhua()
      this.getStreet()
      this.getPopulation()
      this.getStreet()
      this.getGrid()
    },
    getArea () {
      fetchBaseInfo('area').then(response => {
        if (response.code === 200) {
          this.data.area.value = response.data.total
        }
      })
    },
    getQuhua () {
      fetchBaseInfo('region').then(response => {
        if (response.code === 200) {
          this.data.quhua.value = response.data.total
        }
      })
    },
    getPopulation () {
      fetchBaseInfo('population').then(response => {
        if (response.code === 200) {
          this.data.population.value = response.data.total
        }
      })
    },
    getStreet () {
      fetchBaseInfo('street').then(response => {
        if (response.code === 200) {
          this.data.street.value = response.data.total
        }
      })
    },
    getCommunity () {
      fetchBaseInfo('commuity').then(response => {
        if (response.code === 200) {
          this.data.community.value = response.data.total
        }
      })
    },
    getGrid () {
      fetchBaseInfo('grid').then(response => {
        if (response.code === 200) {
          this.data.grid.value = response.data.total
          this.data.grid.value = 88
        }
      })
    }
  }
}
</script>

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