<!--
 * @Description: 城市治理左半
 * @Author: 王晓颖
 * @Date: 2020-09-04 13:58:59
 -->
<template>
  <div class="chart-container">
    <div class="left">
      <div class="modular">
        <!--整个：左右50%-->
        <div class="modular-row-100">
          <!--左半-->
          <div class="modular-col-30 modular-padding-right">
            <div class="modular-row-30">
              <!--<transition name="fade" mode="in-out" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">-->
              <!--<transition mode="out-in">-->
                <!--<component :is="populationComps[populationComp]" @mouseover.native="stopPopulationChange" @mouseout.native="populationChange"/>-->
              <!--</transition>-->
              <introduce4/>
            </div>
            <div class="modular-row-30">
              <special-bar/>
              <!--<park-introduce/>-->
              <!--<transition mode="out-in">-->
                <!--<component :is="parkComps1[parkComp]" @mouseover.native="stopParkChange" @mouseout.native="parkChange"/>-->
              <!--</transition>-->
              <!--<youth-pie/>-->
            </div>
            <div class="modular-row-30">
              <!--<transition mode="out-in">-->
                <!--<component :is="parkComps2[parkComp]" @mouseover.native="stopParkChange" @mouseout.native="parkChange"/>-->
              <!--</transition>-->
              <!--<park-income-line/>-->
              <!--<park-income-count/>-->
              <!--<park-flow-line/>-->
              <!--<park-earth/>-->
              <!--<park-detail/>-->
              <service/>
            </div>
          </div><!-- .col50 over-->
          <!--./左半-->
          <!--右半-->
          <div class="modular-col-60">
            <div class="modular-row-30">
              <introduce/>
            </div>
            <div class="modular-row-30">
              <youth/>
                <!--<div class="modular-col-50 modular-padding-right">-->
                  <!--<youth-pie/>-->
                <!--</div>-->
                <!--<div class="modular-col-50">-->
                  <!--&lt;!&ndash;<special-bar/>&ndash;&gt;-->
                <!--</div>-->
            </div>
            <!--多元化解-->
            <div class="modular-row-30">
              <contradiction/>
            </div>
          </div><!-- .col50 over-->
          <!--./右半-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Corner1 from '@/components/corner/Corner1'
import wisdomTraffic from '@/views/wisdomTraffic/index2'
import Introduce from './components/introduce/introduce'
import PopulationPie from './components/cityGovern/components/populationPie'
import SpecialBar from './components/cityGovern/components/specialBar'
import YouthPie from './components/cityGovern/components/younthPie'
import Introduce2 from './components/introduce/introduce2'
import PipeAlarmBar from './components/pipeAlarm/components/pipeAlarmBar'
import PipeAlarmPie from './components/pipeAlarm/components/pipeAlarmPie'
import PipeAlarmLine from './components/pipeAlarm/components/pipeAlarmLine'
import PipeAlarmEarth from './components/pipeAlarm/components/pipeAlarmEarth'
import CaseCountEarth from './components/cityManage/caseCountEarth'
import CaseRank from './components/cityManage/caseRank'
import CaseLine from './components/cityManage/caseLine'
import CasePie from './components/cityManage/casePie'
import Introduce3 from './components/introduce/introduce3'
import Introduce4 from './components/introduce/introduce4'
import PipeCountBar from './components/baseInfo/components/pipeCountBar'
import TrafficCountBar from './components/baseInfo/components/trafficCountBar'
import ProjectCountBar from './components/baseInfo/components/projectCountBar'
import ParkIntroduce from './components/parkingSystem/parkIntroduce'
import ParkEarth from './components/parkingSystem/parkEarth'
import ParkDetail from './components/parkingSystem/parkDetail'
import ParkIncomeCount from "./components/parkingSystem/parkIncomeCount";
import ParkFlowLine from "./components/parkingSystem/parkFlowLine";
import ParkIncomeLine from "./components/parkingSystem/parkIncomLine";
import Contradiction from "./components/contradiction/contradiction";
import Service from "./components/service/service";
import Youth from "./components/youth/youth";
export default {
  name: 'CityManageLeft',
  components: {
    Youth,
    Service,
    Contradiction,
    ParkIncomeLine,
    ParkFlowLine,
    ParkIncomeCount,
    ParkDetail,
    ParkEarth,
    ParkIntroduce,
    ProjectCountBar,
    TrafficCountBar,
    PipeCountBar,
    Introduce4,
    Introduce3,
    CasePie,
    CaseLine,
    CaseRank,
    CaseCountEarth,
    PipeAlarmEarth,
    PipeAlarmLine,
    PipeAlarmPie,
    PipeAlarmBar,
    Introduce2,
    YouthPie,
    SpecialBar,
    PopulationPie,
    Introduce,
    Corner1,
    wisdomTraffic
  },
  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>