<template>
	<view class="bigBox">
		<view class="baseStyleBox baseStyleBoxTop">
			<view class="exchange-nav">
				<view class="nav-left">
					<view class="left-name">{{companyMess.name}}</view>
					<view class="left-address">{{companyMess.address}}</view>
				</view>
				<view class="nav-right">
					<view class="right-list" @click="navigation(merchant)">
						<view class="list-title">
							<image src="../../static/exchangeCode/icon01.png"></image>
						</view>
						<view class="list-name">导航</view>
					</view>
					<view class="right-list" @click="makePhone(merchant.phone)">
						<view class="list-title">
							<image src="../../static/exchangeCode/icon02.png"></image>
						</view>
						<view class="list-name">电话</view>
					</view>
				</view>
			</view>
			<view class="exchange-label">
				选择日期
				<image class="exchange-gif" src="../../static/exchangeCode/timer01.gif"></image>
			</view>
			<view class="middle-Datelist">
				<scroll-view class="date-content" scroll-x="true" :scroll-left="dateScroll" v-if="dateList.length > 0">
					<view class="date-list" v-for="(item, index) of dateList" :class="{ on: active == index }" @click="dateChoose(index)" :key="index">
						<view v-if="item.week">
							<text v-if="item.week != '今天' && item.week != '明天' && item.week != '后天'">周</text>
							{{ item.week }}
						</view>
						<view>
							{{ item.startTime ? item.startTime.substr(5, 5) : '' }}
						</view>
						<view class="date-price">
							¥<text>{{ item.sellingPrice }}</text>
						</view>
					</view>
				</scroll-view>
				<view class="dateMore" @click="showCalendar()" v-if="dateList.length > 0">
					<view class="date-more-content">
						<view>更多</view>
						<view>日期</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="exchange-line"></view>
			<view class="exchange-number">
				<view class="exchange-label">
					兑换数量
				</view>
				<!-- <view class="number-rule">
					<view class="rule-text">不可退</view>
					<view class="rule-line"></view>
					<view class="rule-text">免预约</view>
				</view> -->
				<view class="number-timer">{{newCheckTime}}</view>
				<view class="number-codeNum">1</view>
			</view>
		</view>
		<view class="baseStyleBox">
			<view class="exchange-label" style="padding: 40rpx 24rpx 20rpx 24rpx;">
				游客信息
			</view>
			<view class="exchange-tourist">
				<view class="tourist-list">
					<view class="list-name">兑换码</view>
					<view class="list-text">{{ticketCode}}</view>
				</view>
				<view class="tourist-list">
					<view class="list-name">游客姓名</view>
					<input class="uni-input" v-model="orderTouristDate.name" placeholder="请输入" />
				</view>
				<view class="tourist-list">
					<view class="list-name">身份证号</view>
					<input class="uni-input" v-model="orderTouristDate.credentialNumber" placeholder="请输入" />
				</view>
				<view class="tourist-list">
					<view class="list-name">手机号码</view>
					<input class="uni-input" v-model="orderTouristDate.phone" placeholder="请输入" />
				</view>
			</view>
		</view>
		<view class="exchange-bottom">
			<view class="bottom-btn" @click="createOrderFun()">去兑换</view>
		</view>
		<calendar ref="calendar" @dateConfig="dateConfig" :dateList="dateList" v-if="dateList.length > 0"></calendar>
	</view>
</template>

