<!--
 * @Description: 规划建设
 * @Author: 王晓颖
 * @Date: 2020-11-30 10:29:25
 -->
<template>
  <div class="chart-container">
    <div class="left">
      <div class="modular">
        <!--整个：左右50%-->
        <div class="modular-row-100">
          <!--左半 33%-->
          <div class="modular-col-30 modular-padding-right">
            <div class="modular-row-30">
              <ecology/>
            </div>
            <div class="modular-row-30">
              <infrasturcture-line/>
            </div>
            <div class="modular-row-30">
              <traffic-count-bar/>
            </div>
          </div><!-- .col50 over-->
          <!--./左半-->
          <!--右半 66%-->
          <div class="modular-col-60">
            <div class="modular-row-30">
              <land/>
            </div>
            <div class="modular-row-30">
              <div class="modular-col-30 modular-padding-right">
                <pipe-length-bar/>
              </div>
              <div class="modular-col-30 modular-padding-right">
                <pipe-count-bar/>
              </div>
              <div class="modular-col-30">
                <pipe-appendage-bar/>
              </div>
            </div>
            <div class="modular-row-30">
              <div class="modular-col-100">
                <iot-introduce/>
              </div>
            </div>
          </div><!-- .col50 over-->
          <!--./右半-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import Ecology from './components/plan/ecology'
import Land from './components/plan/land'
import InfrasturctureLine from './components/plan/infrastructureLine'
import TrafficCountBar from './components/plan/trafficCountBar'
import PipeCountBar from './components/plan/pipeCountBar'
import DeviceCount from './components/iot/components/deviceCount'
import PipeLengthBar from './components/plan/pipeLengthBar'
import IotIntroduce from './components/iot/iotIntroduce'
import PipeAppendageBar from "./components/plan/pipeAppendageBar";
export default {
  name: 'CityConstructionLeft',
  components: {
    PipeAppendageBar,
    IotIntroduce,
    PipeLengthBar,
    DeviceCount,
    PipeCountBar,
    TrafficCountBar,
    InfrasturctureLine,
    Land,
    Ecology

  },
  data () {
    return {
      populationComp: 0, // 人口组件
      populationComps: ['youth-pie', 'special-bar', 'introduce4'],
      populationTimer: null,
      parkComp: 0, // 停车场组件
      parkComps1: ['park-introduce', 'park-earth', 'park-income-count'],
      parkComps2: ['park-flow-line', 'park-detail', 'park-income-line'],
      parkTimer: null
    }
  },
  mounted () {
    // this.populationChange()
    // setTimeout(() => {
    //   this.parkChange()
    // }, 2000)
  },
  methods: {
    // 人口组件切换
    populationChange () {
      this.populationTimer = setTimeout(() => {
        const max = this.populationComps.length - 1
        if (this.populationComp < max) {
          this.populationComp++
        } else {
          this.populationComp = 0
        }
        this.populationChange()
      }, 10000)
    },
    // 停止切换人口组件
    stopPopulationChange () {
      clearInterval(this.populationTimer)
      this.populationTimer = null
    },
    parkChange () {
      this.parkTimer = setTimeout(() => {
        const max = this.parkComps1.length - 1
        if (this.parkComp < max) {
          this.parkComp++
        } else {
          this.parkComp = 0
        }
        this.parkChange()
      }, 5000)
    },
    stopParkChange () {
      clearInterval(this.parkTimer)
      this.parkTimer = null
    }
  },
  beforeDestroy () {
    this.stopPopulationChange()
    this.stopParkChange()
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-container{
    position: absolute;
    top:0;
    left:.2rem;
    width: 30%;
    height:98%;
    display: flex;
    z-index: 20;
    justify-content: space-between;
    background: transparent;
    .left{
      width:100%;
      height:100%;
      display: flex;
      justify-content: center;
      /*position: relative;*/
    }
    .modular{
      width:100%;
      height:100%;
      position:relative;
      .modular-50{
        height:50%;
        wdith:100%;
      }
    }
  }

  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(-150px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s ease;
  }

</style>