<template>
	<view class="subscribeTicket">
		<view class="title">
			选择日期和人数
		</view>
		<view>
			<z-calendar ref="calendar" :datePrice="datePrice" :curryear='curryear' :currmonth='currmonth'
				howManyMonth="6" mode="2" @changeDate="changeDate" @changeMonth="changeMonth"
				:defaultSelect="defaultSelect"></z-calendar>
		</view>
		<view class="chooseTicketAndNum">
			<view class="chooseTicket">
				<view class="TicketName">
					{{TicketName}}
				</view>
				<view class="">
					<u-number-box v-model="peopleNum" @change="valChange"></u-number-box>
				</view>
			</view>
			<view class="chooseBtn-box">
				<view class="btn-TicketName-box">
					{{defaultSelect}}  
					<text class="btn-TicketName">
						{{TicketName}}
					</text>
					
				</view>
				<view class="btn-box">
					<view class="icon-box">
						<view class="kefu-iocn">
							<u-icon  name="service-o" color="#111111" size="24rpx"></u-icon>
						</view>
						
						<view class="">
							客服
						</view>
					</view>
					
					<view class="subscribe-btn" @click="nextStep">
						立即预订
					</view>
				</view>
			</view>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='goback'></auth>
	</view>
</template>

<script>
	import zCalendar from './njzz-calendar/njzz-calendar.vue'
	import auth from "../../../components/auth/index.vue";
	export default {
		components: {
			zCalendar,
			auth
		},
		props: {
			dateStr: {
				type: String,
				default: ""
			},
			TicketID: {
				type: Number,
				default: 0
			},
			TitekCounponId:{
				type: Number,
				default: 0
			},
			TicketName:{
				type: String,
				default: ""
			}
		},
		data() {
			return {
				curryear: 0,
				currmonth: 0,
				defaultSelect:"",
				datePrice: [],
				price:"",
				peopleNum:1,
				showAuth:false,
				u:{},
			}
		},
		watch: {
			dateStr(val, oldVal) {
				let newMonth = val.split('-')[1]
				let oldMonth = oldVal.split('-')[1]
				if(newMonth!=oldMonth&&oldMonth!=undefined){
					console.log(newMonth!=oldMonth)
					this.getGoodsDateList(val)
				}
				
			},
			TicketID(val){
				if(val){
					this.getGoodsDateList(this.dateStr)
				}
			}
		},
		mounted() {
			let year = new Date().getFullYear(); //年
			let month = new Date().getMonth() + 1; //月
			if(month<10){
				month = ('0' + month)
			}
			this.curryear= year
			this.currmonth= month
			this.defaultSelect = this.dateStr;
		},
		methods: {
			valChange(e) {
				this.peopleNum=e.value
			},
			getGoodsDateList(date) {
				this.request2({
						url: '/api/AppletDining/GetMonthTicketList',
						data: {
							TicketID: this.TicketID,
							BuyDate: date
						}
					},

					res => {
						let data = res.data;
						let datePrice = [];
						data.forEach(x => {
								let obj = {}
								obj.date = x.Year+'-'+x.Month+'-'+x.Day;
								if(x.IsHavePrice==1){
								 let p=this.$utils.getretailer()==true? x.HPriceB:x.HPriceC   
									obj.price =p ;
								}else{
									obj.price = "";
								}
								datePrice.push(obj)
						})
						this.datePrice = datePrice
					}
				);
			},
			changeDate(data){ //选择日期事件  可以将data绑定到此页面以用来提交等操作 
				this.defaultSelect = data.date;
				this.price=data.price
				this.$forceUpdate()
			},
			
			changeMonth(nowMonth){
				let Month = nowMonth.year+'-'+nowMonth.month+'-01';
				this.getGoodsDateList(Month)
			},
			nextStep(){
				this.u = uni.getStorageSync("mall_UserInfo");
				if (!this.u) {
					this.u = {
						nickName: "未登录",
						avatarUrl: ""
					};
					this.showAuth = true;
					
				} else {
					if(!this.price){
						uni.showToast({
							title: "请选择日期",
							icon: "none",
						});
						return
					}
					let data={
						TicketId:this.TicketID,
						TitekCounponId:this.TitekCounponId,
						Unit_Price:this.price,
						Date:this.defaultSelect,
						TicketName:this.TicketName,
						PeopleNumber:this.peopleNum,
					}
					uni.navigateTo({
						url: "/pages/ticketCoupons/fillOrder?data="+encodeURIComponent(JSON.stringify(data)),
					});
				}
				
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				// this.getOrderStatus();
			},
			goback() {
				uni.navigateBack()
			},
			
		}

	}
</script>

<style lang="scss" scoped>
	.subscribeTicket {
		height: 80vh;
		padding-top: 45rpx;
		overflow-y: scroll;
		overflow-x: hidden;
		.title{
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #111111;
			margin-bottom: 10rpx;
		}
		.chooseTicketAndNum{
			height: 335rpx;
			padding: 30rpx;
			.chooseTicket{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 100rpx;
				.TicketName{
					width: auto;
					height: 60rpx;
					padding: 0rpx 30rpx;
					background-color: #111111;
					text-align: center;
					line-height: 58rpx;
					border-radius: 10rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
			}
			.chooseBtn-box{
				// width: 670px;
				height: 100rpx;
				background-color: #FFFFFF;
				box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
				border-radius: 16rpx;
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.btn-TicketName-box{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
					.btn-TicketName{
						margin-left: 10rpx;
					}
				}
				.btn-box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.icon-box{
						width: 44rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						.kefu-iocn{
							width: 44rpx;
							display: flex;
							justify-content: center;
						}
					}
					.subscribe-btn{
						width: 190rpx;
						height: 80rpx;
						margin-left: 20rpx;
						background-color: #111111;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						text-align: center;
						line-height: 78rpx;
					}
				}
			}
		}
	}
</style>
