<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.exchangeProductName}}
					</view>
				</view>
				<view class="mask-btn">
					<view class="btn-style" @click="enterFun()">确定</view>
					<view class="btn-style btn-stylehui" @click="maskType=false">关闭</view>
				</view>
			</view>
		</view>
		<view class="exchange-mask" v-if="codeMaskType" >
			<view class="mask-case mask-caseAct">
				<view class="mask-ticketCodeIn">
					<input class="uni-input" v-model="ticketCode" placeholder="请输入兑换码" />
				</view>
				
				<view class="mask-btn">
					<view class="btn-style" @click="exchangeCodeMask()">确定</view>
					<view class="btn-style btn-stylehui" @click="codeMaskType=false">关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      productId:'',
      merchantId:'',
      ticketCode:'',
      userId:'',
			
      companyMess:{},//公司信息
      companyId:'',//公司ID
			
      fromOrderId: '', //历史ID
      pdFromOrderId: '',
			
      stringProduct: [], //可兑换产品列表
      maskType:false,
      active:0,
      exchangeEndDate:'',//结束兑换时间
			
      id:'',
      codeMaskType:false,
    }
  },
  onLoad(option) {
    
    this.ticketCode = this.$commonjs.getKey(option,'ticketCode')||''//获取兑换码
    this.merchantId = this.$commonjs.getKey(option,'merchantId')||''
  },
  methods: {
    enterFun(){//产品选择确定
      this.productId = this.stringProduct[this.active].exchangeProductId
      this.exchangePageToFun()
    },
    listNumFun(index){//当可选产品>1时 选择的产品是
      this.active = index
      this.exchangeEndDate = this.stringProduct[index].exchangeEndDate
    },
    // 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(merchantCode){//可兑换的产品列表productCompanyId
		  var data = {
		    //companyId: productCompanyId,
        merchantCode: merchantCode,
		  }
		  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))
          })
          this.exchangeEndDate = this.stringProduct[0].exchangeEndDate
          var today = this.$commonjs.today()
          var todayNum = this.$commonjs.changeTime(today)
          var playEndDay = this.$commonjs.changeTime(this.exchangeEndDate)
          if(playEndDay<todayNum){
					  uni.showToast({
						  title: '当前兑换码已过兑换期限。',
						  icon: 'none',
						  duration:5000,
					  })
            this.ticketCode = ''
					  return false
          }
          if(this.stringProduct.length>1){
					  this.maskType = true
          }else{
            this.exchangePageToFun()
          }
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
		  })
    },
    exchangeCodeChoose(){//当没有兑换码则出现输入框 手动输入
      if(this.ticketCode!=''){
        this.exchangeCode()
      }else{
        this.codeMaskType=true
      }
    },
    exchangeCodeMask(){//遮罩是否填写兑换码
      if(this.ticketCode==''){
        uni.showToast({
				  title: '请填写兑换码',
				  icon: 'none'
        })
      }else{
        this.codeMaskType=false
        this.exchangeCode()
      }
    },
    exchangeCode(){//订单查询
      var ticketCodeNum = this.ticketCode
      var ticketCodeList = ticketCodeNum.replace(/(TBD){0,1}(TO){0,1}(\w+)(:\d+){0,1}/i,'$3')
      this.ticketCode = ticketCodeList
      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,
              res.data.list[0].merchantCode
            )
            this.fromOrderId = res.data.list[0].thirdOrderId
            this.pdFromOrderId = res.data.list[0].id
          } else {
            this.ticketCode = ''
            uni.showToast({
						  title: '未查询到相应订单',
						  icon: 'none'
            })
          }
			  }else{
          this.ticketCode = ''
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    checkExchangeFun(id, productId, userId,merchantCode){//兑换检测
      this.id = id
      this.userId = userId
      var data = {
			  fromOrderId: id,
      }
      this.$request('order/exchange/checkExchange',data).then((res)=>{
			  if(res.code=='00'){
			    if (res.data.exchangeStatus == 0) {
            this.productListFun(merchantCode)
          }else{
            uni.showToast({
						  title: '当前兑换码已兑换。',
						  icon: 'none',
              duration:5000,
            })
            this.ticketCode = ''
          }
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    exchangePageToFun(){
      this.productId = this.stringProduct[this.active].exchangeProductId
      this.merchantId = this.stringProduct[this.active].merchantId
      uni.navigateTo({
			  url: '/pages/my/exchangeCode/exchangePage/exchangePage?productId='+this.productId+'&id='+this.id+'&userId='+this.userId+'&merchantId='+this.merchantId+'&fromOrderId='+this.fromOrderId+'&pdFromOrderId='+this.pdFromOrderId+'&ticketCode='+this.ticketCode
      })
    },
    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;
			.btn-style{
				width: 680rpx;
				height: 80rpx;
				border: 1px solid #FE6600;
				background-color: #FE6600;
				color: #fff;
				line-height: 78rpx;
				font-size: 26rpx;
				text-align: center;
				margin: 0 auto 20rpx auto;
			}
			.btn-stylehui{
				color: #333333;
				border: solid 1px #EEEFF0;
				background-color: #fff;
			}
		}
	}
	.mask-caseAct{
		height: 400rpx;
		.mask-ticketCodeIn{
			height: 180rpx;
			/deep/ .uni-input{
				height: 100rpx;
				margin-top: 40rpx;
				text-align: center;
			}
		}
	}
}
</style>
