<!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
<template>
	<view class="wrap">
		<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y enhanced :bounces="false">
			<view class="banner" id='banner'>
				<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:16px" height="400" :interval='interval' circular>
						<view slot="indicator" class="indicator-num">
								<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
						</view>
				</u-swiper>
			</view>
			<view class="middle">
				<!-- 中间上面部分 -->
				<view class="middle-top">
					<view class="merchant-name">
						{{currentMerchant.name||''}}
					</view>
					<u-transition :show="showTransition" :duration='600'>
						<view class="merchant-info-bottom">
							<view class="merchant-bottom-left">
								<view>
									<text style="color: #00B42B;">营业时间</text>
								</view>
								<view>
									{{currentMerchant.businessStart?currentMerchant.businessStart.substr(0,5):''}}-
									 {{currentMerchant.businessEnd?currentMerchant.businessEnd.substr(0,5):''}}
								</view>
							</view>
							<view class="merchant-bottom-right">
								<view class="merchant-address">
									{{currentMerchant.address||''}}
								</view>
								<view class="merchant-nav" @click="navigation(currentMerchant)">
									<view class="merchant-bg">
										<image src="@/static/img/combination/nav.png" style="width: 28rpx;height: 28rpx;"></image>
									</view>
									<view>导航</view>
								</view>
								<view class="merchant-phone" @click="makePhone(currentMerchant.phone)">
									<view class="merchant-bg"> 
										<image src="@/static/img/combination/phone.png" style="width: 28rpx;height: 28rpx;"></image>
									</view>
									<view>电话</view>
								</view>
							</view>
						</view>
					</u-transition>
				</view>
				
				<!-- 列表部分 -->
				<view class="middle-bottom" id="middle-bottom">
					<!-- 左边滚动条 -->
					<scroll-view class="scroll-left" :style="{height:scrollHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y >
						<view class="middle-left">
							<view :id="'merchant-tab'+index" class="merchant-tab" v-for="(item,index) in scenicList" :key="index" @click="merchantTabChange(index)" :class='{on:merchantIndex==index}'>
								{{item.name}}
							</view>
						</view>
					</scroll-view>
					<!-- 右边滚动条 -->
					<!-- enhanced和bounces是处理ios系统橡皮筋回弹bug -->
					<scroll-view class="scroll-right" @scroll="scrollRight" :style="{height:rightHeight+'px'}" :scroll-into-view="toViewRight" scroll-y enhanced :bounces="false">
						<view class="middle-right">
							<checkbox-group @change="checkboxChange" class="checkbox-box" >
								<view class="merchantlist-wrap" :id="'merchant'+index" v-for="(item, index) in scenicList" :key="index">
									<view class="merchantlist">
										<view class="merchantlist-title" @click="clikDetail(item.id)">
											<view class="merchantlist-name">
												<text>{{ item.name }}</text>
												<template v-if="item.couponVoList && item.couponVoList.length > 0">
													<image src="@/static/img/scenic/coupon.png"></image>
													<text class="merchantlist-coupon"> 劵惠 </text>
												</template>
											</view>
															
											<view class="merchantlist-detail">
												<!-- <text v-if="showDistance">距您{{ item.distance ? parseFloat((item.distance / 1000).toFixed(2)) : 0 }}km</text> -->
												<u-icon name="arrow-right" style="margin-left: 4rpx;" size='26' color='#B4B4B4'></u-icon>
											</view>
										</view>
															
										<label v-for="(items, a) in item.productListCopy" :key="a" :class="{ off: items.status == 2 }">
											<view class="product" :class="{ on: items.ifChangeBg }">
												<view class="product-left">
													<checkbox
														style="transform: scale(0.8)"
														class="blue"
														:disabled="items.status == 2"
														:value="JSON.stringify(items)"
														:checked="items.ifChecked"
													/>
												</view>
												<view class="product-right">
													<view class="product-name">
														<text>{{ items.name }}</text>
														<text class="product-status" v-if="items.status == 2">{{ items.statusName }}</text>
													</view>								
													<view class="product-rule">
														<!-- <text>随买随用</text> -->
														<template v-if="items.productRefundRuleVo">
															<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text>
															<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text>
															<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text>
														</template>
														<text> 无需取票 </text>
													</view>
													<view class="product-price">
														<view style="display: flex;">
															<text @click.stop="showBuyKnow(items)">购买须知</text>
															<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
														</view>
														<view class="product-sell"> 
															<text style="font-size: 28rpx">¥</text>
															<!-- 页面加载的时候，有券显示原价，没有券，或者券已领取显示售价 -->
															<text v-if="showSmallCoupon">{{ items.originalPrice}}</text>
															<!-- 显示售价 -->
															<text v-else>{{ items.sellingPrice}}</text>
														</view>
													</view>
												</view>
											</view>
										</label>
									</view>
									<!-- <view class="product-more" v-if="index > 0 && item.productList.length > 2">
										<view v-if="item.productListCopy.length != item.productList.length" @click="showMoreProduct(item)">
											更多
											<u-icon name="arrow-down" size='24' color='#B4B4B4'></u-icon>
										</view>
							
										<view v-else @click="retractProduct(item)">
											收起
											<u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon>
										</view>
									</view> -->
								</view>
							</checkbox-group>
							<view class="no-more">
								已经到底啦
							</view>
							<!-- <u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty> -->
						</view>
					</scroll-view>
				</view>
				
				
			</view>
			<view class="bottom">
				<view class="bottom-left" @click="showCustomer()">
					<u-icon name="chat" size="42"></u-icon>
					客服
				</view>
				<view class="bottom-right">
					<view class="bottom-choose">
						<view class="bottom-more" v-show="chooseProduct.length > 0">
							组合购更便捷
							<text class="bottom-triangle"></text>
						</view>
						<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
							<text style="margin-right: 10rpx;">已选产品 </text>
							<text class="bottom-number">
								{{ chooseProduct.length }}
							</text>
							<u-icon name="arrow-up" size="32"></u-icon>
						</view>
					</view>
					<view class="bottom-btn" @click="goFillorder()">
						去预定
					</view>
				</view>
				
			</view>
		</scroll-view>
		<!-- 客服组件 -->
		<customer :scenicList="scenicList" ref="customer"></customer>
		<!-- 购买须知 -->
		<buyKnow :buyKnowData="buyKnowData" ref="buyKnow"></buyKnow>
		<!-- 产品明细 -->
		<detail :chooseProduct="chooseProduct" ref="detail"></detail>
		<!-- 商户详情 -->
		<merchantDetail :detailData='detailData' ref='merchantDetail'></merchantDetail>
		<!-- 模态框1，用于是否更改产品 -->
		<u-modal :show="showModal1" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" :showCancelButton="true">
		</u-modal>
		<!-- 模态框2，用于联票不能组合购买 -->
		<u-modal :show="showModal2" @confirm="notBuyConfirm" title="提示" content="联票产品不能进行多产品购买" >
		</u-modal>
		<image class="suodaoImg"  v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image>
		<!-- 系统无法访问时弹窗 -->
		<u-popup :show="showTip" :round="20">
			<view style="padding: 300rpx 0;text-align: center;font-size: 32rpx;font-weight: bold;">
				<view>
					当前购票人数过多!
				</view>
				<view style="margin-top: 20rpx;">
					请到现场窗口进行购买，或稍后重试
				</view>
			</view>
		</u-popup>
		<!-- 自定义导航栏 -->
		<!--#ifdef MP-WEIXIN-->
		<view class="tabbar" :style="{height:tabbarHeight+'px',opacity:tabbarOpacity,maxHeight:(topHeight+40)+'px'}" >
			<view class="tabbar-title" :style="{top:(topHeight-32)+'px'}">
				<u-icon @click="goTop()" name="arrow-left" color="#333333" size="48"></u-icon>
				<text>选择产品</text>
				<text></text>
			</view>
		</view>
		<!-- #endif -->
		<!-- 券部分 -->
		<view>
			<!-- 小券 -->
			<image v-if="showSmallCoupon" @click="showBigCoupon=true" src="/static/img/combination/smallCoupon.png" style="position: fixed;bottom: 200rpx;right:80rpx;width:120rpx;height: 122rpx;"></image>
			<!-- 大券 -->
			<view v-if="showBigCoupon" @click="showBigCoupon=false,showSmallCoupon=false" style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;background:rgba(0, 0, 0, 0.5);z-index: 10;display: flex;align-items: center;">
				<view style="width: 100%;">
					<view style="display:flex;justify-content: center;">
						<image src="/static/img/combination/bigCoupon.png" style="width: 85%;" mode="widthFix"></image>
					</view>
					<!-- <view style="display: flex;justify-content: center;">
						<u-icon name="close-circle-fill" color="#333333" size="56"></u-icon>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import customer from '@/components/customer.vue' //客服
