<!--
 * @Description: 各状态工地数
 * @Author: 王晓颖
 * @Date: 2020-11-30 15:20:49
 -->
<template>
    <div class="block-container">
      <div class="block" v-for="(value,key,index) in data" :key="index">
        <simple-block :data="value" size="small" :color="value.color">
          <img :src="value.icon">
        </simple-block>
      </div>
    </div>
</template>

<script>
import SimpleBlock from '@/components/block/simpleBlock'
import {fetchConstructionByState, fetchConstructionCount, fetchConstructionInvestment} from '@/api/construction'
import {getYear} from '@/utils/formatDate'
// import {fetchInfrastructure} from '@/api/total'
export default {
  name: 'ConstructionState',
  components: {SimpleBlock},
  data () {
    return {
      data: {
        total: {name: '工地总数', value: '', unit: '个', color: '', icon: require('@/assets/images/construction/icon-total.png')},
        doing: {name: '在建', value: '', unit: '个', color: '', icon: require('@/assets/images/construction/icon-doing.png')},
        ready: {name: '未开工', value: '', unit: '个', color: '', icon: require('@/assets/images/construction/icon-ready.png')},
        pause: {name: '暂停', value: '', unit: '个', color: '', icon: require('@/assets/images/construction/icon-pause.png')},
        over: {name: '竣工', value: '', unit: '个', color: '', icon: require('@/assets/images/construction/icon-over.png')},
        investment: {name: '总投资', value: '', unit: '亿元', color: '', icon: require('@/assets/images/construction/icon-investment.png')}
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.getStateData()
      this.getTotalData()
      this.getInvData()
    },
    getStateData () {
      console.log('fetchConstructionByState')
      let year = getYear()
      fetchConstructionByState(year).then((res) => {
        console.log('fetchConstructionByState', res.data)
        for (const item of res.data) {
          switch (item.type) {
            case '在建':
              this.data.doing.value = item.value
              break
            case '未开工':
              this.data.ready.value = item.value
              break
            case '暂停':
              this.data.pause.value = item.value
              break
            case '竣工':
              this.data.over.value = item.value
              break
            default:
              break
          }
        }
      })
    },
    getTotalData () {
      console.log('fetchConstructionCount')
      let year = getYear()
      fetchConstructionCount(year).then((res) => {
        console.log('fetchConstructionCount', res.data)
        this.data.total.value = res.data.total
      })
    },
    getInvData () {
      console.log('fetchConstructionInvestment')
      let year = getYear()
      fetchConstructionInvestment(year).then((res) => {
        console.log('fetchConstructionInvestment', res.data)
        this.data.investment.value = (res.data.total / 10000).toFixed(1)
      })
    },
    // item，传参数
    getItemData (item) {
      console.log(item)
      // fetchInfrastructure(item).then(response => {
      //   if (response.code === 200) {
      //     this.data.item.value = response.data.total
      //   }
      // }).catch((e) => {
      //   this.data[item.value = 7
      // })
    }
  }
}
</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: 33%;
      height: 45%;
    }
  }
</style>