<!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
<template>
	<view class="wrap">
		<scroll-view @scroll="scroll" style="height: 100%;" scroll-y>
			<view class="banner">
				<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" 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="detail">
					
				</view>
				<checkbox-group @change="checkboxChange" class="checkbox-box">
					<view class="merchant" v-for="(item, index) in scenicList" :key="index">
						<view class="merchant-title" @click="clikDetail(item.id)">
							<view class="title-left">
								<text>{{ item.name }}</text>
								<template v-if="item.couponVoList && item.couponVoList.length > 0">
									<image src="@/static/img/scenic/coupon.png"></image>
									<text class="title-coupon"> 劵惠 </text>
								</template>
							</view>

							<view v-if="showDistance" class="title-right">
								距您{{ item.distance ? parseFloat((item.distance / 1000).toFixed(2)) : 0 }}km
								<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-price">
										<view style="font-size: 24rpx;display: flex;">
											<text class="product-rule" 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>
											</text>
											<text class="product-rule"> 无需取票 </text>
											<text @click.stop="showBuyKnow(items)">购买须知</text>
											<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
										</view>
										<view>
											<text class="product-orange"> ¥{{ items.originalPrice }} </text>
											<text class="product-sell"> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} </text>
										</view>
									</view>
								</view>
							</view>
						</label>

						<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>
				<u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty>
			</view>
			<view class="bottom">
				<view class="bottom-left" @click="showCustomer()">
					<u-icon name="chat" size="36"></u-icon>
					客服
				</view>
				<view class="bottom-middle">
					<view class="bottom-more" v-show="chooseProduct.length > 0">
						组合购更优惠
						<text class="bottom-three"></text>
					</view>

					<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
						<text style="margin-right: 10rpx;"> 明细 </text>
						<u-icon name="arrow-up" size="32"></u-icon>
						<text class="bottom-number">
							{{ chooseProduct.length }}
						</text>
					</view>
				</view>
				<view class="bottom-right">
					<text class="btn" @click="goFillorder()">去预定</text>
				</view>
			</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>
			<!-- 模态框 -->
			<u-modal :show="showModal" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" show-cancel-button="true">
			</u-modal>
		</scroll-view>
		<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>
	</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 {
      showTip:false,//系统调不通或者崩了跳出弹窗
      detailData:'',//详情数据
      showSuodaoImg:false,//索道耳麦图片是否显示隐藏
      companyId:'',//公司Id
      merchantId: '', //商户Id
      groupId: '', //组合Id
      groupChannelId: '', //组合渠道Id
      channelId:'',//渠道Id
      currentNum:0,//轮播图下标
      imgList: [], //图片列表
      scenicList:[], //景区数据
      showDistance: false, //定位成功显示距离
      buyKnowData: '', //购买须知数据
      chooseProduct: [], //选中的产品
      showModal: false, //是否显示模态框
      chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
      swiperHeight: 0 ,//swiper高度
      albumList: [{
			  title: '精彩瞬间',
			  count: '10W+',
			  image: '../static/scenic/wonderfulMoment.png',
			  color: '#037EFF'
      },
      {
			  title: '网红旅拍',
			  count: '8W+',
			  image: '../static/scenic/travalphoto.png',
			  color: '#826847'
      },
      {
			  title: '抱枕DIY',
			  count: '4W+',
			  image: '../static/scenic/pillow.png',
			  color: '#1175B4'
      },
      {
			  title: '明信片',
			  count: '4W+',
			  image: '../static/scenic/postcard.png',
			  color: '#3478DC'
      },
      {
			  title: '旅游台历定制',
			  count: '4W+',
			  image: '../static/scenic/deskCalender.png',
			  color: '#1A9B45'
      },
      {
			  title: '定制相册',
			  count: '4W+',
			  image: '../static/scenic/customPic.png',
			  color: '#D48D46'
      }
      ],
    }
  },
  watch: {
    //选中产品的数量变化
    chooseProduct: {
      handler(newValue, oldValue) {
        //当选中产品时
        if (newValue.length > oldValue.length) {
          //找到当前选中的产品
          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.showModal = 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) {
    //获取公司Id,保存到本地，支付等逻辑需要入口companyId
    this.companyId=this.$commonjs.getCompanyId(option)||''
    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')||''
  },
  onShow() {
    //如果是索道
    if(this.merchantId=='z0015605022691a5945bbe463141668c'){
		  this.showSuodaoImg=true
		  setTimeout(() => {
		    this.showSuodaoImg = false
		  }, 2500)
    }
    //清空之前选中的数据以及状态
    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) {
      uni.getLocation({
        type: 'wgs84',
        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.scenicList.splice(index, 1)
		          this.scenicList.unshift(item)
		          item.productListCopy = item.productList
		        } else {
		          item.productListCopy = item.productList.slice(0, 2)
		        }
		        //预订时间为当天时，当前时间大于最早预订时间显示未开售，当前时间大于最晚预订时间显示已售罄
		        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 = '已售罄'
		              }
		            }
		          }
		        })
		      })
		    } 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)
      })
    },
    //---初始化详情
    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'
		      })
		    }
		  })
    },
    //---展示明细弹窗
    showDetail() {
		  this.$refs.detail.showPop = true
    },
    //---页面滚动事件
    scroll(e) {
      if(e.detail.scrollTop>200){
        //固定导航栏
        this.tabbarObj='top:0;position:fixed;border-radius:0'
      }else{
        this.tabbarObj='top:-40rpx;position:relative;border-radius:16rpx;'
      }
    },
    //---展示客服组件
    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) {
      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.showModal = 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.showModal = 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
          })
			 }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #f7f7f7;
}
.middle {
	padding: 0 24rpx 100rpx 24rpx;
	display: flex;
	flex-direction: column;
}
.merchant {
	border-radius: 16rpx;
	background: #ffffff;
	margin-top: 24rpx;
	padding: 24rpx;
}
.merchant label{
	width: 100%;
}
.merchant label.off .product {
	background: #f3f3f3;
	color: #999999;
}
.merchant label.off .product-name {
	color: #999999;
}
.merchant label.off .product-rule {
	color: #999999;
}
.merchant-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 16rpx;
}
.title-left {
	font-size: 32rpx;
	margin-right: 10rpx;
	font-weight: bold;
	image {
		width: 36rpx;
		height: 36rpx;
		position: relative;
		top: 6rpx;
		margin: 0 8rpx;
	}
}
.title-coupon {
	color: $red;
	font-size: 24rpx;
}
.title-right {
	color: $grey;
	font-size: 24rpx;
	display: flex;
}
.product {
	padding:16rpx 16rpx 10rpx 16rpx;
	background: #ffffff;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	margin-top: 10rpx;
}
.product.on {
	background: #e2eeff;
}
.product-left {
	margin-right: 10rpx;
}
.product-right {
	flex: 1;
}
.product-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #191919;
	display: flex;
	justify-content: space-between;
}
.product-status {
	padding: 6rpx 12rpx;
	border: 2px solid #f40000;
	color: #f40000;
	font-size: 24rpx;
	border-radius: 4rpx;
	transform: rotate(-25deg);
	position: relative;
	top: 30rpx;
	right: 80rpx;
}
.product-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.product-rule {
	color: $theme;
}
.product-rule::after {
	display: inline-block;
	content: '';
	height: 22rpx;
	margin: 0 10rpx;
	background: #ccc;
	width: 1px;
}
.product-orange {
	font-size: 20rpx;
	color: $grey;
	text-decoration: line-through;
}
.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;
}
.bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100rpx;
	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;
}
.bottom-left{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.bottom-middle {
	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-three {
	width: 14rpx;
	height: 14rpx;
	display: inline-block;
	background: #f40000;
	opacity: 0.64;
	position: absolute;
	right: 42rpx;
	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-left: 10rpx;
}
.btn {
	font-size: 32rpx;
	width: 200rpx;
}
.suodaoImg{
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
}
</style>
