<template>
  <swiper class="swiperBox" :current="currentSwiper" @change="changeSwiper">
    <swiper-item class="swiperItem" v-for="(item,index) in carSwiperList" :key="index">
      <view  v-if="item!=='previous' && item!=='next'">
        <div class="header" :style="{backgroundImage: 'url('+ bgUrl +')'}">
          <div class="headerTop" :style="{height:(menu.bottom + 6) + 'px',background:topBg}">
            <div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
              <div class="icon" @click="handleBack">
                <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
              </div>
<!--              <text class="title">{{title}}</text>-->
              <div class="pickerTop" @click="handleGoSelectService">
                <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">{{serviceArray[serviceIndex]}}</view>-->
                      <view class="uni-input">{{serverpartName}}</view>
                      <!--                            <text class="area">{{area}}</text>-->
                      <text class="area" v-if="serviceInfo.Serverpart_ID">{{spregionTypeName}}</text>
                      <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
                    </view>
                  </view>
                </div>
              </div>
              <div class="seize"></div>
            </div>
          </div>
          <view class="sliderBox" :style="{top:(menu.bottom + 14) + 'px'}">
            <SliderPage :index="pageIndex" :serverpartName="serverpartName"/>
          </view>
          <div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}" >
<!--            <div class="picker" @click="handleGoSelectService">-->
<!--              <div class="selectService">-->
<!--                <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>-->
<!--                <view class="select">-->
<!--                  <view class="content">-->
<!--                    &lt;!&ndash;                            <view class="uni-input">{{serviceArray[serviceIndex]}}</view>&ndash;&gt;-->
<!--                    <view class="uni-input">{{serverpartName}}</view>-->
<!--                    &lt;!&ndash;                            <text class="area">{{area}}</text>&ndash;&gt;-->
<!--                    <text class="area" v-if="serviceInfo.Serverpart_ID">{{spregionTypeName}}</text>-->
<!--                    <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>-->
<!--                  </view>-->
<!--                </view>-->
<!--              </div>-->
<!--            </div>-->

            <div class="detailBox" v-if="serverpartName!=='安徽驿达'" :style="{background: detailBoxBg}">
              <div class="detailTop">
                <div class="topLeft" :style="{background:topLeftBg,color:topLeftColor}">{{serviceTypeObj[serviceInfoObj.SERVERPART_TYPE]}}</div>
                <div class="topRight" @click="handleGoServiceMessage">
                  <span class="rightText">查看更多</span>
                  <img class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
                </div>
              </div>
              <div class="functionList">
                <div class="functionItem">
                  <image class="haveFun" :src="haveFun.car?haveIconObj.have:haveIconObj.noHave"/>
                  <image class="carIcon" :src="iconObj.car"/>
                  <text class="funText">司机之家</text>
                </div>
                <div class="functionItem">
                  <image class="haveFun" :src="haveFun.charge?haveIconObj.have:haveIconObj.noHave"/>
                  <image class="carIcon" :src="iconObj.charge"/>
                  <text class="funText">充电桩</text>
                </div>
                <div class="functionItem">
                  <image class="haveFun" :src="haveFun.bady?haveIconObj.have:haveIconObj.noHave"/>
                  <image class="carIcon" :src="iconObj.bady"/>
                  <text class="funText">母婴室</text>
                </div>
                <div class="functionItem">
                  <image class="haveFun" :src="haveFun.gusetHome?haveIconObj.have:haveIconObj.noHave"/>
                  <image class="carIcon" :src="iconObj.guestRoom"/>
                  <text class="funText">客房</text>
                </div>
              </div>
            </div>
            <!--            <div class="label">-->
            <!--                <div :class="index===0?'labelItem labelItem0':index===1?'labelItem labelItem1':index===2?'labelItem labelItem2':index===3?'labelItem labelItem3':-->
            <!--                index===4?'labelItem labelItem4':index===5?'labelItem labelItem5':''" v-for="(item,index) in labelList" :key="index"-->
            <!--                :style="{background: 'linear-gradient('+bgColor+')'}"-->
            <!--                >{{ item }}</div>-->
            <!--            </div>-->
          </div>
          <!--        <div class="analyse" v-if="analyseText">-->
          <!--            <text class="title">分析</text>-->
          <!--            <text class="content">{{analyseText}}</text>-->
          <!--        </div>-->
        </div>
      </view>
      <view v-else style="width: 100%;height: 100%" ></view>
    </swiper-item>
  </swiper>
</template>

