<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.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'
import WisdomIPass from '../WisdomIPass'
export default {
  components:{
    CityPlan,
    CityGovern,
    Map3D,
    Map2D,
    MapVideo,
    SocialLivelihood,
    IndustrialEconomy,
    WisdomPipeNetwork,
    WisdomTraffic,
    WisdomPublicSafety,
    WisdomCityManage,
    WisdomGovernmentAffairs,
    WisdomCommunity,
    WisdomGardens,
    WisdomEducation,
    WisdomMedicalTreatment,
    WisdomTravel,
    WisdomIPass
  },
  data() {
    return {
      status: this.$store.state.status2,
      ops:{
        bar: {
          showDelay: 1000,
          keepShow: false,
          background: '#cecece',
          opacity: .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: center;
  color: #fff;
}
.panel-box>div{
  flex: 1;
}
</style>