import buyKnow from '@/components/buyKnow.vue' //购买须知
import detail from './components/detail.vue' //明细
import UWaterfall from '@/uview-ui/components/u-waterfall/u-waterfall.vue'
import merchantDetail from '@/components/merchantDetail' //详情弹窗
export default {
  components: {
    customer,
    buyKnow,
    detail,
    UWaterfall,
    merchantDetail
  },
  data() {
    return {
      interval:3000,//轮播时间
      currentMerchant:'',//当前入口商家信息
      showTip:false,//系统调不通或者崩了跳出弹窗
      detailData:'',//详情数据
      showSuodaoImg:false,//索道耳麦图片是否显示隐藏
      companyId:'',//公司Id
      merchantId: '', //商户Id
      groupId: '', //组合Id
      groupChannelId: '', //组合渠道Id
      channelId:'',//渠道Id
      currentNum:0,//轮播图下标
      imgList: [], //图片列表
      scenicList:[], //景区数据
      showDistance: false, //定位成功显示距离
      buyKnowData: '', //购买须知数据
      chooseProduct: [], //选中的产品
      showModal1: false, //模态框1，用于是否更改产品
      showModal2: false, //模态框2，用于联票不能组合购买
      chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
      merchantIndex:0,//选中的商家下标
      rightHeight:0,//右边列表盒子高度
      heightArr:[],//元素高度数组
      toViewRight:'',//右边滚动到某个元素
      toViewLeft:'',//左边滚动到某个元素
      toViewFull:'',//全屏滚动到某个元素
      showTransition:true,//控制动画显示隐藏
      scrollHeight:0,//左边滚动条scroll-view高度
      originHeight:0,//右边滚动条原本高度
      middleTopHeight:0,//中间盒子上部分高度
      topHeight:0,//上面状态栏+上面导航栏总高度
      tabbarOpacity:0,//导航栏透明度
      tabbarHeight:'',//导航栏高度
      showSmallCoupon:false,//显示小券
      showBigCoupon:false,//显示大券
    }
  },
  watch: {
    //选中产品的数量变化
    chooseProduct: {
      handler(newValue, oldValue) {
        //当选中产品时
        if (newValue.length > oldValue.length) {
          //一、联票不允许组合
          if(this.chooseProduct.length>1){
					  if(this.chooseProduct.find(item=>item.ticketType==2)){
					    this.showModal2=true
					    return
					  }
          }
          //二、该产品是否支持多产品购买
          let product = newValue[newValue.length - 1]//找到当前选中的产品
          //商家一级
          let merchant = ''
          //通过产品一级找到商家一级
          this.scenicList.forEach(item => {
            if (item.id == product.merchantId) {
              merchant = item
            }
          })
          //当选中产品的景区有2个以上选中产品时
          let number = 0
          this.chooseProduct.forEach(item => {
            if (merchant.id == item.merchantId) {
              number += 1
            }
          })
          if (product.isMoreBuy !== 0) {
            if (number > 1) {
              //显示确认弹窗
              this.showModal1 = true
              //当前选中的景区产品，用于确定以及取消方法取值
              this.chooseMerchantProduct = product
            }
          } else {
            //支持多产品购买时，删除该景区其他产品不支持多产品购买的产品
            this.chooseProduct.forEach((item, index) => {
              if (merchant.id == item.merchantId && item.isMoreBuy !== 0) {
                //取消选中状态和选中背景颜色
                this.scenicList.forEach(item2 => {
                  item2.productList.forEach(item3 => {
                    if (item.id == item3.id) {
                      item3.ifChecked = false
                      item3.ifChangeBg = false
                    }
                  })
                })
                delete this.chooseProduct[index]
              }
            })
            this.chooseProduct = this.chooseProduct.filter(function (val) {
              return val
            })
          }
        }
      },
      deep: true,
      immediate: false
    }
  },
  onLoad(option) {
    //如果是索道
    if(this.merchantId=='z0015605022691a5945bbe463141668c'){
		  this.showSuodaoImg=true
		  setTimeout(() => {
		    this.showSuodaoImg = false
		  }, 2500)
    }
    //获取公司Id,保存到本地，支付等逻辑需要入口companyId
    this.companyId=this.$commonjs.getKey(option,'companyId')||''
    this.merchantId = this.$commonjs.getKey(option,'merchantId')|| ''
    this.channelId=this.$commonjs.getKey(option,'channelId')||''
    this.groupId=this.$commonjs.getKey(option,'groupId')||''
    this.groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||''
    let statusBarHeight = uni.getWindowInfo().statusBarHeight||0 // 状态栏高度
    let capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
    if(capsule){
      //防止部分手机获取不到胶囊信息时，出现页面抖动bug，加上该逻辑
      this.topHeight =statusBarHeight+(capsule.top - statusBarHeight) * 2 + capsule.height//整个上部分总高度
    }else{
      this.topHeight=statusBarHeight
    }
    this.giveCoupon()
  },
  onShow() {
    //清空之前选中的数据以及状态
    this.detailData=''
    this.chooseProduct=[]
    if(this.$refs.merchantDetail){
      //解决支付宝小程序报错问题
      this.$refs.merchantDetail.showPop=false
    }
    if(this.$refs.detail){
      //解决支付宝小程序报错问题
      this.$refs.detail.showPop = false
    }
    let newTimestamp=uni.getStorageSync('newTimestamp')||''
    let token = uni.getStorageSync('token')
    if (token) {
      let latitude = ''
      let longitude = ''
      //判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求
      if(newTimestamp){
			  if(Date.now()>newTimestamp){
			    this.initList(latitude, longitude)
			  }else{
			    this.showTip=true
			  }
      }else{
			  this.initList(latitude, longitude)
      }
      // uni.getLocation({//定位暂时注释
      //   success: res => {
      //     let latitude = res.latitude //纬度
      //     let longitude = res.longitude //经度
      //     this.showDistance = true
      //     //判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求
      //     if(newTimestamp){
      //       if(Date.now()>newTimestamp){
      //         this.initList(latitude, longitude)
      //       }else{
      //         this.showTip=true
      //       }
      //     }else{
      //       this.initList(latitude, longitude)
      //     }
      //   },
      //   fail: res => {
      //     let latitude = ''
      //     let longitude = ''
      //     //判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求
      //     if(newTimestamp){
      //       if(Date.now()>newTimestamp){
      //         this.initList(latitude, longitude)
      //       }else{
      //         this.showTip=true
      //       }
      //     }else{
      //       this.initList(latitude, longitude)
      //     }
      //   }
      // })
    }
  },
  methods: {
    //---商品列表
    initList(latitude, longitude) {
		  let data = {
		    channelId: this.channelId, //渠道Id
		    companyId: this.companyId, //公司Id
		    merchantId: this.merchantId, //商户id
		    groupId: this.groupId, //组合Id
		    openid: uni.getStorageSync('openid')||'',
        latitude,
        longitude
		  }
      this.scenicList=[]
      // 获取当前时间戳
      let currentTime = Date.now()
      // 设置需要添加的分钟数
      let minutesToAdd =5 // 这里假设要添加5分钟
		  this.$request('/scenic/groupGood/findGroupGoodProductList', data).then(res => {
        uni.removeStorageSync('newTimestamp')
		    if (res.code == '00') {
          let merchantList=res.data.merchantList||[]
          merchantList.forEach(item=>{
            if(item.type==1&&item.productList.length>0){
              //type=1为景区
              this.scenicList.push(item)
            }
          })
		      this.scenicList.forEach((item, index) => {
		        //获取当前景区图片,把当前景区放在第一位
		        if (item.id == this.merchantId) {
		          this.imgList = item.imgList
              //视频排在图片前面
              this.imgList.sort((a,b)=>{
                return b.type-a.type
              })
              //类型转化，用于视频播放
              this.imgList.forEach(item2=>{
                if(item2.type==1){
                  //图片
                  item2.type='image'
                }
                if(item2.type==2){
                  //如果有视频，轮播时间改为60秒
                  item2.type='video'
                  this.interval=100*1000
                }
              })
		          this.scenicList.splice(index, 1)
		          this.scenicList.unshift(item)
		          item.productListCopy = item.productList
              //获取当前商家信息
              this.currentMerchant=item
		        } else {
		          // item.productListCopy = item.productList.slice(0, 2)不要更多，暂时注释
              item.productListCopy = item.productList
		        }
		        //预订时间为当天时，当前时间大于最早预订时间显示未开售，当前时间大于最晚预订时间显示已售罄
		        let times = new Date().Format('hh:mm:ss')
		        let timeNumber = parseInt(this.$commonjs.changeTime(times)) //将当前时间转化为数字
		        item.productList.forEach(item2 => {
		          item2.timeNumber1 = parseInt(this.$commonjs.changeTime(item2.earlyBookTime))
		          item2.timeNumber2 = parseInt(this.$commonjs.changeTime(item2.bookTime))
		          if (item2.aheadBookDays == 0) {
		            if (item2.status == 2) {
		              item2.statusName = '已售罄'
		            } else {
		              if (timeNumber < item2.timeNumber1) {
		                item2.status = 2
		                item2.statusName = '未开售'
		              }
		              if (timeNumber > item2.timeNumber2) {
		                item2.status = 2
		                item2.statusName = '已售罄'
		              }
		            }
		          }
		        })
		      })
          this.$nextTick(() => {
            //清空数组
            this.heightArr=[]
            //获取中间盒子需要滚动时的高度
            // #ifdef MP-WEIXIN
            uni.createSelectorQuery().in(this).select('.middle-top').boundingClientRect(data => {
						  if(data){
						    this.middleTopHeight=data.height
						  }
            }).exec()
            // #endif
						
            // #ifdef MP-ALIPAY
            uni.createSelectorQuery().select('.middle-top').boundingClientRect(data => {
              if(data){
                this.middleTopHeight=data.height
              }
            }).exec()
            // #endif
            //获取中间盒子原本高度
            // #ifdef MP-WEIXIN
            uni.createSelectorQuery().in(this).select('.middle-right').boundingClientRect(data => {
						  //获取右边盒子原本高度,默认右边盒子等于原本高度，滚动之后等于滚动高度
						  if(data){
						    this.originHeight=data.height
						    this.rightHeight=data.height
						  }
            }).exec()
            // #endif
						
            // #ifdef MP-ALIPAY
            uni.createSelectorQuery().select('.middle-right').boundingClientRect(data =>{
						  //获取右边盒子原本高度,默认右边盒子等于原本高度，滚动之后等于滚动高度
						  if(data){
						    this.originHeight=data.height
						    this.rightHeight=data.height
						  }
            }).exec()
            // #endif
						
            //不要这样  var query = uni.createSelectorQuery() query.in(this)放入循环里面会多次循环
            for(let i=0;i<this.scenicList.length;i++){
              // #ifdef MP-WEIXIN
              uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
							  //获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
							  if(data){
							    if(i==0){
							      //取整，由于高度多数为小数，防止点击左边，滚动右边时出现bug
							      this.heightArr.push(parseInt(data.height))
							    }else{
							      this.heightArr.push(parseInt(data.height)+this.heightArr[i-1])
							    }
							  }
              }).exec()
              // #endif
						  // #ifdef MP-ALIPAY
						  uni.createSelectorQuery().select(`#merchant${i}`).boundingClientRect(data => {
						    //获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
						    if(data){
						      if(i==0){
						        //取整，由于高度多数为小数，防止点击左边，滚动右边时出现bug
						        this.heightArr.push(parseInt(data.height))
						      }else{
						        this.heightArr.push(parseInt(data.height)+this.heightArr[i-1])
						      }
						    }
						  }).exec()
						  // #endif
            }
            let windowHeight=uni.getWindowInfo().screenHeight||1100
            //60为底部高度
            this.scrollHeight=windowHeight-60-this.topHeight
          })
		    } else {
		      uni.showToast({
		        title: res.message,
		        icon: 'none'
		      })
          if(res.code=='100'){
            //系统性能接近瓶颈，关闭请求
            this.showTip=true
            // 当前时间加上添加分钟数
            let timestamp1 = currentTime + (minutesToAdd * 60 * 1000)
            //后端返回的时间
            let timestamp2=Date.parse(JSON.parse(res.message).stopTime)
            let newTimestamp=''
            if(currentTime>timestamp2){
              //当前时间大于后端返回时间，以当前时间加上分钟数为准
              newTimestamp = timestamp1
            }
            if(currentTime<=timestamp2){
              //当前时间小于等于后端返回时间，取后端返回时间和当前时间加上的分钟数的最小值
              newTimestamp = Math.min(timestamp1,timestamp2)
            }
            uni.setStorageSync('newTimestamp', newTimestamp)
          }
		    }
		  }).catch(error => {
        this.showTip=true
        // 计算新的时间戳
        let newTimestamp = currentTime + (minutesToAdd * 60 * 1000)
        uni.setStorageSync('newTimestamp', newTimestamp)
      })
    },
    //---送券
    giveCoupon() {
		  let data = {
		    pageCode:'SD_GROUP',//页面码
		    marketingStatus: 1,//状态
		    userId: uni.getStorageSync('userId')||'',
		    openid: uni.getStorageSync('openid')||'',
        companyId:this.companyId,//公司Id
		  }
		  this.$request('scenic/market/findPageMarket', data).then((res) => {
        if (res.data && res.data.length > 0) {
          //有券时显示券
          this.showSmallCoupon=true
          this.showBigCoupon=true
        }
		  })
    },
    //---初始化详情
    initDetail(merchantId){
		  let data={
		    userId:uni.getStorageSync('userId')||'',
		    openid:uni.getStorageSync('openid')||'',
		    id:merchantId,//商户id
		    isDetail:1,//商户详情
		  }
		  this.detailData=''
		  this.$request('scenic/user/merchant/findDetailInfo',data).then((res)=>{
		    if(res.code=='00'){
		      this.detailData=res.data
		      //解决详情里面图片太宽超出屏幕宽度出现滚动条的问题
		      if(this.detailData.introduce){
		        this.detailData.introduce=this.detailData.introduce.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
		      }
		      
		    }else{
		      uni.showToast({
		        title: res.message,
		        icon: 'none'
		      })
		    }
		  })
    },
    //---商家下标切换
    merchantTabChange(index){
      //点击左边，全屏先置顶
      //为了让scrollview能检测到滚动数据的变化
      this.toViewFull='aaa'
      // 数据更新后，视图的更新是异步的,防止点击无效
      this.$nextTick(()=>{
        this.toViewFull='middle-bottom'
      })
      //点击左边，右边可滚动
      this.merchantIndex=index
      this.rightHeight=this.scrollHeight
      //为了让scrollview能检测到滚动数据的变化
      this.toViewRight='aaa'
      // 数据更新后，视图的更新是异步的,防止第一次点击无效
      this.$nextTick(()=>{
        this.toViewRight='merchant'+index
      })
    },
    //---展示明细弹窗
    showDetail() {
		  this.$refs.detail.showPop = true
    },
    //---全屏滚动
    scrollFull(e){
      setTimeout(()=>{
        //由于下面三个值可能在这个这个方法之后生成，故加上这个判断条件
        if(this.middleTopHeight&&this.scrollHeight&&this.originHeight){
          let height=0
          let scrollTop=e.detail.scrollTop
          let selectFun=(data)=>{
					  if(data){
						  //10为中间盒子的top-10,50是一个安全值，防止个别手机出现抖动，并可以防止滑动时会出现往下抖动一次的效果
						  height=data.height+this.middleTopHeight-10-this.topHeight-50
						  let opacity=scrollTop/150
						  this.tabbarOpacity=parseFloat(opacity.toFixed(2))
              if(this.tabbarOpacity<0.1){
                //出现小数时，防止有残影
                this.tabbarOpacity0
              }
					    //下面值取整数，防止部分手机取值太多小数，出现抖动的bug
						  if(parseInt(scrollTop)>=parseInt(height)){
						    //中间上部分固定，中间下部分可滚动，全屏不滚动
						    this.rightHeight=this.scrollHeight
                //动态改变导航栏高度
                uni.createSelectorQuery().in(this).select('.middle-top').boundingClientRect(data => {
								  this.tabbarHeight=data.bottom
                }).exec()
						  }else{
						    //中间上部分不固定，中间下部分不可滚动，全屏滚动'
						    this.rightHeight=this.originHeight
						  }
					  }
          }
          // #ifdef MP-WEIXIN
          uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
					  selectFun(data)
          }).exec()
          // #endif
          // #ifdef MP-ALIPAY
          uni.createSelectorQuery().select('.banner').boundingClientRect(data => {
					  selectFun(data)
          }).exec()
          // #endif
        }
        
      },5)
    },
    //---右边滚动事件
    scrollRight(e) {
      setTimeout(()=>{
        let scrollTop=e.detail.scrollTop
        //通过滚动值获取下标
        this.heightArr.forEach((item,i)=>{
				  if(i==0){
				    if(0<=scrollTop&&scrollTop<item){
				      this.merchantIndex=i
				      this.toViewLeft='merchant-tab'+i
				    }
				  }else{
				    if(this.heightArr[i-1]<=scrollTop&&scrollTop<item){
				      this.merchantIndex=i
				      this.toViewLeft='merchant-tab'+i
				    }
				  }
        })
      },5)
			 
    },
    //---回到顶部
    goTop(){
      this.rightHeight=this.originHeight
      //为了让scrollview能检测到滚动数据的变化
      this.toViewFull='aaa'
      this.$nextTick(()=>{
        this.toViewFull='banner'
      })
    },
    //---导航
    navigation(merchant){
		  uni.openLocation({
		    latitude:merchant.latitude,
		    longitude:merchant.longitude,
		    name:merchant.name,
		    address:merchant.address,
		    success: function () {
		      
		    }
		  })
    },
    //---拨打电话
    makePhone(phoneNumber) {
		  uni.makePhoneCall({
		    phoneNumber
		  })
    },
    //---展示客服组件
    showCustomer() {
      this.$refs.customer.showPop = true
    },
    //---展示购买须知
    showBuyKnow(data) {
      this.buyKnowData = data
      this.$refs.buyKnow.showPop = true
    },
    //---点击详情
    clikDetail(merchantId){
		  this.$refs.merchantDetail.showPop=true
		  this.initDetail(merchantId)
    },
		
    //---展示更多产品
    showMoreProduct(item) {
      item.productListCopy = item.productList
      this.$forceUpdate()
    },
    //---收起产品
    retractProduct(item) {
      item.productListCopy = item.productList.slice(0, 2)
      this.$forceUpdate()
    },
    //---多选框变化
    checkboxChange(e) {
      //如果有券没有领取，直接显示券，并领取
      if(this.showSmallCoupon){
        this.showBigCoupon=true
      }
      let value = e.detail.value
      let arr = []
      value.forEach(item => {
        arr.push(JSON.parse(item))
      })
      this.chooseProduct = arr
      //判断是否选中产品，选中产品的背景颜色需要变化
      this.scenicList.forEach(item => {
        item.productList.forEach(item2 => {
          item2.ifChangeBg = false
          this.chooseProduct.forEach(item3 => {
          	if (item2.id == item3.id) {
          		item2.ifChangeBg = true
          		//解决是否支持多产品购买弹窗2次之后，选中状态错误bug,需要在选中时修改状态
              //#ifdef MP-WEIXIN
              //由于支付宝小程序会出现bug,所以只在微信小程序里面执行该代码
              item2.ifChecked = true
              //#endif
          	}
          })
        })
      })
    },
    //---不支持多选产品，选择确定事件
    chooseConfirm() {
      this.chooseProduct.forEach((item, index) => {
        //删除选中产品以外的其他所有产品
        if (this.chooseMerchantProduct.merchantId == item.merchantId && JSON.stringify(item) != JSON.stringify(this.chooseMerchantProduct)) {
          //取消选中状态和选中背景颜色
          this.scenicList.forEach(item2 => {
            item2.productList.forEach(item3 => {
              if (item.id == item3.id) {
                item3.ifChecked = false
                item3.ifChangeBg = false
              }
            })
          })
          delete this.chooseProduct[index]
        }
      })
      this.chooseProduct = this.chooseProduct.filter(function (val) {
        return val
      })
      this.showModal1 = false
    },
    //---不支持多选产品，选择取消事件
    chooseCancel() {
      //删除选中产品
      this.chooseProduct.forEach((item, index) => {
        if (item.id === this.chooseMerchantProduct.id) {
          //取消选中状态和选中背景颜色
          this.scenicList.forEach(item2 => {
            item2.productList.forEach(item3 => {
              if (item.id == item3.id) {
                item3.ifChecked = false
                item3.ifChangeBg = false
              }
            })
          })
          this.chooseProduct.splice(index, 1)
        }
      })
      this.showModal1 = false
    },
    //---联票产品不支持组合购买
    notBuyConfirm(){
      //获取最新的一个产品，删除最新的产品
      let product=this.chooseProduct[this.chooseProduct.length-1]
      //取消选中状态和选中背景颜色
      this.scenicList.forEach(item2 => {
			  item2.productList.forEach(item3 => {
			    if (product.id == item3.id) {
			      item3.ifChecked = false
			      item3.ifChangeBg = false
			    }
			  })
      })
      this.chooseProduct.splice(this.chooseProduct.length-1,1)
      this.showModal2=false
    },
    //---跳转填写订单页面
    goFillorder() {
      for (let i = 0; i < this.chooseProduct.length; i++) {
        let item = this.chooseProduct[i]
        if (item.status == 2) {
          uni.showToast({
            title: '售罄产品不能进行购买',
            icon: 'none'
          })
          return
        }
      }
      if (this.chooseProduct.length == 0) {
        uni.showToast({
          title: '请选择至少一个产品',
          icon: 'none'
        })
        return
      } else if (this.chooseProduct.length == 1) {
        let query = '?merchantId=' + this.chooseProduct[0].merchantId + '&productId=' + this.chooseProduct[0].id + '&orderSource=3'
        if (this.chooseProduct[0].ticketType == 2) {
          //联票
          uni.navigateTo({
            url: '/pages/scenic/scenicJointOrder/scenicJointOrder' + query
          })
        } else {
          //普通票
          uni.navigateTo({
            url: '/pages/scenic/scenicSingleOrder/scenicSingleOrder'+ query
          })
        }
      } else {
        let productIdList = this.chooseProduct.map(item => {
          return item.id
        })
        let query ='?productIdList=' + JSON.stringify(productIdList) + '&groupId=' + this.groupId + '&groupChannelId=' + this.groupChannelId + '&orderSource=3'
        // uni.navigateTo({
        //   url: '/pages/combination/combiOrder/combiOrder' + query
        // })
        // //如果有联票
			 if(this.chooseProduct.find(item=>item.ticketType==2)){
          uni.navigateTo({
            url: '/pages/combination/combiOrder/combiOrder' + query
          })
			 }else{
          uni.navigateTo({
            url: '/pages/scenic/scenicCombiOrder/scenicCombiOrder' + query
          })
			 }
      }
    },
    onShareAppMessage(options) {
      let url='pages/combination/distributionCombiChoose/distributionCombiChoose'
      return {
        title: '组合购更便捷',
        path: `${url}?channelId=${this.channelId}&merchantId=${this.merchantId}&groupId=${this.groupId}&groupChannelId=${this.groupChannelId}&companyId=${this.companyId}`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
	height: 100%;
	background: #f7f7f7;
}
.middle {
	padding-bottom:60px;
	position: relative;
	top: -10px;
}
// 中间上部分
.middle-top{
	width: 100%;
	background: #ffffff;
	border-radius: 24rpx 24rpx 0 0;
	padding:10px;
	z-index: 1;
	overflow: hidden;
}
.merchant-name{
	font-size: 18px;
	font-weight: 600;
}
.merchant-info-bottom{
	margin-top: 12rpx;
	display: flex;
	overflow: hidden;
}
.merchant-bottom-left{
	width: 220rpx;
	height: 110rpx;
	margin-right: 20rpx;
	padding:18rpx 20rpx;
	background: #F7F8FA;
	border-radius: 12rpx;
	font-weight: 600;
	view:first-child{
		font-size: 26rpx;
	}
	view:last-child{
		font-size: 24rpx;
		margin-top: 6rpx;
	}
}
.merchant-bottom-right{
	flex: 1;
	display: flex;
	padding: 0 20rpx;
	align-items: center;
	background: url('@/static/img/combination/mapbg.png') no-repeat;
	background-size: 100% 100%;
}
.merchant-address{
	flex: 1;
	font-size: 26rpx;
	font-weight: 600;
}
.merchant-nav{
	margin: 0 36rpx;
	font-size: 20rpx;
	text-align: center;
}
.merchant-phone{
	font-size: 20rpx;
	text-align: center;
}
.merchant-bg{
	width: 52rpx;
	height: 52rpx;
	background: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
//中间下部分
.middle-bottom{
	display: flex;
	background: #f7f7f7;
	z-index: 1;
}
.scroll-left{
	flex-shrink: 0;
	padding: 12px 24rpx 0 0;
	box-sizing: border-box;
	width: 154rpx;
}
.middle-left{
	font-size: 24rpx;
	background: #ffffff;
	border-radius: 0 20rpx 20rpx 0;
	text-align: center;
	min-height: 100%;
}
.merchant-tab{
	padding: 32rpx 16rpx;
}
.merchant-tab.on{
	background: linear-gradient( 124deg, #FF9F00 0%, #FE6600 100%);
	border-radius: 0px 20rpx 20rpx 0px;
	color: #ffffff;
}
.middle-right{
	flex: 1;
}
.merchantlist-wrap{
	background: #f7f7f7;
	padding-top:12px;
}
.merchantlist {
	border-radius: 20rpx;
	background: #ffffff;
	margin-top: 12px;
	padding: 24rpx 0 0 24rpx;
}
.middle-right view.merchantlist:first-child{
	margin-top: 0;
}
.merchantlist label{
	width: 100%;
}
.merchantlist label.off .product {
	color: #999999;
}
.merchantlist label.off .product-name {
	color: #999999;
}
.merchantlist-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24rpx 16rpx 0;
}
.merchantlist-name {
	flex: 1;
	font-size: 36rpx;
	margin-right: 10rpx;
	font-weight: bold;
	image {
		width: 36rpx;
		height: 36rpx;
		position: relative;
		top: 6rpx;
		margin: 0 8rpx;
	}
}
.merchantlist-coupon {
	color: $red;
	font-size: 24rpx;
}
.merchantlist-detail {
	color: $grey;
	font-size: 24rpx;
	display: flex;
}
.product {
	padding:24rpx 24rpx 24rpx 0;
	background: #ffffff;
	border-radius: 8rpx;
	display: flex;
	border-bottom: 1px solid #f5f5f5;
}
.product.on {
	background: #e2eeff;
}
.product-left {
	margin-right: 10rpx;
}
.product-right {
	flex: 1;
}
.product-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #191919;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.product-status {
	flex-shrink: 0;
	padding: 6rpx 12rpx;
	border: 2px solid #f40000;
	color: #f40000;
	font-size: 24rpx;
	border-radius: 4rpx;
	transform: rotate(-25deg);
	position: relative;
	top: 30rpx;
	right: 60rpx;
}
.product-rule{
	font-size: 24rpx;
	color: #999999;
	margin-top: 12rpx;
}
.product-rule text:not(:last-child) ::after {
	display: inline-block;
	content: '';
	height: 22rpx;
	margin: 0 14rpx;
	background: #ccc;
	width: 1px;
	position: relative;
	top: 2rpx;
}
.product-price{
	display: flex;
	margin-top: 6rpx;
	align-items: center;
	justify-content: space-between;
	font-size: 24rpx;
	color: #999999;
}
.product-sell {
	font-size: 40rpx;
	color: $red;
	font-weight: bold;
	margin-left: 10rpx;
}
.product-more {
	padding-top:24rpx;
	font-size: 20rpx;
}
.product-more>view{
	display: flex;
	justify-content: center;
}
.no-more{
	height: 600rpx;
	margin-top:100rpx;
	text-align: center;
	font-size:24rpx;
	color: #666;
}
.bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 60px;
	background: #fff;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32rpx 10rpx 32rpx;
}
.bottom-left{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 24rpx;
}
.bottom-right{
	display: flex;
	align-items: center;
}
.bottom-choose {
	position: relative;
	padding: 0 40rpx;
}
.bottom-more {
	position: relative;
	top: -40rpx;
	background: #f40000;
	border-radius: 28px;
	opacity: 0.64;
	padding: 10rpx 20rpx;
	color: #ffffff;
}
.bottom-triangle{
	width: 14rpx;
	height: 14rpx;
	display: inline-block;
	background: #f40000;
	opacity: 0.64;
	position: absolute;
	right: 52rpx;
	bottom: -7rpx;
	transform: rotate(45deg);
}
.bottom-detail {
	position: relative;
	text-align: center;
	display: flex;
	justify-content: center;
}
.bottom-number {
	display: inline-block;
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	text-align: center;
	background: #f40000;
	color: #ffffff;
	font-weight: bold;
	margin:0 10rpx;
}
.bottom-btn {
	display: inline-block;
	width: 200rpx;
	height: 80rpx;
	background: linear-gradient( 119deg, #FFA000 0%, #FE6600 100%);
	border-radius: 40rpx;
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	line-height: 80rpx;
	color: #ffffff;
}
.suodaoImg{
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.tabbar{
	background: #fff;
	position: fixed;
	top: 0;
	width: 100%;
	opacity: 0;
	z-index: 10;
}
.tabbar-title{
	position: absolute;
	text-align: center;
	display: flex;
	width: 100%;
	font-size: 32rpx;
	font-weight: 500;
	color: #000000;
	padding: 0 24rpx;
	justify-content: space-between;
}
</style>
