<!--
 * @Description: 社区基本概况
 * @Author: 王晓颖
 * @Date: 2020-11-21 11:46:03
 -->
<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" :color="value.color">
          <img :src="value.icon">
        </simple-block>
      </div>
    </div>
    <corner1 slot="corner"/>
  </chart-layout>
</template>

<script>
import Corner1 from '@/components/corner/Corner1'
import SimpleBlock from '@/components/block/simpleBlock'
import {fetchSocialLive} from '@/api/community'
export default {
  name: 'Introduce',
  components: {SimpleBlock, Corner1},
  data () {
    return {
      data: {
        community: {name: '社区数量', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-community.png')},
        loudong: {name: '楼栋数量', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-loudong.png')},
        fangwu: {name: '房屋数量', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-fangwu.png')},
        chuzu: {name: '出租总户数', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-chuzu.png')},
        kongzhi: {name: '空置房屋数量', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-kongzhi.png')},
        changzhu: {name: '常住人口', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-changzhu.png')},
        liudong: {name: '流动人口', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-liudong.png')},
        jiedao: {name: '街道', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-street.png')},
        wuye: {name: '物业', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-wuye.png')},
        door: {name: '智能门禁', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-door.png')}
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.getCommunity()
      this.getBuildings()
      this.getHouse()
      this.getRent()
      this.getEmpty()
      this.getPermanent()
      this.getFlow()
      this.getStreet()
      this.getWuye()
      this.getDoor()
    },
    getCommunity () {
      fetchSocialLive('community').then(response => {
        if (response.code === 200) {
          this.data.community.value = response.data.total
        }
      }).catch((e) => {
        this.data.community.value = ''
      })
    },
    getBuildings () {
      fetchSocialLive('buildings').then(response => {
        if (response.code === 200) {
          this.data.loudong.value = response.data.total
        }
      }).catch((e) => {
        this.data.loudong.value = ''
      })
    },
    getHouse () {
      fetchSocialLive('house').then(response => {
        if (response.code === 200) {
          this.data.fangwu.value = response.data.total
        }
      }).catch((e) => {
        this.data.fangwu.value = ''
      })
    },
    getRent () {
      fetchSocialLive('rent').then(response => {
        if (response.code === 200) {
          this.data.chuzu.value = response.data.total
        }
      }).catch((e) => {
        this.data.chuzu.value = ''
      })
    },
    getEmpty () {
      fetchSocialLive('empty').then(response => {
        if (response.code === 200) {
          this.data.kongzhi.value = response.data.total
        }
      }).catch((e) => {
        this.data.kongzhi.value = ''
      })
    },
    getPermanent () {
      fetchSocialLive('permanent').then(response => {
        if (response.code === 200) {
          this.data.changzhu.value = response.data.total
        }
      }).catch((e) => {
        this.data.changzhu.value = ''
      })
    },
    getFlow () {
      fetchSocialLive('flow').then(response => {
        if (response.code === 200) {
          this.data.liudong.value = response.data.total
        }
      }).catch((e) => {
        this.data.liudong.value = ''
      })
    },
    getStreet () {
      fetchSocialLive('street').then(response => {
        if (response.code === 200) {
          this.data.jiedao.value = response.data.total
        }
      }).catch((e) => {
        this.data.jiedao.value = ''
      })
    },
    getWuye () {
      fetchSocialLive('wuye').then(response => {
        if (response.code === 200) {
          this.data.wuye.value = response.data.total
        }
      }).catch((e) => {
        // this.data.wuye.value = ''
      })
    },
    getDoor () {
      fetchSocialLive('door').then(response => {
        if (response.code === 200) {
          this.data.door.value = response.data.total
        }
      }).catch((e) => {
        this.data.door.value = ''
      })
    }

  }
}
</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: 20%;
      height: 45%;
    }
  }
</style>