<!--
 * @Description: 社区基础设施
 * @Author: 王晓颖
 * @Date: 2020-11-16 10:12: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" :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 {fetchInfrastructure} from '@/api/community'
export default {
  name: 'Infrastructure',
  components: {SimpleBlock, Corner1},
  data () {
    return {
      data: {
        park: {name: '公园', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-park.png')},
        administrativeService: {name: '行政服务中心', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-administrative.png')},
        cashBussiness: {name: '金融邮电', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-cash.png')},
        hospital: {name: '医疗机构', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-hospital.png')},
        school: {name: '学校', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-school.png')},
        welfareHouse: {name: '福利院', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-welfare.png')},
        culture: {name: '文化体育场所', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-culture.png')},
        entertainment: {name: '娱乐场所', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-entertainment.png')},
        bussiness: {name: '商业', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-business.png')},
        parkLot: {name: '停车场', value: '', unit: '个', color: '', icon: require('@/assets/images/social/icon-parkLot.png')}
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.getPark()
      this.getAdministrative()
      this.getCashBussiness()
      this.getHospitial()
      this.getSchool()
      this.getWelfareHouse()
      this.getCulture()
      this.getEntertainment()
      this.getBussiness()
      this.getParkLot()
    },
    // 公园数量
    getPark () {
      fetchInfrastructure('park').then(response => {
        if (response.code === 200) {
          this.data.park.value = response.data.total
        }
      }).catch((e) => {
        this.data.park.value = ''
      })
    },
    // 行政服务中心
    getAdministrative () {
      fetchInfrastructure('administrative').then(response => {
        if (response.code === 200) {
          this.data.administrativeService.value = response.data.total
        }
      }).catch((e) => {
        this.data.administrativeService.value = ''
      })
    },
    // 金融邮电数量
    getCashBussiness () {
      fetchInfrastructure('cashBusiness').then(response => {
        if (response.code === 200) {
          this.data.cashBussiness.value = response.data.total
        }
      }).catch((e) => {
        this.data.cashBussiness.value = ''
      })
    },
    // 医疗机构数量
    getHospitial () {
      fetchInfrastructure('hospital').then(response => {
        if (response.code === 200) {
          this.data.hospital.value = response.data.total
        }
      }).catch((e) => {
        this.data.hospital.value = ''
      })
    },
    // 学校数量
    getSchool () {
      fetchInfrastructure('school').then(response => {
        if (response.code === 200) {
          this.data.school.value = response.data.total
        }
      }).catch((e) => {
        this.data.school.value = ''
      })
    },
    // 福利院数量
    getWelfareHouse () {
      fetchInfrastructure('welfareHouse').then(response => {
        if (response.code === 200) {
          this.data.welfareHouse.value = response.data.total
        }
      }).catch((e) => {
        this.data.welfareHouse.value = ''
      })
    },
    // 文化体育场所数量
    getCulture () {
      fetchInfrastructure('culture').then(response => {
        if (response.code === 200) {
          this.data.culture.value = response.data.total
        }
      }).catch((e) => {
        this.data.culture.value = ''
      })
    },
    // 娱乐场所数量
    getEntertainment () {
      fetchInfrastructure('entertainment').then(response => {
        if (response.code === 200) {
          this.data.entertainment.value = response.data.total
        }
      }).catch((e) => {
        this.data.entertainment.value = ''
      })
    },
    // 文化体育场所数量
    getBussiness () {
      fetchInfrastructure('bussiness').then(response => {
        if (response.code === 200) {
          this.data.bussiness.value = response.data.total
        }
      }).catch((e) => {
        this.data.bussiness.value = ''
      })
    },
    // 停车场数量
    getParkLot () {
      fetchInfrastructure('parkLot').then(response => {
        if (response.code === 200) {
          this.data.parkLot.value = response.data.total
        }
      }).catch((e) => {
        this.data.parkLot.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>