<template>
  <view class="summaryOfPortraitsMain">
    <view class="summaryTab" v-if="selectPortrait!==6 && selectPortrait!==7" :style="{height: (menu.bottom + 62) + 'px',background:selectPortrait===0?'':
    selectPortrait===1?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #A8BFED 0%, #F0F5FF 100%)':'linear-gradient(180deg, #A8BFED 0%, #C3D3F4 100%)':
    selectPortrait===2?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #A0D0C1 0%, #EEF7F8 100%)':'linear-gradient(180deg, #A0D0C1 0%, #C0E0D7 100%)':
    selectPortrait===3?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #D9CCEF 0%, #F4F0FF 100%)':'linear-gradient(180deg, #D9CCEF 0%, #F4F0FF 100%)':
    selectPortrait===4?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #ECD1AF 0%, #F0DDC4 100%)':'linear-gradient(180deg, #ECD1AF 0%, #F0DDC4 100%)':
    selectPortrait===5?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #C5C1F0 0%, #EEF0FE 100%)':'linear-gradient(180deg, #C5C1F0 0%, #EEF0FE 100%)':
    ''}">
      <div class="leftArrow" :style="{top:(menu.top + ((menu.height - 24)/2) )+ 'px'}" >
        <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click="handleBack"></image>
        <div class="picker" :style="{top:(menu.bottom + 24)+'px'}" @click="handleChangeService">
          <div class="selectService" >
            <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
            <view class="select">
              <view class="content">
                <view class="uni-input">{{serviceInfo.SERVERPART_NAME?serviceInfo.SERVERPART_NAME:''}}</view>
                <p class="area">{{serviceInfo.SPREGIONTYPE_NAME?serviceInfo.SPREGIONTYPE_NAME:''}}</p>
                <text class="noticeText" v-if="serviceInfo.SERVERPART_NAME==='安徽驿达'">选择您要看的服务区</text>
                <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
              </view>
            </view>
          </div>
        </div>
      </div>

      <view style="width: 100%">
        <sliderPage :index="selectPortrait" @handleChangeIndex="handleChangeIndex"/>
      </view>
    </view>

    <view v-else :style="{width: '100%',position:'fixed',top:(menu.bottom + 14) + 'px',left:0,zIndex:999}">
      <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()
    },
    // 返回
    handleBack(){
      uni.navigateBack({
        delta: 1
      });
    },
    // 服务区跳转
    handleChangeService(){
      let currentService = uni.getStorageSync('currentService')
      let lastDay = uni.getStorageSync('lastDay')
      let pageList = getCurrentPages()
      console.log('pageList',pageList)
      if (pageList.length>2){
        uni.navigateBack({
          delta: 1
        })
      }else{
        uni.navigateTo({
          url:`/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
        })
      }
    }
  }
}
</script>
<style scoped lang="scss">
.summaryOfPortraitsMain{
  width: 100%;
  height: 100%;
  .summaryTab{
    position: fixed;
    left:0;top: 0;
    width: 100vw;
    background: transparent;
    z-index: 99;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding-bottom: 16px;
    .leftArrow{
      height: 24px;
      position: absolute;
      left: 16px;
      display: flex;
      align-items: center;
      z-index:99999999999;
      .img{
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
      .picker{
        .selectService{
          display: flex;
          align-items: center;
          .img{
            width: 40px;
            height: 40px;
            z-index: 2;
          }
          .select{
            height: 32px;
            background: #F8F8FA;
            border-radius: 0 16px 16px 0;
            transform: translateX(-40px);
            box-sizing: border-box;
            padding-left: 35px;
            padding-right: 8rpx;
            display: flex;
            align-items: center;
            .content{
              display: flex;
              align-items: center;
              .uni-input{
                padding: 0;
                background: transparent;
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
              }
              .area{
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 40px;
                margin-left: 4px;
              }
              .rightArrow{
                width: 12px;
                height: 12px;
              }
              .noticeText{
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #B6BACB;
                line-height: 40rpx;
                white-space: nowrap;
              }
            }

          }
        }
      }
    }
  }
  .summaryOfPortraitsBox{
    width: 100%;
    height: 100%;
    .swiperItem{
      width: 100%;
      height: 100vh;
    }
  }
}
</style>
