<template>
	<view class="subscribeTicket">
		<view class="title">
			选择日期和人数
			<u-icon name="cross" size="28" class="close-icon" @click="close"></u-icon>
		</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>
						<button open-type="contact" :send-message-title="TicketName" :send-message-path="msgPath"
							:send-message-img="TicketImg" :show-message-card="true"></button>
					</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: ""
			},
			TicketImg: {
				type: String,
				default: ""
			},
			msgPath: {
				type: String,
				default: ""
			},
		},
		data() {
			return {
				curryear: 0,
				currmonth: 0,
				defaultSelect: "",
				datePrice: [],
				price: "",
				peopleNum: 1,
				showAuth: false,
				u: {},
			}
		},
		watch: {
			dateStr(val, oldVal) {
				this.defaultSelect = val;
				let newMonth = val.split('-')[1]
				let oldMonth = oldVal.split('-')[1]
				if (newMonth != oldMonth && oldMonth != undefined) {
					this.getGoodsDateList(val)
				}
				let list = this.datePrice.filter(item => item.date == this.dateStr);

				if (list.length > 0) {
					this.price = list[0].price
				}
			},
			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
		},
		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
						let list = this.datePrice.filter(item => item.date == this.dateStr);
						if (list.length > 0) {
							this.price = list[0].price
						}
					}
				);
			},
			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&&this.price!==0){
						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()
			},
			close() {
				this.$emit("close")
			}
		}

	}
</script>

<style lang="scss" scoped>
	.subscribeTicket {
		// height: 70vh;
		margin: 45rpx 0;
		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;
			position: relative;

			.close-icon {
				position: absolute;
				right: 30rpx;
				top: 0;
			}
		}

		.chooseTicketAndNum {
			// height: 335rpx;
			padding: 30rpx 30rpx 2rpx 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;
						height: 52rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						position: relative;

						.kefu-iocn {
							width: 44rpx;
							
							display: flex;
							justify-content: center;


						}

						button {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
							opacity: 0
						}
					}

					.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>
