<template>
	<!-- 代买饭页 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
			</view>
		</view>
		<view style="position: absolute;top: 100px;width: 100%;">
			<view class="tab1" v-if="isPaotui">
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/f1356c4db9b5488bb46140e2cdd2b4ee.png" alt=""
					style="position: absolute;" />
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e380fd14442c476bb6d3f5ec471af515.png" alt="" />
				<view style="width: 100%;height: 80px;position: absolute;top:0;left: 0;display: flex;">
					<view style="width: 50%;height: 80px;"></view>
					<view style="width: 50%;height: 80px;" @tap="isPaotui=!isPaotui"></view>
				</view>
			</view>
			<view class="tab1" v-else>
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3aea88803cb446139aa80ff5a606645a.png" alt=""
					style="position: absolute;" />
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/2cdff43ecdd4409a8bd1f5f46a6ad38d.png" alt=""
					style="position: absolute;" />
				<view style="width: 100%;height: 80px;position: absolute;top:0;left: 0;display: flex;">
					<view style="width: 50%;height: 80px;" @tap="isPaotui=!isPaotui"></view>
					<view style="width: 50%;height: 80px;"></view>
				</view>
			</view>
		</view>
		<view class="address-box">
			<view v-if="formData.address == ''">
				请选择收货地址 <uni-icons type="right" size="16"></uni-icons>
			</view>
			<view v-else>
				男生宿舍楼2楼211
			</view>
		</view>
		<view class="time-box">
			<view class="time1" @tap="checkTime(true)" :style="{'background':formData.isImmediately?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'#eee'}">
				<view style="font-weight: 700;">
					立即送出
				</view>
				<view style="font-size: 10px;color: #777;">
					预计18:47-19:02送达
				</view>
			</view>
			<view class="time1" @tap="checkTime(false)" :style="{'background':formData.isImmediately==false?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'#eee'}">
				<view style="font-weight: 700;">
					预约配送
				</view>
				<view class="">
					<view style="font-size: 10px;color: #777;" v-if="formData.isImmediately!=true&&formData.deliveryTime!=''">
						{{formData.deliveryTime}}
					</view>
					<view v-else style="font-size: 10px;color: #777;">
						选择时间 >
					</view>
				</view>
			</view>
		</view>
		<view style='background: #fff;border-bottom: 1px solid #eee;'>
			<view style="height: 45px;line-height: 20px;padding: 0 20px;font-size: 14px;font-weight: 700;padding-top: 10px;">
				<view class="">
					配送员
				</view>
				<view style="font-size: 12px;color: #777;">
					指定配送员后，如遇到配送员拒绝接单，该订单进入抢单大厅
				</view>
			</view>
			<view style="padding: 20px;">
				<view style="display: flex;font-size: 14px;font-weight: bold;line-height: 25px;margin-bottom: 15px;">
					<view class="radio-check" v-if="selected === 'buzhiding'">
						<uni-icons type="checkmarkempty" size="12"></uni-icons>
					</view>
					<view class="radio-no-check" @tap="checkVoucher('buzhiding')" v-else></view>
					不指定
				</view>
				<view class="" style="display: flex;font-size: 14px;font-weight: bold;line-height: 25px;">
					<view style="width:50%;display: flex;">
						<view class="radio-check" v-if="selected === 'zhiding'">
							<uni-icons type="checkmarkempty" size="12"></uni-icons>
						</view>
						<view class="radio-no-check" @tap="checkVoucher('zhiding')" v-else></view>
						指定配送员
					</view>
					<view style="width: 50%;color: #777;text-align: right;">
						配送员
						<uni-icons type="right" size="12"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="box1">
			<view style="width: 100%;line-height: 35px;font-size: 14px;font-weight: 700;">
				竹仔园牛仔农庄(第六分店)
			</view>
			<view style="display: flex;padding: 10px;background: #eee;border-radius: 10px;">
				<view class="goods-img">
					<img src="/static/images/img/shangpintu.png" alt="">
				</view>
				<view class="goods-content">
					<view class="goods-name">
						牛仔农庄(医专店)
					</view>
					<view class="goods-content-center">
						<view class="goods-deal1">
							打分；不要啦
						</view>
					</view>
					<view class="goods-content-bottom">
						<view style="width: 45%;">
							X1
						</view>
						<view class="pintuan-left-price">
							￥90.00
							<view style="background: rgba(255, 57, 57, 0.2);padding: 0px 6px;border-radius: 10px;margin-left: 10px;">
								<text>拼团</text>
								<text style="color: red;">￥59.9</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view style="height: 40px;line-height: 40px;display: flex;">
					<view style="flex: 1;color: #777;font-weight: 700;">
						打包费
					</view>
					<view style="color: #000;font-weight:700;">
						￥1
					</view>
				</view>
				<view style="height: 40px;line-height: 40px;display: flex;">
					<view style="flex: 1;color: #777;font-weight: 700;">
						配送费
					</view>
					<view style="color: #000;font-weight:700;">
						￥5
					</view>
				</view>
				<view style="height: 40px;line-height: 40px;display: flex;">
					<view style="flex: 1;color: #777;font-weight: 700;">
						优惠券
					</view>
					<view style="color: #000;font-weight:700;">
						-￥1 <uni-icons type="right" size="12"></uni-icons>
					</view>
				</view>
			</view>
			<view
				style="display: flex;height: 40px;line-height: 50px;border-top: 1px solid #eee;font-size: 16px;font-weight: 700;">
				<view style="flex: 1;">
					合计
				</view>
				<view class="">
					￥90.00
				</view>
			</view>
			<view style="height:80px;"></view>
			<view class="buy-bottom">
				<view class="bottom-btn">
					立即支付
				</view>
			</view>
		</view>
		<delivery-time-op @timeCallback="timeCallback" :dodge="true" ref='model'
			:content="content" :barHidth='600' title="选择送达时间">
			> </delivery-time-op>
	</view>