<script>
import request from '@/util/index.js'
import SliderPage from "./sliderPage.vue";
export default {
    name: "headerTop",
  components: {SliderPage},
    props:{
      menu:{
          type: Object,
          default: ()=>{}
      },
      bgUrl:{
          type:String,
          default: ""
      },
      bgColor:{
          type:String,
          default: ""
      },
      title:{
          type:String,
          default: ""
      },
      topBg:{
          type:String,
          default: ""
      },
        serverpartName:{
          type:String,
          deafault:''
        },
        spregionTypeName:{
            type:String,
            deafault:''
        },
        page:{
          type:String,
            default:''
        },
        serviceInfo:{
          type:Object,
            default:()=>{}
        },
        backType:{
          type:String,
          default:''
        },
        analyseInfo:{
          type:Object,
          default:()=>{}
        },
        iconObj:{
          type:Object,
          default:{
            car:'',
            charge:'',
            bady:'',
            guestRoom:''
          }
        },
        haveIconObj:{
          type:Object,
          default:{
            have:'',
            noHave:'',
          }
        },
        topLeftBg:{
          type:String,
          default:''
        },
        topLeftColor:{
          type:String,
          default:''
        },
        detailBoxBg:{
          type:String,
          default:''
        },
      haveFun:{
        type:Object,
        default:{
          car:false,
          charge:false,
          bady:false,
          gusetHome:false
        }
      },
      serviceInfoObj:{
        type:Object,
        default:()=>{}
      },
      serviceTypeObj:{
        type:Object,
        default:()=>{}
      },
      pageType:{
        type:Number,
        default:0
      },
      pageIndex:{
        type:Number,
        default:0
      }
    },
    data() {
        return {
          labelList:[],
          analyseText:'',
          currentSwiper:1,
          carSwiperList:['previous','','next'],
          goObj:{
            1000:{
              previous:'/pages/commercialBINew/carPortrait',
              next:'/pages/commercialBI/managePortrait'
            },
            2000:{
              previous:'/pages/commercialBI/guestPortrait',
              next:'/pages/commercialBI/businessPortrait'
            },
            3000:{
              previous:'/pages/commercialBI/managePortrait',
              next:'/pages/commercialBI/formatPortraitBI'
            },
            4000:{
              previous:'/pages/commercialBI/businessPortrait',
              next:`/pages/examine/detail?type=${1}`
            },
          }
        }
    },
    watch:{
        analyseInfo:{
            handler(value){
                //获得标签
                this.getLabelDetail()
            },
            immediate:true,
            deep:true
        }
    },
    // onLoad(){
    //     this.getLabelDetail()
    // },
    methods:{
      handleChangeCurrent(){
        this.currentSwiper = 1
      },
      // 滚动轮播图
      changeSwiper(e){
        console.log('e',e)
        this.currentSwiper = e.detail.current
        let value = this.carSwiperList[Number(e.detail.current)]
          if (value==='previous'){
            uni.redirectTo({
              url:this.goObj[this.pageType].previous
            })
          }else if(value==='next'){
            uni.redirectTo({
              url:this.goObj[this.pageType].next
            })
          }
      },
      // 点击查看更多跳转
      handleGoServiceMessage(){
        this.$util.toNextRoute('navigateTo', `/pages/map/detail`)
      },
        //获得标签
        async getLabelDetail(){
            let storeTime = uni.getStorageSync('lastDay')
            let storeServiceInfo = uni.getStorageSync('currentService')
            //六个标签
            let req = {
                SearchParameter:{
                    STATISTICS_DATE:storeTime,
                    ANALYSISINS_TYPE:this.analyseInfo.analysisins_type,
                    ANALYSISINS_FORMAT:1000,
                    ANALYSISINS_STATE:1,
                    SERVERPART_ID:storeServiceInfo.Serverpart_ID,
                },
                PageIndex:1,
                PageSize:10
            }
            //分析的文字
            let reqText = {
                SearchParameter:{
                    STATISTICS_DATE:storeTime,
                    ANALYSISINS_TYPE:this.analyseInfo.analysisins_type,
                    ANALYSISINS_FORMAT:2000,
                    ANALYSISINS_STATE:1,
                    SERVERPART_ID:storeServiceInfo.Serverpart_ID,
                },
                PageIndex:1,
                PageSize:10
            }
            //六个标签
            const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
            let list = []
            data.Result_Data.List.forEach(item=>{
                list.push(item.ANALYSIS_CONTENT)
            })
            this.labelList = list
            //分析的文字
            const total = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',reqText)
            this.analyseText = total.Result_Data.List[0]?total.Result_Data.List[0].ANALYSIS_CONTENT:''
        },
        //返回上一级s
        handleBack(){
          uni.navigateBack({
            delta: 1
          });
        },
        //点击跳转服务区
        handleGoSelectService(){
            uni.navigateTo({
                url:`/pages/map/index?page=${this.page}&chartType=${true}&serviceInfo=${JSON.stringify(this.serviceInfo)}`
            })
        }
    }
}
</script>

