<!--
 * @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 {fetchPopulationByType} from '@/api/cityManage'
export default {
  name: 'introduce4',
  components: {Corner1, ChartLayout, SimpleBlock},
  data () {
    return {
      data: {
        changzhu: {name: '常住人口', value: '192311', unit: '人'},
        liudong: {name: '流动人口', value: '23622', unit: '人'},
        huji: {name: '户籍人口', value: '175313', unit: '人'},
        // liushou: {name: '留守人口', value: '2317', unit: '人'}
        zanzhu: {name: '暂住人口', value: '2317', unit: '人'}
      },
      images: {
        changzhu: require('@/assets/images/city/icon-changzhu.png'),
        liudong: require('@/assets/images/city/icon-liudong.png'),
        huji: require('@/assets/images/city/icon-xuncha.png'),
        liushou: require('@/assets/images/city/icon-shouli.png'),
        zanzhu: require('@/assets/images/city/icon-shouli.png')
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.getChangzhu()
      this.getLiudong()
      this.getHuji()
      // this.getLiushou()
      this.getZanzhu()
    },
    getChangzhu () {
      fetchPopulationByType('changzhu').then(response => {
        if (response.code === 200) {
          this.data.changzhu.value = response.data.total
        }
      })
    },
    getLiudong () {
      fetchPopulationByType('liudong').then(response => {
        if (response.code === 200) {
          this.data.liudong.value = response.data.total
        }
      })
    },
    getHuji () {
      fetchPopulationByType('huji').then(response => {
        if (response.code === 200) {
          this.data.huji.value = response.data.total
        }
      })
    },
    getLiushou () {
      fetchPopulationByType('liushou').then(response => {
        if (response.code === 200) {
          this.data.liushou.value = response.data.total
        }
      })
    },
    getZanzhu () {
      fetchPopulationByType('zanzhu').then(response => {
        if (response.code === 200) {
          this.data.zanzhu.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: 50%;
    height: 45%;
  }
}
</style>