</template>

<script>
	import deliveryTimeOp from '@/components/delivery-time-op/delivery-time-op.vue'
	export default {
		data() {
			return {
				menuButtonInfo: {},
				formData:{
					address:'',
					isImmediately:true,
					deliveryTime:''
				},
				content: [],
				selected: 'buzhiding',
			}
		},
		components: {
			deliveryTimeOp
		},
		onLoad(option) {
			
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			checkTime(type){
				if(type == this.formData.isImmediately){
					
				}
				this.formData.isImmediately = !this.formData.isImmediately
				if(this.formData.isImmediately == false){
					this.$refs.model.open()
					this.generateDeliveryTimes()
				}
			},
			checkVoucher(type) {
				if (type == this.selected) return;
				this.selected = type;
			
				this.addFormData.phone = '',
					this.addFormData.codeList = [{
						code: ''
					}]
				this.addFormData.picture = []
			},
			//时间选择器获取时间数据
			generateDeliveryTimes() {
				const now = new Date();
				const today = new Date(now);
				const tomorrow = new Date(now);
				tomorrow.setDate(tomorrow.getDate() + 1);
			
				// 星期几
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const todayWeekday = weekdays[today.getDay()];
				const todayStr = `今天 (${todayWeekday})`;
			
				// 明天的日期格式：月-日（不补零）
				const month = tomorrow.getMonth() + 1;
				const day = tomorrow.getDate();
				const tomorrowStr = `${month}-${day}`;
			
				// ----- 生成今天的时间列表 -----
				const todayTimelist = [{
					timestr: '自动送达'
				}];
			
				const currentHour = now.getHours();
				const currentMinute = now.getMinutes();
			
				// 计算下一个半小时点
				let nextHour = currentHour;
				let nextMinute = 30;
				if (currentMinute >= 30) {
					nextHour = currentHour + 1;
					nextMinute = 0;
				}
			
				// 从下一个半小时点开始，直到 23:30
				for (let h = nextHour; h <= 23; h++) {
					const startMin = (h === nextHour) ? nextMinute : 0;
					for (let m = startMin; m < 60; m += 30) {
						if (h === 23 && m > 30) continue; // 不超过 23:30
						const timeStr = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
						todayTimelist.push({
							timestr: timeStr
						});
					}
				}
			
				// ----- 生成明天的时间列表（全天 00:00 ~ 23:30）-----
				const tomorrowTimelist = [];
				for (let h = 0; h <= 23; h++) {
					for (let m = 0; m < 60; m += 30) {
						if (h === 23 && m > 30) continue;
						const timeStr = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
						tomorrowTimelist.push({
							timestr: timeStr
						});
					}
				}
			
				this.content = [{
						timezh: todayStr,
						timelist: todayTimelist
					},
					{
						timezh: tomorrowStr,
						timelist: tomorrowTimelist
					}
				];
			},
			//时间选择器点击后
			timeCallback(val) {
				this.formData.deliveryTime = val.timestr
				this.$refs.model.close()
			},
			back() {
				uni.navigateBack()
			}
		}

	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 20%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.title-name {
		padding-top: 55px;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}

	.tab1 {
		width: 100%;
		height: 80px;
		position: relative;

		img {
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}

	.box1 {
		width: 95%;
		margin: 0 auto 10px;
		background: #fff;
		border-radius: 10px;
		padding: 10px;
	}

	.goods-img {
		width: 160rpx;
		height: 160rpx;
		position: relative;

		img {
			width: 100%;
			background-size: 100%;
			height: 100%;
		}
	}

	.goods-content {
		flex: 1;
		padding-left: 20rpx;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: 900;
	}

	.goods-content-center {
		display: flex;
		margin: 16rpx 0;
		color: #777;
	}

	.pintuan-left-price {
		width: 55%;
		    text-align: right;
		    font-weight: 700;
		    color: #000;
			display: flex;
	}

	.goods-content-bottom {
		display: flex;
		line-height: 28px;
		color: #777;
	}
	.address-box{
		background: #fff;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		font-weight: 700;
		padding: 0 20px;
	}
	.time-box{
		background: #fff;
		display: flex;
		height: 70px;
		padding: 10px;
	}
	.time1{
		height: 50px;
		flex: 1;
		border-radius: 10px;
		text-align: center;
		margin: 0 5px 0 10px;
		line-height: 20px;
		padding-top: 5px;
	}
	.radio-check {
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		width: 24px;
		height: 24px;
		border-radius: 24px;
		text-align: center;
		line-height: 24px;
		margin: 0 10px 0 0;
	}
	
	.radio-no-check {
		width: 24px;
		height: 24px;
		border-radius: 24px;
		border: 1px solid #eee;
		margin: 0 10px 0 0;
	}
	.buy-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 150rpx;
		display: flex;
		background: #fff;
		z-index: 99;
		box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.3);
	}
	
	.bottom-btn {
		width: 90%;
		height: 50px;
		background: linear-gradient(90deg, #e3ff96, #a6ffea);
		font-size: 13px;
		font-weight: 700;
		line-height: 50px;
		text-align: center;
		border-radius: 50px;
		margin: 10px auto;
	}
</style>