<template>
  <view class="summaryOfPortraitsMain">
    <view class="summaryTab" v-if="selectPortrait !== 6 && selectPortrait !== 7" :style="{
      height: (menu.bottom + 14) + '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.SAName ? serviceInfo.SAName : '' }}</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" :name="serviceInfo.SERVERPART_NAME"/>
      </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> -->

    <view class="summaryOfPortraitsBox" v-if="isHandleOnShow">
      <view class="swiperItem">
        <mapDetail :selectIndex="selectPortrait" />
      </view>
    </view>

    <template v-if=false>
      <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" v-if=false>
          <carPortrait :selectIndex="selectPortrait" :serviceInfo="serviceInfo" />
        </swiper-item>
        <!-- 客群画像 2-->
        <swiper-item class="swiperItem" v-if=false>
          <guestPortrait :selectIndex="selectPortrait" />
        </swiper-item>
        <!-- 经营画像 3-->
        <swiper-item class="swiperItem" v-if=false>
          <managePortrait :selectIndex="selectPortrait" />
        </swiper-item>
        <!-- 交易画像 4-->
        <swiper-item class="swiperItem" v-if=false>
          <businessPortrait :selectIndex="selectPortrait" />
        </swiper-item>
        <!-- 业态品牌 5-->
        <swiper-item class="swiperItem" v-if=false>
          <formatPortraitBI v-if="serviceInfo.SERVERPART_NAME !== '安徽驿达'" :selectIndex="selectPortrait" />
          <formatPortrait v-else :selectIndex="selectPortrait" :comeType="'summaryOfPortraits'" />
        </swiper-item>
        <!-- 考评考核 6-->
        <swiper-item class="swiperItem" v-if=false>
          <newAmine :selectIndex="selectPortrait" :pageType="1" />
        </swiper-item>
        <!-- 日常巡检 7-->
        <swiper-item class="swiperItem" v-if=false>
          <newAmine :selectIndex="selectPortrait" :pageType="2" />
        </swiper-item>
      </swiper>
    </template>

  </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: {},// 当前选中服务区
      isHandleOnShow: true,// 是否调用onShow的方法
    }
  },
  onLoad(query) {
    console.log('query', query)
    if (query.index) {
      this.selectPortrait = Number(query.index)
    } else {
      let seat = uni.getStorageSync('currentService')
      this.selectPortrait = seat.SERVERPART_NAME === '安徽驿达' ? 1 : 0
    }
    this.query = query
    console.log('onLoad')
    this.menu = uni.getMenuButtonBoundingClientRect()

  },
  onShow() {
    console.log('onShow')
    console.log('selectPortrait', this.selectPortrait)
    this.isShowSwiper = true
    let seat = uni.getStorageSync('currentService')
    console.log('seat', seat)
    console.log('this.serviceInfo', JSON.parse(JSON.stringify(this.serviceInfo)))
    if (this.serviceInfo.SAName !== seat.SAName) {
      this.serviceInfo = seat
      this.isHandleOnShow = false
      this.selectPortrait = -1
      uni.showLoading()
      this.$forceUpdate()
      setTimeout(() => {
        this.isHandleOnShow = true
        this.selectPortrait = 0
        uni.hideLoading()
      }, 100)
    }

    // if (this.selectPortrait) {

    // } else {
    //   this.selectPortrait = this.query.index ? this.query.index : seat.SERVERPART_NAME === '安徽驿达' ? 1 : 0
    // }
  },
  onHide() {
    this.isShowSwiper = false
  },
  methods: {
    // 商业汇总的滑动方法
    handleChangeSelect(e) {
      console.log('e', e)
      // this.handleChangePreview(true)
      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)
      uni.navigateTo({
        url: `/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
      })

      // 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-image: url("https://eshangtech.com/minTestImg/pageBg.png");
    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>
