<!--
 * @Description: 项目整体概况
 * @Author: 王晓颖
 * @Date: 2020-12-01 16:11:45
 -->
<template>
  <div class="PlanningLand">
    <!--各状态项目的占比情况-->
    <div v-for="(value,index) in data" class="landList">
      <gauge-item
        :title="value.title"
        :chart-id="'pr_gauge'+index"
        :color="colors[index]"
        :data="value.data"
      />
    </div>
  </div>
</template>

<script>
import GaugeItem from './gaugeItem'
import {fetchProjectCount, fetchProjectCountByState} from '@/api/projectManage'
import {getYear} from '@/utils/formatDate'
export default {
  name: 'ProjectAll',
  components: {GaugeItem},
  data () {
    return {
      year: getYear(),
      colors: ['#fe6449', '#6afe69', '#09fbfd', '#fcc5b9', '#d9eb33', '#dc6eeb', '#fed948'],
      data: [
        {title: '未启动', data: {total: '1324', already: '40', rate: 34}},
        {title: '进行中', data: {total: '1324', already: '40', rate: 24}},
        {title: '已完成', data: {total: '1324', already: '40', rate: 54}},
        {title: '已延期', data: {total: '1324', already: '40', rate: 14}},
        {title: '已归档', data: {total: '1324', already: '40', rate: 84}}
      ]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      fetchProjectCount(this.year).then(res => {
        if (res.code === 200) {
          const total = res.data.total
          if (total) {
            fetchProjectCountByState(this.year).then(response => {
              if (response.code === 200) {
                const dataFilter = [] // 最终数组
                const data = response.data
                for (const item of data) {
                  dataFilter.push({
                    title: item.type,
                    data: {
                      already: item.value,
                      total: total,
                      rate: Math.round(100 * item.value / total)
                    }
                  })
                }
                this.data = dataFilter
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.PlanningLand{
  width: 100%;
  height:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*.landList{*/
    /*.landSize {*/
      /*width: 50%;*/
      /*float: left;*/
      /*text-align: center;*/
      /*span {*/
        /*font-size: 0.07rem;*/
        /*// color: #00a3d7;*/
        /*color: #FFFFFF;*/
      /*}*/
    /*}*/
    /*.size {*/
      /*margin-top: .02rem;*/
      /*color: #00faa8;*/
      /*font-weight:bold;*/
      /*font-size: 0.09rem;*/
      /*span {*/
        /*font-size: 0.07rem;*/
      /*}*/
    /*}*/
  /*}*/
}
</style>