<template>
  <div class="panel-containers">
    <vue-scroll :ops="ops" ref="vsMain">
      <div class="panel-main">
        <div class="panel-box">
          <div v-for="(value,index) in status" :key="index">
            <component :is="!value.flag1?value.component:''"></component>
          </div>
        </div>
      </div>
    </vue-scroll>
  </div>
</template>
<script>
import CityPlan from '../cityPlan'
import CityGovern from '../cityGovern'
import Map3D from '../mapViews/Map3D'
import Map2D from '../mapViews/Map2D'
import MapVideo from '../mapViews/MapVideo'
import SocialLivelihood from '../socialLivelihood'
import IndustrialEconomy from '../industrialEconomy'
import WisdomPipeNetwork from '../wisdomPipeNetwork'
import WisdomTraffic from '../wisdomTraffic'
import WisdomPublicSafety from '../wisdomPublicSafety'
import WisdomCityManage from '../wisdomCityManage'
import WisdomGovernmentAffairs from '../wisdomGovernmentAffairs'
import WisdomCommunity from '../wisdomCommunity'
import WisdomGardens from '../wisdomGardens'
import WisdomEducation from '../wisdomEducation'
import WisdomMedicalTreatment from '../wisdomMedicalTreatment'
import WisdomTravel from '../wisdomTravel'
export default {
  components: {
    CityPlan,
    CityGovern,
    Map3D,
    Map2D,
    MapVideo,
    SocialLivelihood,
    IndustrialEconomy,
    WisdomPipeNetwork,
    WisdomTraffic,
    WisdomPublicSafety,
    WisdomCityManage,
    WisdomGovernmentAffairs,
    WisdomCommunity,
    WisdomGardens,
    WisdomEducation,
    WisdomMedicalTreatment,
    WisdomTravel
  },
  data () {
    return {
      status: this.$store.state.status,
      ops: {
        bar: {
          showDelay: 1000,
          keepShow: false,
          background: '#cecece',
          opacity: 0.5,
          size: '.06rem',
          onlyShowBarOnScroll: false
        }
      }
    }
  },
  mounted () {
    window.onload = () => {
      this.$refs['vsMain'].scrollTo({ x: '50%' }, 500)
    }
  },
  methods: {
    getUserInfo (location) {
      let params = {
      }
      homeList(params).then(res => {
        if (res.status == 1) {
        }
      })
    }
  }
}
</script>

<style scoped>
.panel-containers{
  width: 100%;
  height: auto;
  overflow: auto;
}
.panel-box{
  height: 100%;
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.panel-box>div{
  flex: 1;
}
</style>