<template>
	<div class="wrap">
		<div class="top">
			<van-swipe class="my-swipe" :autoplay="3000" @change="swiperChange">
				<van-swipe-item v-for="(item, index) of detailData.imgList" :key="index"> <van-image fit="cover" :src="item.url"></van-image> </van-swipe-item>
				<template #indicator>
					<div class="custom-indicator" v-if="detailData.imgList">{{ current + 1 }}/{{ detailData.imgList.length }}</div>
				</template>
			</van-swipe>
		</div>

		<div class="middle">
			<div class="middle-top">
				<div class="middle-top-top">
					<p>{{ detailData.name }}</p>

					<div class="middle-top-time">
						<span>
							<i>{{ openStatus }}</i>
							<i> {{ detailData.businessStart ? detailData.businessStart.substr(0, 5) : '' }} ~{{ detailData.businessStart ? detailData.businessEnd.substr(0, 5) : '' }} </i>
						</span>
						<span @click="goIntroduce(merchantId)">
							详情
							<van-icon name="arrow" />
						</span>
					</div>
				</div>

				<div class="middle-top-middle">
					<span>{{ detailData.score || 5 }}分</span> <span></span> <span>{{ detailData.comments ? detailData.comments.length : 0 }}条好评</span>
				</div>

				<div class="middle-top-bottom">
					<div>
						<p>{{ detailData.address }}</p>
						<!-- <p>
              距您{{$commonjs.computeDistance(detailData.longitude,detailData.latitude)||1}}km
            </p> -->
					</div>
					<div style="flex-shrink: 0;padding-left: 0.1rem;">
						<a @click="openLocation(detailData)"> <van-icon name="location" /> </a> <a> </a> <a :href="'tel:' + detailData.phone"> <van-icon name="phone" /> </a>
					</div>
				</div>
			</div>
			<!--单票部分-->
			<div class="middle-single">
				<p class="middle-single-title">预订门票</p>
				<div class="middle-sinle-know">
					<span>
						<!-- <i>无需换票</i>
            <i>无需取号</i>
            <i>不可退</i> -->
					</span>
					<span>
						<!-- 购票须知
            <van-icon name="arrow" /> -->
					</span>
				</div>
				<div class="middle-single-list">
					<div v-for="(item, index) of singleProduct" :key="index">
						<label class="single-ticket">
							<div>
								<input type="checkbox" v-model="chooseProducts[combiProduct.length]" :true-value="item" @change="inputChange(combiProduct.length, item, index, $event)" />
								<i :class="{ on: chooseProducts.indexOf(item) != -1 }">{{ item.name }}</i>
							</div>
							<div class="single-ticket-price">
								<span>¥{{ item.originalPrice | parseMoney }}</span> <span> <i>¥</i>{{ item.sellingPrice | parseMoney }}</span>
							</div>
						</label>
					</div>
				</div>
				<van-empty description="空空如也..." v-if="singleProduct.length == 0" />
			</div>
			<!--组合票部分-->
			<div class="middle-double" v-if="combiProduct.length > 0">
				<p class="middle-double-title">组合票（周边）</p>
				<div class="double-list" v-for="(item, index) of combiProduct" :key="index">
					<div class="double-list-ticket">
						<p class="list-titcket-title">{{ item.name }}</p>
						<div class="middle-sinle-know" @click="goIntroduce(item.id)">
							<span>
								<i v-for="(item2, index) of item.tag.slice(0, 3)" :key="index">{{ item2 }}</i>
							</span>
							<span>
								详情
								<van-icon name="arrow" />
							</span>
						</div>
						<div class="middle-single-list" style="padding: 0">
							<div v-for="(item2, a) of item.productList" :key="a">
								<label class="single-ticket">
									<div>
										<input type="checkbox" v-model="chooseProducts[index]" :true-value="item2" @change="inputChange(index, item2, a, $event)" />
										<i :class="{ on: chooseProducts.indexOf(item2) != -1 }">{{ item2.name }}</i>
									</div>
									<div class="single-ticket-price">
										<span>{{ item2.originalPrice | parseMoney }}</span> <span> <i>¥</i> {{ item2.sellingPrice | parseMoney }} </span>
									</div>
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="middle-nearby"></div>
		</div>

		<div class="bottom">
			<div class="bottom-left">
				<span>¥{{ originalTotal }}</span> <span> <i>¥</i>{{ sellTotal }} </span>
			</div>

			<div class="bottom-right">
				<!-- <van-icon name="chat-o" size="18" style="margin-right: 0.3rem;" /> -->
				<a class="btn225" @click="next()">去预定</a>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      current: 0, //轮播图下标
      merchantId: '', //商户Id
      companyId: '', //公司Id
      detailData: '', //详情数据
      openStatus: '', //开园状态
      singleProduct: [], //单产品列表
      combiProduct: [], //组合产品列表
      chooseProducts: [], //选择过的产品
      chooseProduct: [], //选中的产品
      originalTotal: 0, //原价总价
      sellTotal: 0, //卖价总价
      groupId: '', //组合Id
      groupChannelId: '', //组合渠道Id
      appId: 'wxe678d5240e98a7b8', //小程序Id
      originalId: 'gh_c206efc7dc24', //微信小程序原始Id
      environment: 1, //环境,1微信和渝快办，2支付宝，默认为微信
      yukuai: false, //渝快办环境
      cqQRCode: '' //是否是从胖丁小程序返回到渝快码小程序
    }
  },
  created() {
    let returnObj = this.$cqQRCode.getReferrerInfo()
    if (returnObj.extraData) {
      this.cqQRCode = returnObj.extraData.cqQRCode || ''
    }
    if (this.cqQRCode) {
      //如果是从胖丁小程序返回，直接返回首页
      this.$cqQRCode.toHome()
    }
    let env = this.$cqQRCode.getEnv()
    if (env.isAlipayWebView) {
      //支付宝
      this.environment = 2
      this.appId = '2021001194629244'
    } else if (env.isWechatWebView) {
      //微信
      this.environment = 1
    } else if (env.isYKBWebView) {
      //渝快办app
      this.environment = 1
      this.yukuai = true
    }
  },
  mounted() {
    this.merchantId = this.$route.query.merchantId
    this.companyId = this.$route.query.companyId
    this.initDetails()
    this.loadSingleProduct()
    this.loadCombiProduct()
  },
  methods: {
    //---轮播图变化
    swiperChange(index) {
      this.current = index
    },
    //---跳转景区介绍页面
    goIntroduce(merchantId) {
      this.$router.push({
        path: '/scenicIntroduce',
        query: {
          merchantId
        }
      })
    },
    //---打开微信内置地图
    openLocation(item) {
      let longitude = String(item.longitude)
      let latitude = String(item.latitude)
      this.$cqQRCode.openLocation({
        lon: longitude,
        lat: latitude,
        name: item.areaName,
        address: item.address
      })
    },
    //---多选框变化时的事件
    inputChange(index, items, a, event) {
      let el = event.currentTarget
      this.chooseProduct = []
      this.originalTotal = 0
      this.sellTotal = 0
      if (this.chooseProducts[index]) {
        //选中产品时
        if (items.productIds) {
          //联票有重复产品时不能再选择
          for (let b = 0; b < this.chooseProducts.length; b++) {
            if (this.chooseProducts[b] && items.productIds == this.chooseProducts[b].productIds && items.id != this.chooseProducts[b].id) {
              //当前productIds与之前选中的有重复时，清空当前产品,productIds相同，并且id不同，除去当前产品
              if (this.chooseProducts[b].ticketType == 2 || items.ticketType == 2) {
                //产品productIds相同时，并且里面有联票时，无法选中
                this.chooseProducts[index] = ''
                el.checked = false
                this.$toast.fail('有重复产品')
              }
            }
          }
        }
      }
      this.chooseProducts.forEach(item => {
        //获取选中的产品
        if (item) {
          this.chooseProduct.push(item)
        }
      })
      this.chooseProduct.forEach(item => {
        //通过选中的产品计算价格
        this.originalTotal += item.originalPrice
        this.sellTotal += item.sellingPrice
      })
    },
    //---初始化详情
    initDetails() {
      let data = {
        id: this.merchantId, //商户id
        isDetail: 1 //商户详情
      }
      this.$request('scenic/user/merchant/findDetailInfo', data).then(res => {
        if (res.code == '00') {
          this.detailData = res.data
          document
            .querySelector('.detailBottomRight div:first-child a')
            .setAttribute(
              'href',
              'http://api.map.baidu.com/marker?location=' +
								this.detailData.latitude +
								',' +
								this.detailData.longitude +
								'&title=' +
								this.detailData.address +
								'&content=所在位置的简介（可选）&output=html'
            )
          if (this.detailData.imgList.length > 5) {
            this.detailData.imgList = this.detailData.imgList.slice(0, 5)
          }
          let start = ''
          let end = ''
          if (this.detailData.businessStart) {
            start = parseInt(this.$commonjs.changeTime(this.detailData.businessStart.substr(0, 5)))
          }
          if (this.detailData.businessEnd) {
            end = parseInt(this.$commonjs.changeTime(this.detailData.businessEnd.substr(0, 5)))
          }
          if (start < this.nowTime < end) {
            this.openStatus = '开园中'
          } else {
            this.openStatus = '闭园中'
          }
        } else {
          this.$toast.fail(res.message)
        }
      })
    },
    //---单产品加载
    loadSingleProduct() {
      this.singleProduct = []
      let data = {
        merchantId: this.merchantId, //商户id
        type: 1 //类型：1景区、2酒店、3餐饮
      }
      this.$store.commit('showLoading')
      this.$request('scenic/user/product/findProductList', data).then(res => {
        this.$store.commit('hideLoading')
        if (res.code == '00') {
          let list = res.data.list
          if (list.length > 0) {
            list.forEach(item => {
              if (item.channelType == 0) {
                this.singleProduct.push(item)
              }
            })
          } else {
            // this.showProductList = true;
          }
        } else {
          this.$toast.fail(res.message)
        }
      })
    },
    //---加载组合产品
    loadCombiProduct() {
      let data = {
        merchantId: this.merchantId //商户id
      }
      this.$request('scenic/groupGood/getGroupProducts', data).then(res => {
        if (res.code == '00') {
          this.combiProduct = res.data.merchantList || []
          this.groupId = res.data.groupId
          this.groupChannelId = res.data.groupChannelId
          if (this.combiProduct.length > 0) {
            this.combiProduct.forEach(item => {
              item.tag = item.tag.split(',')
            })
          }
        } else {
          this.$toast.fail(res.message)
        }
      })
    },
    //---跳转app
    goApp(path, params) {
      let data = {}
      if (this.yukuai) {
        //渝快办环境
        data = {
          originalId: this.originalId,
          path,
          env: this.environment, //1-微信，2-支付宝
          params
        }
      } else {
        data = {
          appId: this.appId,
          path,
          env: this.environment, //1-微信，2-支付宝
          params
        }
      }
      this.$cqQRCode
        .toMiniProgram(data)
        .then(res => {})
        .catch(err => {
          this.$toast.fail(err.msg)
        })
    },
    goSingleOrder() {
      //选择的是一个产品时
      let chooseGroupGoodList = this.chooseProduct.map(item => {
        return {
          productId: item.id,
          merchantCode: item.merchantCode,
          extendContent: '{"openid":' + '"' + this.$store.state.openId + '"' + '}'
        }
      })
      let data = {
        chooseGroupGoodList,
        companyId: this.companyId
      }
      this.$request('scenic/groupGood/checkProductChangeList', data).then(res => {
        if (res.code == '00') {
          let jumpType = 999
          if (res.data.length > 0) {
            jumpType = res.data[0].jumpType
          }
          if (this.chooseProduct[0].ticketType == 2) {
            //景区联票
            if (jumpType == 0) {
              var afterProductId = res.data[0].afterProductId
            }
            let params = {
              ifyukuaiCode: 1, //是否是渝快码
              orderSource: 0,
              merchantId: this.chooseProduct[0].merchantId,
              productId: afterProductId || this.chooseProduct[0].id,
              companyId: this.companyId || ''
            }
            this.goApp('pages/scenic/scenicJointOrder/scenicJointOrder', params)
          }
          if (this.chooseProduct[0].ticketType != 2) {
            //景区单票
            if (jumpType == 0) {
              //变产品id
              var afterProductId = res.data[0].afterProductId
              let params = {
                ifyukuaiCode: 1, //是否是渝快码
                orderSource: 0,
                merchantId: this.chooseProduct[0].merchantId,
                productId: afterProductId || this.chooseProduct[0].id,
                companyId: this.companyId || ''
              }
              this.goApp('pages/scenic/scenicSingleOrder/scenicSingleOrder', params)
            } else if (jumpType == 1) {
              //跳H5
              // window.location.href=res.data[0].jumpUrl
            } else {
              //不变
              let params = {
                ifyukuaiCode: 1, //是否是渝快码
                orderSource: 0,
                merchantId: this.chooseProduct[0].merchantId,
                productId: this.chooseProduct[0].id,
                companyId: this.companyId || ''
              }
              this.goApp('pages/scenic/scenicSingleOrder/scenicSingleOrder', params)
            }
          }
        } else {
          return this.$toast.fail(res.message)
        }
      })
    },
    //---下一步
    next() {
      if (this.chooseProduct.length == 0) {
        this.$toast.fail('请选择至少一个产品')
        return
      } else if (this.chooseProduct.length == 1) {
        this.goSingleOrder()
      } else {
        let chooseGroupGoodList = this.chooseProduct.map(item => {
          return {
            ifyukuaiCode: 1, //是否是渝快码
            productId: item.id,
            merchantCode: item.merchantCode,
            extendContent: '{"openid":' + '"' + this.$store.state.openId + '"' + '}'
          }
        })
        let data = {
          chooseGroupGoodList,
          companyId: this.companyId
        }
        this.$request('scenic/groupGood/checkProductChangeList', data).then(res => {
          if (res.code == '00') {
            var productIdList = []
            if (res.data.length > 0) {
              res.data.forEach(item => {
                if (item.buyProductType == 1) {
                  //buyProductType==1是产品id变
                  productIdList.push(item.afterProductId)
                } else {
                  productIdList.push(item.beforeProductId)
                }
              })
            } else {
              productIdList = this.chooseProduct.map(item => {
                return item.id
              })
            }
            let params = {
              orderSource: 0,
              productIdList: JSON.stringify(productIdList),
              groupId: this.groupId,
              groupChannelId: this.groupChannelId,
              companyId: this.companyId || ''
            }
            this.goApp('pages/combination/combiOrder/combiOrder', params)
          } else {
            return this.$toast.fail(res.message)
          }
        })
      }
    }
  }
}
</script>

