<template>
	<view class="bigBox">
		<view class="exchange-btn exchange-btnTop" @click="distributionCombiChooseFun()">
			<image class="btn-img" src="../../static/exchangeCode/GIbuyTicket.png"></image>
			<view class="btn-name">立即购票</view>
			<view class="btn-ENname">BUY TICKETS NOW</view>
		</view>
		<view class="exchange-btn" @click="exchangeCodeChoose()">
			<image class="btn-img" src="../../static/exchangeCode/GIExchange.png"></image>
			<view class="btn-name">兑换票</view>
			<view class="btn-ENname">EXCHANGE TICKETS</view>
		</view>
		<view class="exchange-btn" @click="orderListFun()">
			<image class="btn-img" src="../../static/exchangeCode/GIOrder.png"></image>
			<view class="btn-name">查看订单</view>
			<view class="btn-ENname">VIEW ORDERS</view>
		</view>
		<view class="exchange-mask" v-if="maskType==true">
			<view class="mask-case">
				<view class="mask-list">
					<view class="list-box" :class="active == index?'list-boxAct':''" @click="listNumFun(index)" v-for="(item,index) in stringProduct" :key="index">
						{{item.productName}}
					</view>
				</view>
				<view class="mask-btn"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      productId:'',
      merchantId:'',
      ticketCode:'',
      userId:'',
			
      companyMess:{},//公司信息
      companyId:'',//公司ID
			
      fromOrderId: '', //历史ID
      pdFromOrderId: '',
			
      stringProduct: [], //可兑换产品列表
      maskType:true,
      active:0,
    }
  },
  onLoad(option) {
    //this.userId = ''//uni.getStorageSync('openid')
    //this.productId = option.productId||'z001700015788731bfffd2581156dcfa'
    this.ticketCode = this.$commonjs.getKey(option.ticketCode)||''
    this.merchantId = this.$commonjs.getKey(option.merchantId)||''
    console.log(this.merchantId)
    this.loadMerchantInfo()
  },
  methods: {
    listNumFun(index){//当可选产品>1时 选择的产品是
      this.active = index
    },
    loadMerchantInfo(){//景区详情
		  var data = {
			  id:this.merchantId,
			  isDetail :1
		  }
		  this.$request('scenic/newMerchant/loadMerchantInfo',data).then((res)=>{
			  if(res.code=='00'){
			    this.companyMess= res.data
			    this.companyId = res.data.productCompanyId
		      this.productListFun(res.data.productCompanyId)
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
		  })
    },	
    productListFun(productCompanyId){//可兑换的产品列表
		  var data = {
		    companyId: productCompanyId,
		  }
		  this.$request('scenic/exchangeProduct/loadExchangeList',data).then((res)=>{
			  if(res.code=='00'){
			    this.stringProduct = res.data
          this.stringProduct.forEach((item, index) => {
            var productNameGroup = JSON.parse(JSON.stringify(item.productName)).split('（')
            item.productNameGroup =JSON.parse(JSON.stringify(productNameGroup))
          })
          console.log(this.stringProduct)
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
		  })
    },
    exchangeCodeChoose(){//大于1出现遮罩 等于1跳转
      if(this.stringProduct.length>1){
        this.maskType = true
      }else{
        this.exchangeCode()
      }
    },
    exchangeCode(){//订单查询
      var data = {
        ticketCode : this.ticketCode,
        //userId : this.userId,//上线之前注销 此为普通票
        //productId : this.productId,
        //orderStatus : 2,//上线之前注销 此为普通票
      }
      this.$request('order/userOrder/findExchangeOrderList',data).then((res)=>{
			  if(res.code=='00'){
			    if (res.data.list.length > 0) {
            this.checkExchangeFun(
              res.data.list[0].id,
              res.data.list[0].productId,
              res.data.list[0].userId
            )
            this.fromOrderId = res.data.list[0].thirdOrderId
            this.pdFromOrderId = res.data.list[0].id
          } else {
            this.$toast.fail('未查询到相应订单')
          }
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    checkExchangeFun(id, productId, userId){//兑换检测
      var data = {
			  fromOrderId: id,
      }
      this.$request('order/exchange/checkExchange',data).then((res)=>{
			  if(res.code=='00'){
			    if (res.data.exchangeStatus == 0) {
            uni.navigateTo({
						  url: '/pages/my/exchangeCode/exchangePage/exchangePage?productId='+this.productId+'&id='+id+'&userId='+userId+'&merchantId='+this.merchantId+'&fromOrderId='+this.fromOrderId+'&pdFromOrderId='+this.pdFromOrderId+'&ticketCode='+this.ticketCode
            })
          }else{
            uni.showToast({
						  title: '当前兑换码已兑换，若需兑换其他兑换码，请扫描对应门票二维码进行兑换。',
						  icon: 'none'
            })
          }
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    orderListFun(){//跳转订单列表
      uni.navigateTo({
			  url: '/pages/my/order/orderList/orderList'
      })
    },
    distributionCombiChooseFun(){//跳转立即购票
		  uni.navigateTo({
			  url: '/pages/combination/distributionCombiChoose/distributionCombiChoose?channelId=1&merchantId=z0015605022691a5945bbe463141668c&groupId=z0016038113016708b8ad38c637b2f26&groupChannelId=z00160423712018998e6260ffcaf3369'
		  })
    },
  }
}
</script>

<style scoped lang="scss">
.bigBox{
	height: 100vh;
	background-color: #F4F6F8;
	overflow-y: auto;
}
.exchange-btn{
	width: 628rpx;
	height: 216rpx;
	margin: 0 auto;
	margin-bottom: 54rpx;
	position: relative;
	.btn-img{
		display: block;
		width: 628rpx;
		height: 216rpx;
	}
	.btn-name{
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		line-height: 56rpx;
		position: absolute;
		top: 56rpx;
		left: 60rpx;
	}
	.btn-ENname{
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 120rpx;
		left: 60rpx;
	}
}
.exchange-btnTop{
	margin-top: 126rpx;
}
.exchange-mask{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 998;
	background-color: rgba(0,0,0,.3);
	.mask-case{
		width: 700rpx;
		height: 800rpx;
		margin: auto;
		background-color: #fff;
		border-radius: 18rpx;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		.mask-list{
			height: 600rpx;
			padding: 20rpx 0 0 0;
			overflow-y: auto;
			.list-box{
				width: 680rpx;
				margin: 0 auto 20rpx auto;
				padding: 30rpx 20rpx;
				border: solid 1px #EEEFF0;
				border-radius: 8rpx;
				line-height: 30rpx;
				font-size: 26rpx;
				color: #333333;
			}
			.list-boxAct{
				color: #FE6600;
				border: 1px solid #FE6600;
			}
		}
		.mask-btn{
			height: 200rpx;
		}
	}
}
</style>
