<template>
	<view>
		<view class="bookedTime" v-if="loadlogo">
			<view class="bookedTime-title ">
				<view :class="item.checked ? 'data-item' : 'data-item-no'" v-for="(item, index) in bookedTime.dayArray" :key="index" @click="weekChecked(item, index)">
					<view class="data-item-week">{{ item.week }}</view>
					<view class="data-item-month">{{ item.day }}</view>
				</view>
			</view>
			<view class="data-step dis-flex">
				<view class="step-title">预约数量</view>
				<view class="data-stepper dis-flex">
					<view class="dis-il-block minusBtn" @click="minuNum">-</view>
					<view class="dis-il-block p-left-right-20" style="padding-top: 10upx;">
						<input class="input-step" maxlength="3" @input="watchStepNum" type="number" v-model="stepNum"  value="" />
					</view>
					<view class="dis-il-block addBtn" @click="addNum">+</view>
				</view>
			</view>
			<view class="timeQuantum">
				<view class="time-title">预约时间段</view>
				<view class="time-box dis-flex">
					<view :class="item.checked ? 'time-item' : 'time-item-no'" v-for="(item, index) in bookedTime.appointarray" :key="index" @click="checkedquantum(index)">
						<view class="item-quantnm" :style="{lineHeight: item.peoplenums == '0'?'100rpx':'60rpx'}">{{ item.startTime }}-{{ item.endTime }}</view>
						<view class="item-inventory" v-if="item.peoplenums != '0'">库存:{{ item.surnum }}</view>
					</view>
				</view>
			</view>
			<view class="leave dis-flex">
				<view class="leave-title">买家留言</view>
				<view class="leave-input-box"><input type="text" placeholder="请输入预约备注" v-model="remarkText" class="leave-input" /></view>
			</view>
			<view class="confirmBtn" @click="confirm" v-if="appointItem.surnum > 0 || appointItem.peoplenums == '0'">确认</view>
			<view class="confirmBtn" style="background-color: #999999;" v-else>确认</view>
		</view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
