<!--
 * @Description: 项目数
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <chart-layout title="项目建设" @click="getData">
    <div class="PlanningLand">
      <div class="landList" style="width: 170px;">
        <div style="width: 100%;height:130px;display: flex;justify-content: center">
          <div style="width: 130px;height:130px;">
            <round-liquid-fill id="liquidfill1" :data="percent"/>
          </div>
        </div>
        <!--概况-->
        <div style="width:100%;text-align: center">
          <div style="font-size:0.07rem;color:white;margin-bottom: 0.02rem ;text-align: center">
            总项目数
          </div>
          <div style="font-size:0.15rem;color:white;text-align: center">
            {{total}}
          </div>
        </div>
      </div>
      <!--各项目的竣工情况-->
      <div v-for="(value,index) in data" class="landList">
        <gauge-item
          :title="value.title"
          :chart-id="'project_gauge'+index"
          :color="colors[index]"
          :data="value.data"
        />
      </div>
    </div>
    <corner1 slot="corner"/>
  </chart-layout>
</template>

<script>
import Legend from '@/components/legend/Legend'
import ProgressBar2 from '@/components/progressBar/ProgressBar2'
import GaugeItem from './gaugeItem'
import Corner2 from '@/components/corner/Corner2'
import ChartLayout from '@/components/layout/chartLayout'
import Corner1 from '@/components/corner/Corner1'
import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
import {fetchProjectCount} from '@/api/cityManage'
export default {
  name: 'projectCountBar',
  components: {RoundLiquidFill, Corner1, ChartLayout, Corner2, GaugeItem, ProgressBar2, Legend},
  data () {
    return {
      colors: ['#fe6449', '#6afe69', '#09fbfd', '#fcc5b9', '#d9eb33', '#dc6eeb', '#fed948'],
      total: 0,
      percent: [0.5],
      data: [
        {title: '房屋建设', data: {total: '1324', already: '400', rate: 34}},
        {title: '市政道路', data: {total: '1324', already: '400', rate: 24}},
        {title: '园林绿化', data: {total: '1324', already: '400', rate: 54}},
        {title: '桥梁隧道', data: {total: '1324', already: '400', rate: 14}},
        {title: '地下管廊', data: {total: '1324', already: '400', rate: 84}},
        {title: '其他', data: {total: '1324', already: '400', rate: 24}}
      ]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      fetchProjectCount().then(response => {
        if (response.code === 200) {
          const dataFilter = [] // 最终数组
          let total = 0
          let complete = 0
          const data = response.data
          for (const item of data) {
            total += item.plan
            complete += item.complete
            dataFilter.push({
              title: item.name,
              data: {
                already: item.complete,
                total: item.plan,
                rate: Math.round(100 * item.complete / item.plan)
              }
            })
          }
          this.total = total
          this.percent = [complete / total]
          this.data = dataFilter
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.PlanningLand{
  width: 100%;
  height:100%;
  padding:  .1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .landList{
    /*width:10%;*/
  }
}
</style>