<script>
import calendar from '@/components/calendar' //日历组件
export default {
  components: {
	  calendar,
  },
  data() {
    return {
      ticketCode:'',//兑换码
      productId:'',
      id:'',
      userId:'',
      merchantId:'',
      fromOrderId:'',//途比达历史订单
      pdFromOrderId:'',
      exchangeType:1,//默认为1 VIP 测试普通票 exchangeType=0
      orderDetail:{},//订单详情
      buyNum:null,//购买张数
			
      companyMess:{},//公司信息
      companyId:'',//公司ID
			
      orderTouristDate:{
        name:'',
        credentialNumber:'',
        phone:'',
        credentialType:1
      },//游客信息
			
      stringProduct:[],//兑换产品列表
      stringProductType:false,//列表显隐
      stringProductMinDate:'',//日历最小时间
      stringProductMaxDate:'',//日历最大时间
      dateTimer:'',
			
      dateScroll: '', //日期滚动值
      dateList: [
      ], //日期列表
      active: 0, //日期下标
      docQuery: '', //元素变量
      newCheckTime:'加载中',//当前选择的时间
      //changeValue: '',
      merchant:{
        latitude:'',
        longitude:'',
        name:'',
        address:'',
        phone:'',
      },//基础信息
    }
  },
  onLoad(option) {
    this.productId = option.productId
    this.id = option.id
    this.userId = option.userId
    this.merchantId = option.merchantId
    this.fromOrderId = option.fromOrderId
    this.pdFromOrderId = option.pdFromOrderId
    this.ticketCode = option.ticketCode
    this.findOrderDetail()
    this.loadMerchantInfo()
    this.docQuery = uni.createSelectorQuery().in(this)
  },
  methods: {
    navigation(merchant){//---导航
		  uni.openLocation({
		    latitude:merchant.latitude,
		    longitude:merchant.longitude,
		    name:merchant.name,
		    address:merchant.address,
		    success: function () {
		      
		    }
		  })
    },
    makePhone(phoneNumber) {//---拨打电话
		  uni.makePhoneCall({
		    phoneNumber
		  })
    },
    findOrderDetail(){//产品订单信息
      var data = {
        orderId:this.id,
        userId:this.userId,
      }
      this.$request('order/userOrder/findOrderDetail',data).then((res)=>{
			  if(res.code=='00'){
			    this.orderDetail = res.data
			    this.buyNum = this.orderDetail.orderNum
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    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.merchant.latitude = res.data.latitude
          this.merchant.longitude = res.data.longitude
          this.merchant.name = res.data.name
          this.merchant.address = res.data.address
          this.merchant.phone = res.data.phone
          this.loadExchangeProductInfoFun()
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },	
    loadExchangeProductInfoFun(){//兑换产品查询
      var data = {
        companyId:this.companyId,
        //productId:this.productId,
        exchangeType:1,
        //exchangeType:1,//正式环境为VIP票 只需要exchangeType:1  exchangeType、productId需要注释
      }
      this.$request('scenic/exchangeProduct/loadExchangeList',data).then((res)=>{
			  if(res.code=='00'){
			    this.stringProduct = res.data
          this.stringProduct.forEach(item=>{
            item['interfaceCompanyId']=''//接口编号
            item['merchantCode']=''//商户code
            item['productCode']=''//产品code
            item['minDate']=''//开始时间
            item['maxDate']=''//结束时间
            item['name']=''//票种名称
            item['session']=[]//场次
          })
          this.stringProduct.forEach((item,index)=>{
            this.initData(item.exchangeProductId,index)
          })
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    initData(productId,index){// //页面初始化数据，获取产品基本信息
      var data = {
			  id:productId,
      }
      this.$request('scenic/groupGood/loadProduct',data).then((res)=>{
			  if(res.code=='00'){
			    this.stringProduct[index].interfaceCompanyId = res.data.merchantVo.interfaceCompanyId//接口编号
          this.stringProduct[index].merchantCode = res.data.merchantVo.code//商户code
          this.stringProduct[index].productCode = res.data.code//产品code
          this.stringProduct[index].name = res.data.name//产品名称
          this.stringProduct[index].merchantId = res.data.merchantId//产品ID
          this.dateOfInventory(res.data.id,index)
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    dateOfInventory(productId,index){//兑换时间
      var data = {
			  productId: productId, //产品id
			  isExchange :1
      }
      this.$request('scenic/user/product/priceStockList',data).then((res)=>{
			  if(res.code=='00'){
			    var minData = res.data[0].startTime
          var maxDate = res.data[res.data.length-1].startTime
          var minDataT = minData.substring(0,10)
          var maxDateT = maxDate.substring(0,10)
          var mindates = this.getDefaultDate(minDataT)
          var maxdates = this.getDefaultDate(maxDateT)
          this.stringProduct[index].minDate =new Date(mindates)
          this.stringProduct[index].maxDate = new Date(maxdates)
					
          //this.getTimeStock(res.data[0].startTime,res.data[0].endTime,index)
          this.dateTimer = res.data[0].startTime
					
          let today = this.$commonjs.today() //今天
          let tomorrow = this.$commonjs.tomorrow() //明天
          let afterTomorrow = this.$commonjs.afterTomorrow() //后天
          this.dateList=res.data
          this.dateList.forEach((item,index)=>{
            item.week = '日一二三四五六'.charAt(new Date(item.startTime.substr(0, 10)).getDay())
            if (item.startTime.substr(0, 10) == today) {
						  item.week = '今天'
            }
            if (item.startTime.substr(0, 10) == tomorrow) {
						  item.week = '明天'
            }
            if (item.startTime.substr(0, 10) == afterTomorrow) {
						  item.week = '后天'
            }
          })
          this.newCheckTime = this.dateList[this.active].startTime.substring(0,10)
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    getDefaultDate(val) { //获取默认日期
      let dates = val.split('-')
      let year = parseInt(dates[0])
      let month = parseInt(dates[1]) - 1
      let day = parseInt(dates[2])
      let defaultDate = new Date(year, month, day)
      return defaultDate
    },
    dateChoose(index) {//---日期选择
		  this.active = index //修改选中样式
      this.newCheckTime = this.dateList[this.active].startTime.substring(0,10)
		  this.$refs.calendar.defaultDate = this.dateList[index].startTime.substr(0, 10) //日历组件选中日期
    },
    showCalendar() {//---展示日历
		  this.$refs.calendar.showPop = true
    },
    dateConfig(data) {//---日历确认事件
		  let index = this.dateList.findIndex(item => {
		    return item.startTime.substr(0, 10) == data
		  })
		  this.dateChoose(index)
		  this.docQuery.selectAll('.date-list').boundingClientRect(data => {
		    this.dateScroll = (data[index].width + 6) * index
		  }).exec()
    },
    createOrderFun(){//下单
      var data = {
        companyId: this.companyId, //公司Id
        fromOrderId:this.fromOrderId,//途比达历史订单
        pdFromOrderId:this.pdFromOrderId,//胖丁历史订单
        buyMethod: 1, // 单品购买，2套票、联票购买，3组合购买
        userId:uni.getStorageSync('openid')|| '', //用户id
        cash: 0, //现金红包
        orderMoney: 0, //订单总价 = 订单原价 - 优惠券价格 - 现金抵扣价格
        orderType: 1, //订单类型,景区
        orderSource: this.orderDetail.orderSource || 1, //订单来源 1公众号平台、2公众号组合页面1、3公众号组合页面2、4胖丁伙伴app、5第三方自助机、6第三方票房窗口
        orderProductList: [], //额外服务不为空，联票购买不为空，带有儿童票，组合购买不为空，单品购买为空
        orderProductVo: {//产品信息列表
          extendContent:'{"openid":'+'"'+uni.getStorageSync('openid')+'"'+','+'"zr":""}',
          productId: this.productId, //产品Id
          buyNum: this.buyNum, //购买数量
          subOrderType: 0, //产品类型，网络
          unitPrice: 0, //产品单价
          distributionPrice: 0, //临时用
          merchantId: this.merchantId, //商户id
          orderTouristList:[], //游客信息
          playDate: this.dateList[this.active].startTime.substring(0,10), //开始日期
          endPlayDate: this.dateList[this.active].endTime.substring(0,10), //结束日期
          startPlayTime: this.dateList[this.active].startTime.substring(11,19),
          endPlayTime: this.dateList[this.active].endTime.substring(11,19),
          isMaster: 0, //是否主产品 1 否， 0 是
          couponList:[], //券列表
        },
      }
      if(this.orderTouristDate.name==''){
        uni.showToast({
				  title: '请输入用户姓名',
				  icon: 'none'
        })
        return false
      }
      if(this.orderTouristDate.credentialNumber==''){
        uni.showToast({
				  title: '请输入用户身份证号',
				  icon: 'none'
        })
        return false
      }
			
      if(this.orderTouristDate.phone==''){
        uni.showToast({
				  title: '请输入用户联系电话',
				  icon: 'none'
        })
        return false
      }
      if (!this.$commonjs.phoneReg().test(this.orderTouristDate.phone)) {
			  //未填写正确手机号码
			  uni.showToast({
			    title: '请填写正确的手机号码',
			    icon: 'none'
			  })
			  return false
      }
      data.orderProductVo.orderTouristList.push(this.orderTouristDate)
      data['ticketPhone']=this.orderTouristDate.phone
      this.$request('orderc/order/createOrder',data).then((res)=>{
        if(res.code=='00'){
			    let id = res.data.id
          if (id) {
            this.init(id)
          } else {
            uni.showToast({
						  title: '下单失败',
						  icon: 'none'
            })
          }
        }else{
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      })
    },
    init(orderId) {//是否下单成功
      var payType= ''
      //#ifdef MP-WEIXIN
      payType = 42
      //#endif
			
      //#ifdef MP-ALIPAY
      payType = 33
      //#endif
      let data = {
        'orderId': orderId, //订单Id
        'userId': uni.getStorageSync('openid'), //用户Id
        'payType': payType, //支付类型
        'fromOrderId':this.fromOrderId,
        'pdFromOrderId':this.pdFromOrderId
      }
      this.$request('orderc/order/findOrderInfo',data).then((res)=>{
			  if(res.code=='00'){
			    uni.navigateTo({
			      url: '/pages/my/exchangeCode/exchangeComplete/exchangeComplete?orderId='+res.data.id
			    })
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })

    },
  }
}
</script>

<style scoped lang="scss">
.bigBox{
	height: 100vh;
	background-color: #F7F8FA;
	padding-bottom: 120rpx;
	overflow-y: auto;
}
.baseStyleBox{
	width: 726rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin: 0 auto 20rpx auto;
}
.baseStyleBoxTop{
	margin-top: 12rpx;
}
.exchange-nav{
	display: flex;
	justify-content: space-between;
	padding: 24rpx;
	border-bottom: solid 2rpx #F5F5F5;
	margin-bottom: 36rpx;
	.nav-left{
		.left-name{
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			margin-bottom: 4rpx;
		}
		.left-address{
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;
		}
	}
	.nav-right{
		display: flex;
		.right-list{
			margin-left: 24rpx;
			.list-title{
				width: 52rpx;
				height: 52rpx;
				border: 2rpx solid #F5F5F5;
				border-radius: 50%;
				margin-bottom: 2rpx;
				position: relative;
				image{
					display: block;
					width: 28rpx;
					height: 28rpx;
					margin: auto;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
				}
			}
			.list-name{
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
				line-height: 24rpx;
				text-align: center;
			}
		}
	}
}
.exchange-label{
	display: flex;
	font-weight: 600;
	font-size: 32rpx;
	color: #333333;
	line-height: 40rpx;
	padding: 0 24rpx 0 24rpx;
}
.exchange-gif{
	width: 166rpx;
	height: 40rpx;
	margin-top: 6rpx;
	margin-left: 12rpx;
}
.middle-Datelist {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 38rpx;
	padding: 0 24rpx 0 24rpx;
	.date-content {
		flex: 1;
		overflow-x: scroll;
		white-space: nowrap;
	}
	.date-content::-webkit-scrollbar {
		display: none;
	}
	.date-list {
		width: 120rpx;
		text-align: center;
		margin-right:18rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EEEFF0;
		background: #FCFCFC;
		position: relative;
		display: inline-block;
		padding:14rpx 0 12rpx 0;
	}
	.date-list.on {
		border: 1px solid #FE6600;
	}
	
	.date-list>view{
		line-height: 36rpx;
		font-size: 26rpx;
		color: #333333;
	}
	.date-price {
		color: #FE6600 !important;
	}
	.dateMore {
		flex-shrink: 0;
		padding: 20rpx 0;
		width: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.date-more-content {
		margin-right:8rpx;
	}
	/deep/ .u-icon__icon{
		color: #333333;
	}
}
.exchange-line{
	height: 2rpx;
	background: #F5F5F5;
	margin: 30rpx 0 30rpx 0;	
}
.exchange-number{
	position: relative;
	.number-rule{
		display: flex;
		padding: 0 24rpx 0 24rpx;
		margin: 8rpx 0 8rpx 0;
		.rule-text{
			font-weight: 400;
			font-size: 24rpx;
			color: #FE6600;
			line-height: 36rpx;
		}
		.rule-line{
			width: 2rpx;
			height: 18rpx;
			background: #DDDDDD;
			margin: auto 16rpx auto 16rpx;
			justify-content: center;
		}
	}
	.number-timer{
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 36rpx;
		padding: 0 24rpx 24rpx 24rpx;
	}
	.number-codeNum{
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		line-height: 32rpx;
		position: absolute;
		top: 10rpx;
		right: 38rpx;
	}
}
.exchange-tourist{
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	.tourist-list{
		display: flex;
		height: 100rpx;
		border-bottom: 2rpx solid #F5F5F5;
		box-sizing: border-box;
		margin-left: 40rpx;
		padding-right: 52rpx;
		.list-name{
			flex-shrink: 0;
			width: 120rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 98rpx;
		}
		.list-text{
			flex: 1;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 98rpx;
			text-align: right;
		}
		/deep/ .uni-input{
			text-align: right;
			flex: 1;
			height: 98rpx;
		}
	}
	.tourist-list:nth-last-child(1){
		border-bottom: none;
	}
}
.exchange-bottom{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 120rpx;
	box-sizing: content-box;
	border-top: solid 2rpx #EDEDED;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
	left: 0;
	.bottom-btn{
		width: 670rpx;
		height: 80rpx;
		background: linear-gradient( 119deg, #FFA000 0%, #FE6600 100%);
		border-radius: 40rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
}
</style>
