<template>
	<view class="background">
		<cu-custom style="color: #FFFFFF;" :isBack="true">
			<block slot="content">
				<text style="color: #FFFFFF;">确认订单</text>
			</block>
		</cu-custom>
		<view style="margin-left: 20rpx;margin-right: 20rpx;">
			<!-- 地址描述 -->
			<navigator url="../mine/minePage/myAddress"
				style="margin-top: 38prx;padding: 0rpx 25rpx 34rpx 33rpx;border-radius: 20rpx;background-color: #FFFFFF">
				<view class="" v-if="addressInfo">
					<view class="flex align-center justify-between">
						<text
							style="margin-top: 39rpx;font-size: 34rpx;font-weight: bold;color: #111111;">{{addressInfo.address}}
							<text class="margin-left-xs"> {{addressInfo.detailed}}</text></text>
						<image src="../../static/arrows_right.png"
							style="width: 24rpx;height: 24rpx;margin-top: 39rpx;">
						</image>
					</view>
					<view class="align-center flex" style="margin-top: 20rpx;">
						<text style="font-size: 26rpx;font-weight: 400;color: #111111;">{{addressInfo.name}}</text>
						<text
							style="font-size: 26rpx;font-weight: 400;color: #111111;margin-left: 28rpx;">{{addressInfo.phone}}</text>
					</view>
				</view>
				<view class="flex justify-between align-center" v-else
					style="padding-top: 30rpx;font-size: 34rpx;font-weight: bold;color: #999">
					<text>请选择服务地址</text>
					<image src="../../static/arrows_right.png" style="width: 24rpx;height: 24rpx;">
					</image>
				</view>

			</navigator>
			<!-- 订单描述 -->
			<view style="margin-top: 15rpx; background-color: #FFFFFF;border-radius: 20rpx;">

				<view @click="selectServerTime" class="flex align-center justify-between"
					style="padding: 33rpx 0rpx 33rpx 0rpx;border-bottom: #EEEEEE 1rpx solid;margin-left: 29rpx;margin-right: 29rpx;">
					<text style="font-size: 29rpx;font-weight: bold;color: #111111;">上门时间</text>

					<view class="align-center flex">
						<text
							style="margin-left: 29rpx;margin-right: 29rpx; color: #999999; font-size: 26rpx;font-weight: bold;">{{form.appointmentStartTime}}</text>
						<image src="../../static/arrows_right.png" style="width: 23rpx;height: 23rpx;"></image>
					</view>
				</view>
				<view class="flex align-center justify-between"
					style="padding: 33rpx 0rpx 33rpx 0rpx;border-bottom: #EEEEEE 1rpx solid;margin-left: 29rpx;margin-right: 29rpx;">
					<text style="font-size: 29rpx;font-weight: bold;color: #111111;">服务数量</text>

					<view class="align-center flex">
						<image src="../../static/minus_icon.png" style="width: 52rpx;height: 52rpx;"
							@click="subTimeNumber"></image>
						<text style="margin-left: 29rpx;margin-right: 29rpx;">{{form.goodsCounts}}</text>
						<image src="../../static/add_icon.png" style="width: 52rpx;height: 52rpx;"
							@click="addTimeNumber"></image>
					</view>

				</view>
				<view @click="gotoRemark" class="flex align-center justify-between"
					style="padding: 33rpx 0rpx 33rpx 0rpx;margin-left: 29rpx;margin-right: 29rpx;">
					<text style="font-size: 29rpx;font-weight: bold;color: #111111;">备注</text>

					<view class="align-center flex">
						<text v-if="!remark"
							style="margin-left: 29rpx;margin-right: 29rpx; color: #999999;font-weight: 500;font-size: 26rpx;">可填写特殊需求</text>
						<text v-else
							style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 60vw;margin-right: 20rpx;">{{remark}}</text>
						<image src="../../static/arrows_right.png" style="width: 23rpx;height: 23rpx;"></image>
					</view>
				</view>
			</view>
			<!-- 公司描述 -->
			<view style="margin-top: 15rpx; background-color: #FFFFFF;border-radius: 20rpx;">
				<view style="margin-left: 20rpx;margin-right: 20rpx;">

					<view class="flex align-center"
						style="padding: 15rpx 0rpx 15rpx 0rpx;border-bottom: #EEEEEE 1rpx solid; ">
						<image mode="aspectFill" :src="imageUrl"
							style="width: 90rpx;height: 72rpx; border-radius: 10rpx;"></image>
						<text
							style="font-size: 26rpx;font-weight: 500;color: #666666;margin-left: 21rpx;">{{orderParam.merchant.merchantName}}</text>
					</view>

					<view class="flex align-start" style="padding:35rpx 0rpx 44rpx 0rpx;">
						<view>
							<image :src="imageUrl" style="width: 160rpx;height: 128rpx; border-radius: 10rpx;"></image>
						</view>

						<view style="font-size: 28rpx;font-weight: 400;color: #111111;margin-left: 19rpx;">
							<text>[包年]经典户型日式保洁-深度清洁[包 经典户型日式保洁-深度清洁</text>
							<view class="flex align-center" style="margin-top: 27rpx;">
								<text
									style="font-size: 24rpx;font-weight: 500;color: #666;">{{orderParam.realName}}</text>
								<text
									style="font-size: 24rpx;font-weight: 500;color: #D09A6C;margin-left: 21rpx;">{{orderParam.serverLevel=='001'?'初级':orderParam.serverLevel=='002'?'中级':orderParam.serverLevel=='003'?orderParam.serverLevel=='004':'金牌'}}家政</text>
							</view>
							<view class="flex align-center justify-between">
								<view></view>
								<view class="flex align-center">
									<text
										style="font-size: 30rpx;font-weight: bold;color: #FF1414;">{{orderParam.goodsServerPrice}}</text>
									<text
										style="font-size: 26rpx;font-weight: 500;color: #333333; margin-left: 5rpx;">元/{{orderParam.monad}}</text>
								</view>
							</view>
						</view>

					</view>

				</view>
			</view>
			<!-- 优金豆描述 -->
			<view class="flex align-center justify-between" v-if="configFlag"
				style="margin-top: 15rpx; background-color: #FFFFFF;border-radius: 20rpx;">
				<text
					style="font-size: 29rpx;font-weight: 500;color: #666666;margin-left: 29rpx;">有{{coinNumber}}个优金豆可抵扣{{coinPrice}}元</text>
				<view class="flex align-center" style="padding: 20rpx 10rpx 20rpx 0;">
					<text style="font-size: 29rpx;font-weight: bold;color: #FF1414;margin-right: 20rpx;">
						<text class="margin-right-xs">-</text> ¥{{coinPrice}}</text>
					<view class="bg-f8 " :style="{'background-color':form.chooseFlag?'#FC6035':'' }"
						style="border-radius: 50%;padding: 5rpx;border: 1rpx solid #CCCCCC;width: 40rpx;height: 40rpx;"
						@click="form.chooseFlag=!form.chooseFlag">
						<u-icon name="checkbox-mark" color="#fff" v-if="form.chooseFlag"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view style="position: fixed;bottom: 0; height: 122rpx; background-color: #E3E3E3;width: 100vw;z-index: 9;">
			<view class="flex align-center justify-between">
				<view style="margin-left: 43rpx;">
					<view class="flex align-center" style="margin-top: 20rpx;">
						<text style="font-size: 26rpx;font-weight: 500;color: #111;">总计：</text>
						<text style="font-size: 28rpx;font-weight: bold;color: #FF1414;margin-left: 3rpx;">¥</text>
						<text
							style="font-size: 38rpx;font-weight: bold;color: #FF1414;margin-left: 5rpx;">{{orderMoney}}</text>
					</view>
					<view style="font-size: 24rpx;font-weight: 500;color: #666;" v-if="form.chooseFlag">已优惠
						¥{{coinPrice}}</view>
				</view>
				<view @click="orderConfirm"
					style="margin: 21rpx 22rpx 0rpx 0rpx;background-color: #FF1414;height: 80rpx;padding: 0rpx 87rpx 0rpx 88rpx;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;font-weight: bold;border-radius: 8rpx;">
					立即预约</view>
			</view>
		</view>

		<view style="z-index: 9999;">
			<u-popup v-model="showSelectTime" mode="bottom" border-radius="30">
				<view style="padding-top: 40rpx;">
					<view class="flex align-center justify-between"
						style="padding: 0rpx 41rpx 27rpx 47rpx;border-bottom: #EEEEEE 1rpx solid;">
						<view style="font-size: 34rpx;font-weight: bold;color: #111111;">请选择服务时间</view>
						<view @click="closeSelectServerTime">
							<image src="../../static/close_x.png" style="width: 27rpx;height: 27rpx;"></image>
						</view>

					</view>
					<scroll-view scroll-x="true">
						<view class="flex">
							<view v-for="(item,index) in timeSection" :key='index'>
								<view @click="selectTimeClick(index)"
									style="width: 170rpx;text-align: center;padding-top: 40rpx;">
									<view
										:class="{select_day_tittle:index === selectTimeIndex, unselect_day_tittle:index != selectTimeIndex}">
										{{formatWeek( index,item.week)}}
									</view>
									<view
										:class="{select_day_content:index === selectTimeIndex, unselect_day_content:index != selectTimeIndex}">
										{{formatTime( item.date) }}
									</view>
									<view v-if="index == selectTimeIndex"
										style="margin-top: 20rpx;height: 10rpx;background-color: #FC6035;"></view>
								</view>
							</view>

						</view>
					</scroll-view>
				</view>
				<!-- 日期选择 -->
				<view style="padding: 30rpx 30rpx 40rpx 30rpx; background-color: #F6F6F6;">
					<view class="" style="display: flex;flex-wrap: wrap;">
						<view v-for="(item,index) in subscribeTimeList.timeSectionList"
							style="width: calc(25% - 25.5rpx); " :class="{left_0:index % 4 == 0,left_30:index % 4 != 0}"
							:key="index">
							<view @click="selectDateClick(index)" class="time_item"
								:class="{no_time_item_backgroud:item.booked,
								have_time_item_background:!item.booked,select_date_item_background:!item.booked&& index == selectTimeCellIndex}">
								<view>
									<view
										:class="{no_time_item_date:item.booked,
										have_time_item_date:item.booked && selectTimeCellIndex != index,select_date_item: !item.booked&& selectTimeCellIndex == index}">
										{{item.startTime.substring(0,item.startTime.length-3)}}
									</view>
									<view v-if="item.booked" :class="{no_time_item_explain:item.booked }">约满
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view style="padding: 30rpx 70rpx;" @click="saveTime">
					<view class="select_time_sure">确认</view>
				</view>
			</u-popup>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				addressInfo: {},
				imageUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F59acfca299212.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643881861&t=ef9d38a179c4f1ee10d75af21996eafb",
				selectTimeIndex: 0,
				showSelectTime: false,
				remark: "",
				dayList: [{
						tittle: "明天",
						content: "01月07日",
					},
					{
						tittle: "后天",
						content: "01月08日",
					},
					{
						tittle: "周二",
						content: "01月09日",
					},
					{
						tittle: "周三",
						content: "01月10日",
					},
					{
						tittle: "周四",
						content: "01月11日",
					},
					{
						tittle: "周四",
						content: "01月11日",
					},
					{
						tittle: "周四",
						content: "01月11日",
					},
					{
						tittle: "周四",
						content: "01月11日",
					},
					{
						tittle: "周四",
						content: "01月11日",
					},
				],
				subscribeTimeList: [],
				selectTimeCellIndex: -1,
				orderParam: {},
				preferentialPrice: 0,
				form: {
					chooseFlag: false,
					memberId: "", //会员id
					merchantId: "", //商户ID
					serverId: "", //服务人员ID
					appointmentStartTime: "请选择时间", //预约起始时间(yyyy-MM-dd HH:mm:ss)

					orderAmount: "", //订单金额
					goodsCounts: 1, //订单商品数量
					orderType: "", //订单类型 001家政 002维修
					totalAmount: "", //实付总价
					addressId: "", //会员地址id
					price: "", //商品单价
					goodsId: "", //商品id
					singleTime: "", //单次服务标准时长,
					goodsCoin: 0,
				},
				coinPrice: 0,
				coinNumber: 0,
				configFlag: false,
				timeSection: [],
				tempTimeIndex: ''
			};
		},
		onLoad() {
			this.init();
			this.getTimeSection();
			this.getCoin();
			this.getConfig();
		},
		onUnload() {
			uni.removeStorageSync("personDetail");
		},
		onShow() {
			this.addressInfo = uni.getStorageSync("address");
			// 更新addressid
			this.form.addressId = uni.getStorageSync("address").addressId;

			uni.$once("query", (query) => {
				console.log("返回的参数=>", query);
				this.remark = query;
			});
		},
		computed: {
			// 计算实际金额
			orderMoney() {
				//服务时间数量        单次服务价格                 											  //优惠
				return (
					this.form.goodsCounts * this.orderParam.goodsServerPrice -
					this.preferentialPrice
				);
			},
		},

		methods: {
			// 确认时间
			saveTime() {
				console.log( this.subscribeTimeList)
				const temp = this.subscribeTimeList.timeSectionList[this.selectTimeCellIndex].startTime;
				this.form.appointmentStartTime = this.subscribeTimeList.date +' ' + temp
				this.closeSelectServerTime()
			},
			formatWeek(index, week) {
				if (index == 0) {
					return '今天'
				} else if (index == 1) {
					return '明天'

				} else if (index == 2) {
					return '后天'
				} else {
					if (week == 1) {
						return '周一'
					} else if (week == 2) {
						return '周二'
					} else if (week == 3) {
						return '周三'
					} else if (week == 4) {
						return '周四'
					} else if (week == 5) {
						return '周五'
					} else if (week == 6) {
						return '周六'
					} else {
						return '周日'
					}

				}
			},
			formatTime(dateStr) {
				let flag = "";
				if (dateStr == undefined || dateStr == null) {
					return "";
				}
				var date = dateStr.substring(0, dateStr.length);
				date = date.replace(/-/g, "/");
				// console.log(date);
				var timestamp = new Date(date).getTime();
				return this.$u.timeFormat(timestamp, "mm月dd日");
			},
			// 获取时间列表
			getTimeSection() {
				const param = {
					serverId: this.orderParam.serverId,
				};
				this.$u.api
					.timeSection(param)
					.then((res) => {
						console.log(res.data);
						if (res.code == 200) {
							this.timeSection = res.data;
							this.subscribeTimeList = this.timeSection[0]
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},
			init() {
				this.orderParam = uni.getStorageSync("personDetail");
				this.form.serverId = this.orderParam.serverId;
				this.form.memberId = uni.getStorageSync("userInfo").memberId;
				this.form.merchantId = this.orderParam.merchantId;
				this.orderParam.serverId = 2;
				this.form.price = this.orderParam.goodsServerPrice;
				this.form.orderType = this.orderParam.bizType;
				this.form.singleTime = this.orderParam.singleTime;
				this.form.goodsId = this.orderParam.goodsId;
			},
			orderConfirm() {
				if (
					!this.form.appointmentStartTime 
				) {
					this.$api.msg("请选择上门时间");
				} else if (this.form.goodsCounts < 1) {
					// 验证服务数量
				} else {
					this.form.phone = "18551270398";
					this.form.totalAmount = this.orderMoney; //实付金额
					this.form.orderAmount =this.form.goodsCounts * this.orderParam.goodsServerPrice; //订单金额
					this.form.memo = this.remark; //备注
					this.form.goodsCoin = this.coinNumber;
					console.log(this.form, "this.form");
					this.$u.api
						.sureOrder(this.form)
						.then((res) => {
							console.log(res);
							if (res.code == 200) {
								this.gotoPayment();
							}
						})
						.catch((error) => {
							console.log(error);
						});
				}
			},
			/// 前往支付页面
			gotoPayment() {
				uni.navigateTo({
					url: "payment",
				});
			},
			// 查询商家是否允许使用优金豆
			getConfig() {
				this.$u.api
					.getConfig()
					.then((res) => {
						// console.log(res)
						if (res.code == 200) {
							if (res.data == true) {
								this.getCoin();
								this.configFlag = true;
							} else {
								this.configFlag = false;
							}
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},
			// 查优金豆
			getCoin() {
				// const phone = uni.getStorageSync('userInfo').phone
				const phone = "18551270398";
				this.$u.api
					.getCoin(phone)
					.then((res) => {
						// console.log(res)
						if (res.code == 200) {
							if (res.data >= 500) {
								this.coinNumber = 500;
								this.coinPrice = 5;
							} else if (res.data >= 400 && res.data < 500) {
								this.coinNumber = 400;
								this.coinPrice = 2;
							} else if (res.data >= 300 && res.data < 400) {
								this.coinNumber = 300;
								this.coinPrice = 3;
							} else if (res.data >= 200 && res.data < 300) {
								this.coinNumber = 200;
								this.coinPrice = 2;
							} else if (res.data >= 100 && res.data < 200) {
								this.coinNumber = 100;
								this.coinPrice = 1;
							}
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},

			getServerTime() {
				this.$u.api
					.serverTime(this.orderParam.serverId)
					.then((res) => {
						console.log(res);
						if (res.code == 200) {}
					})
					.catch((error) => {
						console.log(error);
					});
			},
			getdisServerTime() {
				this.$u.api
					.disServerTime(this.orderParam.serverId)
					.then((res) => {
						console.log(res);
						if (res.code == 200) {}
					})
					.catch((error) => {
						console.log(error);
					});
			},

			// 加服务时间
			addTimeNumber() {
				this.form.goodsCounts++;
				this.getServerTime();
				this.getdisServerTime();
				// this.computeTotalAmount()
			},
			// 减服务时间
			subTimeNumber() {
				if (this.form.goodsCounts <= 1) {
					return;
				} else {
					this.form.goodsCounts--;
				}
				// this.computeTotalAmount()
			},
			/// 前往备注
			gotoRemark() {
				uni.navigateTo({
					url: "orderRemark?content=" + this.remark,
				});
			},

			selectServerTime() {
				this.showSelectTime = true;
			},
			closeSelectServerTime() {
				this.selectTimeCellIndex = -1;
				this.showSelectTime = false;
			},
			//选择日期
			selectTimeClick(index) {
				this.selectTimeIndex = index;
				this.subscribeTimeList = this.timeSection[index]
			},
			// 选择时间
			selectDateClick(index) {
				var item = this.subscribeTimeList.timeSectionList[index];
				console.log(item, index)
				if (item.booked) {
					return;
				}
				this.selectTimeCellIndex = index;
			},
		},
	};
</script>

<style scoped lang="scss">
	.background {
		background-image: url(../../static/sure_order_backgound_icon.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.select_day_tittle {
		color: #fc6035;
		font-size: 30rpx;
		font-weight: bold;
	}

	.unselect_day_tittle {
		color: #333333;
		font-size: 26rpx;
		font-weight: 500;
	}

	.select_day_content {
		margin-top: 16rpx;
		color: #fc6035;
		font-size: 26rpx;
		font-weight: bold;
	}

	.unselect_day_content {
		color: #999999;
		margin-top: 19rpx;
		font-size: 26rpx;
		font-weight: 500;
	}

	.left_0 {
		margin-left: 0;
	}

	.left_30 {
		margin-left: 30rpx;
	}

	.time_item {
		border-radius: 8rpx;
		margin-top: 20rpx;
		height: 114rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.no_time_item_backgroud {
		background-color: #ededed;
	}

	.have_time_item_background {
		background-color: #ffffff;
	}

	.no_time_item_date {
		color: #999999;
		font-weight: 500;
		font-size: 26rpx;
	}

	.have_time_item_date {
		color: #333333;
		font-weight: bold;
		font-size: 26rpx;
	}

	.no_time_item_explain {
		color: #999999;
		font-weight: 500;
		font-size: 24rpx;
	}

	.select_date_item_background {
		border: #fc6035 1rpx solid;
		background-color: #fff4f1;
	}

	.select_date_item {
		font-size: 26rpx;
		font-weight: bold;
		color: #fc6035;
	}

	.select_time_sure {
		background: #fc6035;
		box-shadow: 0rpx 5rpx 14rpx 0rpx #eb4553;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 34rpx;
		font-weight: 500;
		text-align: center;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
	}
</style>
