<template>
  <view class="summaryOfPortraitsMain">
    <view class="summaryTab" :style="{top: (menu.bottom + 18) + 'px'}">
      <sliderPage :index="selectPortrait" @handleChangeIndex="handleChangeIndex"/>
    </view>
    <swiper v-if="isShowSwiper" class="summaryOfPortraitsBox" @change="handleChangeSelect" :current="selectPortrait">
      <!-- 服务区基本信息 0-->
      <swiper-item class="swiperItem">
        <mapDetail :selectIndex="selectPortrait"/>
      </swiper-item>
      <!-- 车流预警 1-->
      <swiper-item class="swiperItem">
        <carPortrait :selectIndex="selectPortrait" :serviceInfo="serviceInfo"/>
      </swiper-item>
      <!-- 客群画像 2-->
      <swiper-item class="swiperItem">
        <guestPortrait :selectIndex="selectPortrait"/>
      </swiper-item>
      <!-- 经营画像 3-->
      <swiper-item class="swiperItem">
        <managePortrait :selectIndex="selectPortrait"/>
      </swiper-item>
      <!-- 交易画像 4-->
      <swiper-item class="swiperItem">
        <businessPortrait :selectIndex="selectPortrait"/>
      </swiper-item>
      <!-- 业态品牌 5-->
      <swiper-item class="swiperItem">
        <formatPortraitBI v-if="serviceInfo.SERVERPART_NAME!=='安徽驿达'" :selectIndex="selectPortrait"/>
        <formatPortrait v-else  :selectIndex="selectPortrait" :comeType="'summaryOfPortraits'"/>
      </swiper-item>
      <!-- 考评考核 6-->
      <swiper-item class="swiperItem">
        <newAmine :selectIndex="selectPortrait" :pageType="1"/>
      </swiper-item>
      <!-- 日常巡检 7-->
      <swiper-item class="swiperItem">
        <newAmine :selectIndex="selectPortrait" :pageType="2"/>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
import mapDetail from "./components/mapDetail.vue";
import carPortrait from "./components/carPortrait.vue";
import guestPortrait from "./components/guestPortrait.vue";
import managePortrait from "./components/managePortrait.vue";
import businessPortrait from "./components/businessPortrait.vue"
import formatPortraitBI from "./components/formatPortraitBI.vue";
import formatPortrait from "./components/formatPortrait.vue";
import newAmine from "./components/newAmine.vue";
import sliderPage from "./components/components/sliderPage.vue";
export default {
  components:{mapDetail,carPortrait,guestPortrait,managePortrait,businessPortrait,formatPortraitBI,newAmine,sliderPage,formatPortrait},
  data(){
    return {
      selectPortrait:0,// 选择要看的商业画像
      query:'',// 传入的页面元素
      isShowSwiper:false,// 是否显示滑动块
      menu:{},
      serviceInfo:{},// 当前选中服务区
    }
  },
  onLoad(query){
    console.log('query',query)
    if (query.index){
      this.selectPortrait = Number(query.index)
    }
    console.log('onLoad')
    this.menu = uni.getMenuButtonBoundingClientRect()

  },
  onShow(){
    console.log('onShow')
    this.isShowSwiper = true
    let seat = uni.getStorageSync('currentService')
    this.serviceInfo = seat
  },
  onHide(){
    this.isShowSwiper = false
  },
  methods:{
    // 商业汇总的滑动方法
    handleChangeSelect(e){
      console.log('e',e)
      this.selectPortrait = e.detail.current
    },
    // 切换页码
    handleChangeIndex(e){
      this.selectPortrait = e
      this.$forceUpdate()
    }
  }
}
</script>
<style scoped lang="scss">
.summaryOfPortraitsMain{
  width: 100%;
  height: 100%;
  .summaryTab{
    position: fixed;
    left:0;
    width: 100vw;
    background: transparent;
    z-index: 99;
  }
  .summaryOfPortraitsBox{
    width: 100%;
    height: 100%;
    .swiperItem{
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }
  }
}
</style>