export default {
	data() {
		return {
			loadlogo: false,
			bookedTime: {},
			stepNum: 1,
			day: {},
			appointItem: {},
			remarkText: '',
			ids: {},
			delBtn:false
		};
	},
	onLoad(e) {
		this.ids = e;
		// this.getDate();
		this.getBookedTime(false);
	},
	watch:{
		// stepNum(newVal){
		// 	if(newVal < 1){
		// 		this.stepNum = 1;
		// 	}else if(newVal >this.appointItem.surnum){
		// 		this.stepNum = this.appointItem.surnum;
		// 	}
		// }
	},
	methods: {
		watchStepNum(e){
			console.log(e);
		},
		getDate() {
			let date = new Date();
			let year = date.getFullYear(); //获取系统的bai年；
			let month = date.getMonth() + 1; //获取系统月份，du由于月份是从0开始计算，所以要加1
			let dates = date.getDate(); // 获取系统日，
			this.date = year + '-' + (month < 10 ? '0' + month : month) + '-' + (dates < 10 ? '0' + dates : dates);
			
			console.log(this.date);
		},
		confirm() {
			if(this.delBtn) return
			this.delBtn = true;
			setTimeout(()=>{
				this.delBtn = false; //简易防抖
			},1500);
			if(this.stepNum < 1){
				uni.showToast({
					icon:'none',
					title:'预约数量不能小于1'
				});
				return
			}else if(this.stepNum > Number(this.appointItem.surnum) && this.appointItem.peoplenums != 0){
				uni.showToast({
					icon:'none',
					title:'预约数量超过库存'
				});
				return
			}else if(this.stepNum > Number(this.ids.num)){
				uni.showToast({
					icon:'none',
					title:'预约数量超过可预约数量'
				});
				return
			}
			let data = {
				num: this.stepNum,
				appdate: this.day.date,
				pluginno: this.ids.type,
				appstarttime: this.appointItem.startTime,
				appendtime: this.appointItem.endTime,
				goodsid: this.ids.id,
				orderid: this.ids.orderid,
				remark: this.remarkText
			};
			App._post_form(
				`&p=order&do=addAppoint`,
				data,
				res => {
					console.log(res);
					if (res.data.status == 1) {
						uni.showToast({
							title: res.message
						});
						setTimeout(() => {
							this.delBtn = true;
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					};
				},
				false,
				() => {}
			);
		},
		checkedquantum(index) {
			this.bookedTime.appointarray.map(item=>{
				item.checked = false;
			})
			this.bookedTime.appointarray[index].checked = true;
			this.appointItem = this.bookedTime.appointarray[index];
			this.stepNum = 1;
			this.loadlogo = !this.loadlogo;
			this.loadlogo = !this.loadlogo; //$set不生效，重新渲染
		},
		addNum() { //加法
			if(this.stepNum == 0){
				this.stepNum = 1;
				return
			}
			if(this.appointItem.surnum > Number(this.ids.num)){
				// debugger
				if(this.stepNum == Number(this.ids.num)){
					uni.showToast({
						icon:'none',
						title:'预约数量不能超过当前可预约数量'
					})
					return
				}
			}
			if (this.stepNum == this.appointItem.surnum) {
				uni.showToast({
					icon:'none',
					title:'预约数量不能超过当前库存'
				})
				return
			} else {
				this.stepNum = this.stepNum + 1;
			}
		},
		minuNum() { //减法
			if(this.stepNum == 0){
				this.stepNum = 1;
				return
			}
			if (this.stepNum == 1) {
				this.stepNum = 1;
			} else {
				this.stepNum = this.stepNum - 1;
			}
		},
		weekChecked(item, index) {  //选中预约
			this.bookedTime.dayArray.map(item => {
				item.checked = false;
			});
			this.bookedTime.dayArray[index].checked = true;
			this.day = this.bookedTime.dayArray[index];
			this.date = this.bookedTime.dayArray[index].date;
			this.stepNum = 1;
			this.getBookedTime(true);
			this.loadlogo = !this.loadlogo;
			this.loadlogo = !this.loadlogo;
		},
		getBookedTime(flag) { //通过flag判断是否为初次加载
			let data = {
				appdate: this.date || '',
				pluginno: this.ids.type,
				goodsid: this.ids.id,
				orderid: this.ids.orderid,
				initialization: 1
			};
			App._post_form(
				`&p=order&do=getAppointNumber`,
				data,
				res => {
					if(flag){
						this.bookedTime.appointarray = res.data.appointarray;
						this.bookedTime.appointarray.forEach(item=>{
							item.checked = false;
						})
						this.bookedTime.appointarray[0].checked = true;
						this.appointItem = this.bookedTime.appointarray[0];
						
					}else{
						console.log(res);
						this.bookedTime = res.data;
						this.bookedTime.appointarray.forEach(item=>{
							item.checked = false;
						})
						this.bookedTime.appointarray[0].checked = true;
						this.appointItem = this.bookedTime.appointarray[0];
						this.bookedTime.dayArray.forEach(item => {
							item.checked = false;
						});
						// this.bookedTime.dayArray.splice(2,1)
						this.bookedTime.dayArray[0].checked = true;
						// this.bookedTime.appointarray.map(item=>{
						// 	item.checked = false;
						// });
						
						this.day = this.bookedTime.dayArray[0];
					}
					
				},
				false,
				() => {
					this.loadlogo = true;
				}
			);
		}
	}
};
</script>

<style lang="scss" scoped>
.bookedTime {
	padding: 30upx;
	.bookedTime-title {
		padding: 20upx 0;
		flex-wrap: wrap;
		justify-content: space-between;
		.data-item {
			display: inline-block;
			padding: 20upx 10upx;
			border-radius: 60upx;
			background-color: #ff4444;
			color: #ffffff;
			.data-item-week {
				font-size: 24upx;
				font-weight: 400;
				text-align: center;
			}
			.data-item-month {
				font-size: 28upx;
				font-weight: bold;
				text-align: center;
			}
		}
		.data-item-no {
			display: inline-block;
			padding: 20upx 10upx;
			border-radius: 60upx;
			color: #ffffff;
			.data-item-week {
				font-size: 24upx;
				font-weight: 400;
				text-align: center;
				color: #999999;
			}
			.data-item-month {
				font-size: 28upx;
				font-weight: bold;
				text-align: center;
				color: #333333;
			}
		}
	}
	// .bookedTime-title:after {
	// 	margin-right:auto;
	// 	content: '';
	// 	flex:auto;
	// }
	.data-step {
		padding: 30upx 0;
		border-top: 1upx solid #eeeeee;
		border-bottom: 1upx solid #eeeeee;
		.step-title {
			flex: 0.7;
			font-size: 30upx;
			font-weight: 400;
			color: #333333;
			opacity: 1;
			line-height: 60upx;
		}
		.data-stepper {
			flex: 0.3;
			.addBtn {
				width: 60upx;
				height: 60upx;
				border-radius: 50%;
				background-color: #ff4444;
				color: #ffffff;
				font-size: 28upx;
				font-weight: 700;
				text-align: center;
				line-height: 60upx;
			}
			.minusBtn {
				width: 60upx;
				height: 60upx;
				line-height: 60upx;
				border-radius: 50%;
				background-color: #f8f8f8;
				color: #999999;
				font-size: 28upx;
				font-weight: 700;
				text-align: center;
			}
			.input-step {
				width: 60upx;
				text-align: center;
			}
		}
	}
	.timeQuantum {
		padding: 30upx 0;
		border-bottom: 1upx solid #eeeeee;
		.time-title {
			font-size: 30upx;
			font-weight: 400;
			color: #333333;
			opacity: 1;
			padding-bottom: 30upx;
		}
		.time-box {
			flex-wrap: wrap;
			justify-content: space-between;
			.time-item {
				flex: 0 0 30%;
				height: 100upx;
				background: #ff4444;
				border-radius: 15upx;
				margin-bottom: 20upx;
				.item-quantnm {
					text-align: center;
					font-size: 28upx;
					font-weight: bold;
					line-height: 60upx;
					color: #ffffff;
					opacity: 1;
				}
				.item-inventory {
					text-align: center;
					font-size: 26upx;
					font-weight: 400;
					line-height: 20upx;
					color: #ffffff;
					opacity: 1;
				}
			}
			.time-item-no {
				flex: 0 0 30%;
				height: 100upx;
				background: #f8f8f8;
				border-radius: 15upx;
				margin-bottom: 20upx;
				.item-quantnm {
					text-align: center;
					font-size: 28upx;
					font-weight: bold;
					line-height: 60upx;
					color: #333333;
					opacity: 1;
				}
				.item-inventory {
					text-align: center;
					font-size: 26upx;
					font-weight: 400;
					line-height: 20upx;
					color: #999999;
					opacity: 1;
				}
			}
		}
		.time-box:after {
			content: '';
			flex: 0 0 30%;
		}
	}
	.leave {
		padding: 30upx 0;
		.leave-title {
			font-size: 30upx;
			font-weight: 400;
			flex: 0.3;
			color: #333333;
			opacity: 1;
		}
		.leave-input-box {
			flex: 0.7;
			.leave-input {
				font-size: 28upx;
				font-weight: 400;
				text-align: right;
				opacity: 1;
			}
		}
	}
	.confirmBtn {
		width: 690upx;
		height: 90upx;
		background: #ff4444;
		border: 1px solid rgba(238, 238, 238, 0.6705882352941175);
		opacity: 1;
		border-radius: 45px;
		position: fixed;
		bottom: 30upx;
		left: 30upx;
		text-align: center;
		font-size: 32upx;
		font-weight: 400;
		line-height: 90upx;
		color: #ffffff;
	}
}
</style>