<style scoped="scoped">
.top >>> .van-nav-bar {
	background: none;
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;
}
.top >>> .van-nav-bar .van-icon {
	color: #ffffff;
	font-size: 0.4rem;
}
.top >>> .van-hairline--bottom::after {
	border-bottom: none;
}
.middle {
	position: relative;
	padding-bottom: 0.8rem;
	top: -0.6rem;
}
/*中间上部分*/
.middle-top {
	border-radius: 0.24rem 0.24rem 0 0;
	background: #ffffff;
	padding: 0.16rem 0.32rem;
}
.middle-top-top p:first-child {
	font-size: 0.32rem;
	font-weight: bold;
	color: #191919;
}
.middle-top-time {
	padding: 0.16rem 0;
	border-bottom: 1px solid #e6e6e6;
	display: flex;
	justify-content: space-between;
}
.middle-top-time span:first-child i:first-child {
	color: #3688ff;
	margin-right: 0.2rem;
}
.middle-top-time span:last-child {
	color: #999999;
}
.middle-top-middle {
	padding: 0.16rem 0;
	border-bottom: 1px solid #e6e6e6;
	color: #999999;
}
.middle-top-middle span:first-child {
	color: #fc6703;
	font-weight: bold;
}
.middle-top-middle span:nth-child(2) {
	width: 1px;
	background: #999999;
	display: inline-block;
	margin: 0 0.1rem 0 0.14rem;
	height: 0.24rem;
	position: relative;
	top: 0.02rem;
}
.middle-top-bottom {
	display: flex;
	justify-content: space-between;
	padding: 0.18rem 0;
	align-items: center;
}
.middle-top-bottom div:first-child p:first-child {
	color: #666666;
}
.middle-top-bottom div:first-child p:nth-child(2) {
	color: #999999;
	font-size: 0.2rem;
	margin-top: 0.1rem;
}
.middle-top-bottom a:first-child,
.middle-top-bottom a:last-child {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: #3688ff;
	display: inline-block;
	text-align: center;
	line-height: 0.4rem;
	color: #ffffff;
}
.middle-top-bottom a:nth-child(2) {
	display: inline-block;
	height: 0.32rem;
	width: 1px;
	background: #cccccc;
	margin: 0 0.14rem;
	position: relative;
	top: 0.06rem;
}
/*中间单票部分*/
.middle-single {
	padding: 0.24rem 0.32rem;
	background: #ffffff;
	margin-top: 0.16rem;
}
.middle-single-title {
	font-size: 0.32rem;
	color: #191919;
	font-weight: bold;
}
.middle-sinle-know {
	display: flex;
	justify-content: space-between;
	margin-top: 0.1rem;
}
.middle-sinle-know span:first-child {
	font-size: 0.2rem;
	color: #fc6703;
}
.middle-sinle-know span:first-child i:not(:last-child) {
	padding-right: 0.1rem;
	border-right: 1px solid #cccccc;
	height: 0.28rem;
	display: inline-block;
	line-height: 0.28rem;
}
.middle-sinle-know span:first-child i:not(:first-child) {
	padding-left: 0.1rem;
}
.middle-sinle-know span:last-child {
	color: #999999;
}
.middle-single-list {
	background: rgba(245, 247, 249, 0.39);
	border-radius: 0.08rem;
	padding: 0.32rem 0.24rem;
	margin-top: 0.16rem;
}
.middle-single-list > div:not(:first-child) {
	margin-top: 0.25rem;
}
.single-ticket {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.single-ticket div:first-child {
	font-size: 0.28rem;
	color: #666666;
}
.single-ticket div:first-child input {
	margin-right: 0.1rem;
	width: 14px;
	height: 14px;
	position: relative;
	top: -1px;
}
.single-ticket div:first-child i.on {
	color: #3688ff;
	font-weight: bold;
}
.single-ticket-price {
	flex-shrink: 0;
	padding-left: 0.2rem;
}
.single-ticket-price span:first-child {
	color: #cccccc;
	font-size: 0.2rem;
	text-decoration: line-through;
	margin-right: 0.1rem;
}
.single-ticket-price span:last-child {
	font-weight: bold;
	color: #fc6703;
	font-size: 0.28rem;
}
.single-ticket-price span:last-child i {
	font-size: 0.2rem;
}
/*中间组合票部分*/
.middle-double {
	padding: 0.24rem 0.32rem;
	background: #ffffff;
	margin-top: 0.16rem;
}
.middle-double-title {
	font-size: 0.32rem;
	color: #191919;
	font-weight: bold;
	margin-bottom: 0.16rem;
}
.double-list {
	background: rgba(245, 247, 249, 0.39);
	padding: 0 0.32rem;
}
.double-list-ticket {
	padding: 0.24rem 0;
}
.list-titcket-title {
	font-size: 0.32rem;
	color: #191919;
}
.bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 0.98rem;
	background: #e6e6e6;
	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 0.32rem;
}
.bottom-left span:first-child {
	font-size: 0.2rem;
	color: #999999;
	text-decoration: line-through;
	margin-right: 0.3rem;
}
.bottom-left span:nth-child(2) {
	color: #fc6703;
	font-weight: bold;
	font-size: 0.36rem;
}
.bottom-left span:nth-child(2) i {
	font-size: 0.24rem;
}
@media only screen and (max-width: 380px) {
	.middle {
		top: -1rem;
	}
}
</style>
