<!--
 * @Description: 土地规划使用情况
 * @Author: 王晓颖
 * @Date: 2020-11-30 16:49:24
 -->
<template>
  <!--<chart-layout title="项目建设" @click="getData">-->
    <div class="PlanningLand" onmouseover.native="stopCompChange" onmouseleave.native="compChange">
    <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.08rem;color:white ;font-weight:bold; text-align: center">
            整体情况
          </div>
          <div style="font-size:0.15rem;color:white;text-align: center;display: flex">
            <div class="landSize">
              <span>总规划面积</span>
              <div class="size">{{total}}<span>{{unit}}</span></div>
            </div>
            <div class="landSize">
              <span>总已建面积</span>
              <div class="size" :style="{color:color}">{{already}}<span>{{unit}}</span></div>
            </div>
          </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>
  <!--</chart-layout>-->
</template>

<script>
import Legend from '@/components/legend/Legend'
import ProgressBar2 from '@/components/progressBar/ProgressBar2'
import GaugeItem from './gaugeItem'
import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
import {fetchProjectCount} from '@/api/cityManage'
export default {
  name: 'LandUse',
  components: {RoundLiquidFill, GaugeItem, ProgressBar2, Legend},
  data () {
    return {
      currentComp: 'data1',
      compChangeTime: 10, // 30s切换
      compTimer: null, // 切换查询接口定时器
      colors: ['#fe6449', '#6afe69', '#09fbfd', '#fcc5b9', '#d9eb33', '#dc6eeb', '#fed948'],
      total: 7702.87,
      already: 0,
      percent: [0],
      unit: '公顷',
      data: [],
      data1: [
        {title: '居住用地', data: {total: '1038.28', already: '', rate: 0}},
        {title: '物流仓库用地', data: {total: '121.82', already: '', rate: 0}},
        {title: '公共设施用地', data: {total: '813.13', already: '', rate: 0}},
        {title: '绿地与广场用地', data: {total: '1050.38', already: '', rate: 0}},
        {title: '城市建设用地', data: {total: '4998.89', already: '', rate: 0}},
        {title: '道路交通用地', data: {total: '133.84', already: '', rate: 0}}

      ],
      data2: [
        {title: '公共管理与服务设施用地', data: {total: '813.13', already: '', rate: 0}},
        {title: '商业服务设施用地', data: {total: '540.05', already: '', rate: 0}},
        {title: '发展备用地', data: {total: '189.16', already: '', rate: 0}},
        {title: '铁路用地', data: {total: '29.33', already: '', rate: 0}},
        {title: '公路用地', data: {total: '0', already: '', rate: 0}},
        {title: '非建设用地', data: {total: '2504.64', already: '', rate: 0}}

      ]
    }
  },
  created () {
    this.compChange()
    this.getData()
  },
  mounted () {
    this.getData()
  },
  methods: {
    beforeDestroy () {
      this.stopCompChange()
    },
    compChange () {
      this.compTimer = setTimeout(() => {
        this.currentComp = this.currentComp === 'data1' ? 'data2' : 'data1'
        this.getData()
        this.compChange()
      }, this.compChangeTime * 1000)
    },
    // 停止切换人口组件
    stopCompChange () {
      clearInterval(this.compTimer)
      this.compTimer = null
    },
    getData () {
      if (this.currentComp === 'data1') {
        this.data = this.data1
      } else if (this.currentComp === 'data2') {
        this.data = this.data2
      }
      // 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%;
  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>