<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 class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					<!-- 代取快递/跑腿 -->
				</view>
			</view>
		</view>
		<view style="position: absolute;top: 200rpx;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: 160rpx;position: absolute;top:0;left: 0;display: flex;">
					<view style="width: 50%;height: 160rpx;"></view>
					<view style="width: 50%;height: 160rpx;" @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: 160rpx;position: absolute;top:0;left: 0;display: flex;">
					<view style="width: 50%;height: 160rpx;" @tap="isPaotui=!isPaotui"></view>
					<view style="width: 50%;height: 160rpx;"></view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="">
				<view class="dizhi">
					<view class="dizhi-tu">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png"
							alt="" />
					</view>
					<view class="dizhi1">
						<view class="dizhi-ming">
							沁园春第三食堂A20窗口
						</view>
						<view class="dizhi-btn" @tap="openAddressBook">
							地址簿
						</view>
					</view>
				</view>
				<view class="dizhi">
					<view class="dizhi-tu">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d0764fb4138747769538cf1cafa3b017.png"
							alt="" />
					</view>
					<view class="dizhi1">
						<view class="dizhi-ming">
							沁园春第三食堂A20窗口
						</view>
						<view class="dizhi-btn" @tap="openAddressBook">
							地址簿
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 20rpx;border-top: 1px solid #eee;matgin-top:20rpx"></view>
			<view class="content-box" style="height: 120rpx;">
				<view class="content-title">
					取件数量<text>*</text>
				</view>
				<view
					style="display:flex;height: 80rpx;margin-top: 20rpx;line-height: 80rpx;border: 1px solid #777;background: #eee;border-radius: 20rpx;width: 40%;">
					<view @tap="addFormData.num > 0 ? addFormData.num-- : 0"
						style="width: 30%;font-size: 44rpx;font-weight: 700;text-align: center;">-</view>
					<input type="number" v-model="addFormData.num" disabled
						style="line-height: 80rpx;height: 80rpx;flex: 1;font-size: 36rpx;font-weight: 700;text-align: center;">
					<view @tap="addFormData.num++"
						style="width: 30%;font-size: 44rpx;font-weight: 700;text-align: center;">+</view>
				</view>
			</view>
			<view class="content-box">
				<view class="content-title">
					取件凭证<text>*</text>
				</view>
				<view class="" style="flex: 1;">
					<view class="">
						<view class="" style="display: flex;">
							<view class="radio-check" v-if="selected === 'phone'">
								<uni-icons type="checkmarkempty" size="12"></uni-icons>
							</view>
							<view class="radio-no-check" @tap="checkVoucher('phone')" v-else></view>
							手机尾号
						</view>
						<view class="check-input" v-if="selected == 'phone'">
							<input type="text" style="width: 100%;height: 100%;padding: 0 20rpx;border: 1px solid #eee;">
						</view>
					</view>
					<view class="">
						<view class="" style="display: flex;">
							<view class="radio-check" v-if="selected === 'code'">
								<uni-icons type="checkmarkempty" size="12"></uni-icons>
							</view>
							<view class="radio-no-check" @tap="checkVoucher('code')" v-else></view>
							取件码
						</view>
						<view class="check-input" v-if="selected == 'code'" v-for="(item,index) in addFormData.codeList"
							:key="index" style="border: none;display: flex;">
							<input type="text" v-model="item.code"
								style="width: 100%;height: 100%;padding: 0 20rpx;border: 1px solid #eee;">
							<view @tap="delCode(index)" v-if="addFormData.codeList.length>1"
								style="width: 90rpx;height: 70rpx;line-height: 70rpx;text-align: center;">
								<uni-icons type="trash" size="18"></uni-icons>
							</view>
						</view>
						<view class="check-add" @tap="addCode" v-if="selected == 'code'">
							+ 添加取件码
						</view>
					</view>
					<view class="">
						<view class="" style="display: flex;">
							<view class="radio-check" v-if="selected === 'screenshot'">
								<uni-icons type="checkmarkempty" size="12"></uni-icons>
							</view>
							<view class="radio-no-check" @tap="checkVoucher('screenshot')" v-else></view>
							取件码截图
						</view>
						<view class="" v-if="selected == 'screenshot'">
							<view class="upload-img" @tap="pictureAdd"
								style="background: #eee;text-align: center;line-height: 160rpx;">
								<uni-icons type="camera" size="28" color="#777"></uni-icons>
							</view>
							<view style="overflow-x: scroll;display: flex;width: 350rpx;">
								<view v-if="formData.productPictures !=''"
									v-for="(item,index) in formData.productPictures" :key="index"
									style="width: 160rpx;height: 160rpx;margin-left: 20rpx;">
									<img :src="item.productPicture" alt="" class="upload-img">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content-box">
				<view class="content-title">
					特殊情况<text>*</text>
				</view>
				<view style="flex: 1;">
					<view class="duoxuan" @tap="checkWeightOrVolume"
						:style="{'background':addFormData.isOverweightOrOvervolume?'rgba(166, 255, 234, 1)':'#eee'}">
						超重超大
					</view>
				</view>
			</view>
			<view class="content-box" style="line-height: 200rpx;">
				<view class="content-title">
					订单备注<text>*</text>
				</view>
				<view style="height: 200rpx;background: #eee;border-radius: 40rpx;padding: 20rpx;width: 70%;">
					<textarea name="" id="" cols="30" rows="10" placeholder="请填写备注"
						style="height: 160rpx;width: 100%;"></textarea>
				</view>
			</view>
			<view class="content-box">
				<view class="content-title">
					送达时间<text>*</text>
				</view>
				<view style="flex: 1;font-size: 28rpx;font-weight: 700;" @tap="checkTime">
					{{addFormData.deliveryTime}} <uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view style="width: 100%;height: 240rpx;"></view>
		</view>
		<view class="buy-bottom">
			<view class="bottom-btn">
				直接购买
			</view>
		</view>
		
		<!-- 地址簿弹出层 -->
		<uni-popup ref="bookPopup" background-color="#fff">
			<view class="book-popup-content">
				<address-list></address-list>
			</view>
		</uni-popup>
		<delivery-time-op @dataCallback="dataCallback" @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'
	import addressList from '@/package1/address/addressList.vue'
	export default {
		data() {
			return {
				selected: 'phone',
				isPaotui: true,
				menuButtonInfo: {},
				addFormData: {
					qu: '',
					song: '',
					num: 0,
					phone: '',
					codeList: [{
						code: ''
					}],
					picture: [],
					isOverweightOrOvervolume: false,
					deliveryTime: '立即送达'
				},
				content: []
			}
		},
		components: {
			deliveryTimeOp,
			addressList
		},
		onLoad() {
			
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			openAddressBook(){
				this.$refs.bookPopup.open('bottom')
				
			},
			checkTime(){
				this.$refs.model.open();
				this.generateDeliveryTimes()
			},
			//时间选择器获取时间数据
			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
					}
				];
			},

			//切换日期
			dataCallback(type) {
				console.log("11111111111")
			},
			//时间选择器点击后
			timeCallback(val) {
				this.addFormData.deliveryTime = val.timestr
				this.$refs.model.close()
			},
			checkWeightOrVolume() {
				this.addFormData.isOverweightOrOvervolume = !this.addFormData.isOverweightOrOvervolume

			},
			addCode() {
				this.addFormData.codeList.push({
					code: ''
				})
			},
			delCode(index) {
				this.addFormData.codeList.splice(index, 1)
			},
			checkVoucher(type) {
				if (type == this.selected) return;
				this.selected = type;

				this.addFormData.phone = '',
					this.addFormData.codeList = [{
						code: ''
					}]
				this.addFormData.picture = []
			},
			toggleReply() {
				this.isExpanded = !this.isExpanded;
			},
			checkTab(index) {
				for (let i = 0; i < this.menuList.length; i++) {
					if (i == index) {
						this.menuList[i].checked = true
					} else {
						this.menuList[i].checked = false
					}
				}
			},
			//查看大图
			largeImg(img) {
				this.bigImg = 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/00b1f011787c4549bbea650d95a4eb39.png'
				this.$refs.imgPopup.open()
			},
			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;
		overflow: hidden;
	}

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

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

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

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

	.content {
		position: absolute;
		top: 360rpx;
		width: 100%;
		overflow: scroll;
		height: 80%;
		background: #fff;
		padding: 0 2.5%;
	}

	.tab1 {
		width: 100%;
		height: 160rpx;
		position: relative;

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

	.upload-img {
		width: 160rpx;
		height: 160rpx;
	}

	.dizhi {
		display: flex;
		margin-bottom: 20rpx;
	}

	.dizhi-tu {
		width: 50rpx;
		height: 50rpx;
		margin: 26rpx 20rpx 0 0;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.dizhi1 {
		flex: 1;
		background: #eee;
		border-radius: 20rpx;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		padding: 0 20rpx;
	}

	.dizhi-ming {
		flex: 1;
		font-weight: 700;
	}

	.dizhi-btn {
		width: 112rpx;
		height: 50rpx;
		background: #fff;
		line-height: 50rpx;
		text-align: center;
		border: 1px solid #777;
		border-radius: 50rpx;
		margin-top: 26rpx;
	}

	.content-box {
		width: 100%;
		display: flex;
		line-height: 120rpx;
	}

	.content-title {
		font-size: 28rpx;
		font-weight: 700;
		margin-right: 40rpx;
	}

	.radio-check {
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		width: 48rpx;
		height: 48rpx;
		border-radius: 48rpx;
		text-align: center;
		line-height: 48rpx;
		margin: 36rpx 20rpx 0 0;
	}

	.radio-no-check {
		width: 48rpx;
		height: 48rpx;
		border-radius: 48rpx;
		border: 1px solid #eee;
		margin: 36rpx 20rpx 0 0;
	}

	.check-input {
		border: 1px solid rgba(0, 35, 28, 0.1);
		border-radius: 20rpx;
		height: 70rpx;
		width: 75%;
		margin-bottom: 20rpx;
	}

	.check-add {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background: rgba(166, 255, 234, 1);
		margin-top: 20rpx;
		border-radius: 10rpx;
		font-size: 22rpx;
	}

	.duoxuan {
		display: inline-block;
		text-align: center;
		height: 72rpx;
		background: #eee;
		line-height: 72rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
		color: #777;
		margin-right: 20rpx;
	}

	.buy-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 150rpx;
		display: flex;
		background: #fff;
		z-index: 99;
		box-shadow: 0 -20rpx 30rpx rgba(0, 0, 0, 0.3);
	}

	.bottom-btn {
		width: 90%;
		height: 100rpx;
		background: linear-gradient(90deg, #e3ff96, #a6ffea);
		font-size: 26rpx;
		font-weight: 700;
		line-height: 100rpx;
		text-align: center;
		border-radius: 100rpx;
		margin: 20rpx auto;
	}
	.book-popup-content{
		position: relative;
		height: 1200rpx;
		width: 100%;
		padding: 20rpx;
		overflow: scroll;
	}
</style>