<!--
 * @Description: 社会民生右半
 * @Author: 王晓颖
 * @Date: 2020-09-04 13:59:13
 -->
<template>
  <div class="chart-container">
    <div class="right">
      <div class="modular">
        <div class="modular-row-100">
          <!--左66%-->
          <div class="modular-col-60 modular-padding-right">
            <!--上33%-->
            <div class="modular-row-30">
              <infrastructure/>
            </div>
            <!--中33%-->
            <div class="modular-row-30">
              <ecard-introduce/>
            </div>
            <!--下33%-->
            <div class="modular-row-30">
              <div class="modular-col-50 modular-padding-right">
                <park-occupy/>
              </div>
              <div class="modular-col-50">
                <park-income/>
              </div>
            </div>

          </div><!-- .col50 over-->
          <!--右33%-->
          <div class="modular-col-30">
            <div class="modular-row-30">
              <!--教育-->
              <education v-if="isShow"/>
              <hospital v-if="!isShow"/>
            </div>
            <div class="modular-row-30">
              <!--食堂-->
              <canteen/>
            </div>
            <div class="modular-row-30">
              <!--门禁-->
              <access/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Infrastructure from './components/community/infrastructure'
import EcardIntroduce from './components/eCard/ecardIntroduce'
import ParkOccupy from './components/parkingSystem/parkOccupy'
import ParkIncome from './components/parkingSystem/parkIncome'
import Canteen from './components/canteen/canteen'
import Access from './components/accessControl/access'
import Education from './components/education/education'
import Hospital from './components/hospital/hospital'
export default {
  name: 'SocialLivelihoodRight',
  components: {
    Education,
    Hospital,
    Access,
    Canteen,
    ParkIncome,
    ParkOccupy,
    EcardIntroduce,
    Infrastructure
  },
  data () {
    return {
      isShow: true,
      currentComp: 0, // 人口组件
      currentComps: ['case-all', 'traffic-all'],
      compsTimer: null
    }
  },
  mounted () {
    // this.countdown()
    this.compChange()
  },
  methods: {
    // 交通、社会治理面板切换
    compChange () {
      this.compsTimer = setTimeout(() => {
        this.isShow = !this.isShow
        // const max = this.currentComps.length - 1
        // if (this.currentComp < max) {
        //   this.currentComp++
        // } else {
        //   this.currentComp = 0
        // }
        this.compChange()
      }, 10000)
    },
    // 停止切换人口组件
    stopCompChange () {
      clearInterval(this.compsTimer)
      this.compsTimer = null
    }
  },
  beforeDestroy () {
    this.stopCompChange()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-container{
    position: absolute;
    padding: 0 0.1rem 0.1rem 0.3rem;
    top:0;
    right:0.2rem;
    width: 30%;
    height:100%;
    display: flex;
    z-index: 20;
    justify-content: space-between;
    background: transparent;
    .right{
      width:100%;
      height:100%;
      display: flex;
      justify-content: center;
      /*position: relative;*/
    }

  }
</style>