<style scoped lang="scss">
.swiperBox{
  width: 100%;
  height: 648rpx;
  .swiperItem{
    width: 100%;
    height: 648rpx;
    .header{
      width: 100%;
      height: 648rpx;
      //height: calc(1.056 * 100vw);
      box-sizing: border-box;
      position: relative;
      padding: 0 16px;
      background-repeat: no-repeat;
      //background-size: cover;
      background-size: 100% 100%;
      .headerTop{
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        z-index:99999;
        .box{
          padding: 0 16px;
          position: absolute;
          box-sizing: border-box;
          width: 100%;
          display: flex;
          align-items: center;
          transform: translateY(-50%);
          .icon{
            width: 24px;
            height: 24px;
            .img{
              width: 100%;
              height: 100%;
            }
          }
          .pickerTop{
            margin-left: 16rpx;
            .selectService{
              display: flex;
              align-items: center;
              .img{
                width: 40px;
                height: 40px;
                z-index: 2;
              }
              .select{
                min-width: 174px;
                height: 32px;
                background: #F8F8FA;
                border-radius: 0 16px 16px 0;
                transform: translateX(-20px);
                box-sizing: border-box;
                padding-left: 25px;
                padding-right: 25px;
                display: flex;
                align-items: center;
                position: relative;
                .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;
                    height: 40px;
                    line-height: 40px;
                  }
                  .area{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 40px;
                    margin-left: 4px;
                  }
                  .rightArrow{
                    width: 24px;
                    height: 12px;
                    position: absolute;
                    right: 0px;
                  }
                }

              }
            }
          }
          .title{
            font-size: 36rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #1C2130;
            line-height: 56rpx;
          }
          .seize{
            width: 24px;
            height: 24px;
          }
        }
      }
      .sliderBox{
        width: 100%;
        position: absolute;
        left: 0;
        box-sizing: border-box;
        padding: 0 16rpx;
        z-index:9;
      }
      .serviceArea{
        width: calc(100% - 32px);
        position: absolute;
        box-sizing: border-box;
        .picker{
          .selectService{
            display: flex;
            align-items: center;
            .img{
              width: 40px;
              height: 40px;
              z-index: 2;
            }
            .select{
              min-width: 174px;
              height: 32px;
              background: #F8F8FA;
              border-radius: 0 16px 16px 0;
              transform: translateX(-20px);
              box-sizing: border-box;
              padding-left: 25px;
              padding-right: 25px;
              display: flex;
              align-items: center;
              position: relative;
              .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;
                  height: 40px;
                  line-height: 40px;
                }
                .area{
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 40px;
                  margin-left: 4px;
                }
                .rightArrow{
                  width: 24px;
                  height: 12px;
                  position: absolute;
                  right: 0px;
                }
              }

            }
          }
        }
        .detailBox{
          width: 340rpx;
          height: 312rpx;
          border-radius: 16rpx;
          margin-top: 72rpx;
          box-sizing: border-box;
          padding: 24rpx 32rpx;
          .detailTop{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .topLeft{
              background: linear-gradient(180deg, rgba(49, 144, 255, 0.2) 0%, rgba(22, 87, 255, 0.2) 100%);
              border-radius: 8rpx;
              padding: 0 16rpx;
              font-size: 28rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #1E67FF;
              line-height: 40rpx;
            }
            .topRight{
              display: flex;
              align-items: center;
              .rightText{
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #A69E9F;
                line-height: 40rpx;
              }
              .moreIcon{
                width: 24rpx;
                height: 24rpx;
                margin-left: 4rpx;
              }
            }
          }
          .functionList{
            .functionItem{
              margin-top: 16rpx;
              display: flex;
              align-items: center;
              .haveFun{
                width: 32rpx;
                height: 32rpx;
                margin-right: 18rpx;
              }
              .carIcon{
                width: 32rpx;
                height: 32rpx;
                margin-right: 4rpx;
              }
              .funText{
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #6C737A;
                line-height: 40rpx;
              }
            }
          }
        }
        .label{
          width: calc(60% + 20px);
          height: 127px;
          position: relative;
          margin-top: 44px;
          .labelItem{
            position: absolute;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 22px;
            border-radius: 4px 4px 0 4px;
            padding: 4px 12px;
          }
          .labelItem0{
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index:9;
          }
          .labelItem1{
            top: 30%;
            left: 5%;
            z-index:8;
            opacity: 0.8;
          }
          .labelItem2{
            right: 0;
            top: 30%;
            opacity: 0.7;
          }
          .labelItem3{
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0.6;
          }
          .labelItem4{
            bottom: 20%;
            left: 10%;
            opacity: 0.5;
          }
          .labelItem5{
            bottom: 20%;
            right: 20%;
            opacity: 0.4;
          }
        }
      }
      .analyse{
        position: absolute;
        bottom: 16px;
        width: calc(100vw - 32px);
        height: 48px;
        box-sizing: border-box;
        padding: 6px 12px;
        background: #fff;
        border-radius: 4px;
        display: flex;
        .title{
          width: 28px;
          height: 18px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #160002;
          line-height: 18px;
          padding: 0 4px;
          text-align: center;
          border-radius: 4px;
          background:rgba(6, 93, 255, 0.1);
        }
        .content{
          width: calc(100% - 46px);
          padding-left: 6px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #786B6C;
          line-height: 18px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          -webkit-line-clamp: 2;
        }
      }

    }
  }
}
</style>
