<template>
    <view class="bg">
        <!-- 循环渲染每个订单信息 -->
        <view class="detail-container" v-for="(order, index) in skuInfo" :key="index">
            <view class="common-container info-container">
                <view class="flex-between" style="align-items: flex-start;">
                    <view class="info-title text-overflowRows">{{order.sku_name}}</view>
                    <view class="policy-btn flex-shrink-0 flex flex-items-center" @click="openPopRule(index)">
                        房型信息
                        <uni-icons color="#71B580" style="height: 32rpx;" type="right" size="12"></uni-icons>
                    </view>
                </view>

                <view class="tag-container text-overflow">
                    {{order.sku_model.bed_type}} | {{order.sku_model.area}}
                    | {{order.sku_model.window}} | 可入住{{order.sku_model.max_room_num}}人
                    | {{order.sku_model.breakfast}}
                </view>

                <view class="order-time flex-between" style="justify-content: space-around;">
                    <view class="time">
                        <view style="font-size: 35rpx;font-weight: bold;">
                            {{new Date(order.selectDate.startDay).Format('MM-dd')}}</view>
                        <view style="padding-left:14rpx">{{ ShowDateDay(new Date(order.selectDate.startDay).getDay()) }}
                        </view>
                        <view>入住</view>
                    </view>
                    <view class="cal-day">
                        共{{order.selectDate.differDays}}晚
                    </view>
                    <view class="time">
                        <view style="font-size: 35rpx;font-weight: bold;">
                            {{new Date(order.selectDate.endDay).Format('MM-dd')}}</view>
                        <view style="padding-left:14rpx">{{ShowDateDay(new Date(order.selectDate.endDay).getDay()) }}</view>
                        <view>离店</view>
                    </view>
                </view>

                <view class="notice-container">
                    <view class="flex" style="align-items: center;">
                        <view class="flex-shrink-0" style="padding-top: 4rpx;">
                            <image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/dui.png"></image>
                        </view>
                        <view class="flex-1 w-1rpx" style="padding-left: 14rpx;">
                            <view v-html="formateRichText(order.sku_model.bookinfo)"></view>
                        </view>
                    </view>

                    <view class="flex" style="padding-top: 22rpx;align-items: center;">
                        <view class="flex-shrink-0" style="padding-top: 4rpx;">
                            <image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/tanhao.png">
                            </image>
                        </view>
                        <view class="flex-1 w-1rpx" style="padding-left: 14rpx;">
                            <view>证件要求：大陆居民身份证登记入住</view>
                        </view>
                    </view>

                </view>

            </view>

            <view class="common-container form-container">
                <view class="form-title">
                    <text style="font-weight: bold;font-size: 35rpx;padding-right: 28rpx;">预订信息</text>
                    <text>姓名需与证件一致</text>
                </view>
                <view class="btn-box flex-column">
                    <view class="line  w-full" style="border-top: none;">
                        <view class="left">房间数</view>
                        <view class="input flex" style="justify-content: flex-end;">
                            <view class="num-box">
                                <view :class="['ctrl',order.buyNum>1?'':'disabled']" @click="reduce(order,index)">-</view>
                                <input class="num" type="text" v-model="order.buyNum" :disabled='true' />
                                <view :class="['ctrl']" @click="plus(order,index)">+</view>
                            </view>
                        </view>
                    </view>
                    <view class="line  w-full" v-for="(user, idx) in roomUser[index]" :key="idx">
                        <view class="left">房间{{idx+1}}</view>
                        <input class="input" type="text" placeholder="请输入住客姓名" v-model="user.name" />
                    </view>
                    <view class="line  w-full">
                        <view class="left">联系电话</view>
                        <view class="flex flex-items-center input">
                            <input class="input" type="text" placeholder="请输入联系手机号" v-model="order.phone" />
                            <!-- <uni-icons v-if="order.phone.length>0" style="margin-left: 30rpx;" type="closeempty" size="14"
                                @click="order.phone = ''"></uni-icons> -->
                        </view>

                    </view>
                </view>
            </view>
        </view>
		
		<navigator :url="'/subPackages/order/orderCoupon?allprice='+ price + '&sku_ids='+ skuIds" class="coupon-box flex-between" v-if="!isShoppingCart">
		    <text>优惠券</text>
		    <view style="display: flex;align-items: center;">
		        <view class="add-btn" v-if="!coupon">选择优惠券</view>
		        <view style="display: flex;align-items: center;color: #6A8A2D;font-weight: bold;" v-if="coupon && coupon.activity">
		            <view v-if="coupon.activity.discount_type == 'pricebreak'">-￥{{coupon.activity.money/100}}</view>
		            <view v-else>{{coupon.activity.fold}}折</view>
		        </view>
		        <img src="https://static.ticket.sz-trip.com/changyoutaihu/images/user/rightIcon.png" class="icon-coupon">
		    </view>
		</navigator>

        <view class="btn-list">
            <view class="price-box">
                <view class="text">合计:</view>
                <view class="price">{{ total() / 100 }}</view>
                <!-- <view class="post-text" v-if="sendType==1&&post">含邮费:¥{{ post / 100 }}</view> -->
            </view>
            <view class="btn" @click="order()">立即预订</view>
        </view>

        <!-- 酒店详情弹窗 -->
        <uni-popup ref="popupRule" type="bottom" :safe-area="false" background-color="#F7F7F7">
            <view class="popup-content-date">
                <view class="popup-content-title flex">
                    <view class="flex-1 w-1rpx text-overflow">
                        {{skuInfo[popupIndex].sku_name}}
                    </view>
                    <img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="closePopupRule"
                        style="width: 31rpx;height: 31rpx;" class="flex-shrink-0">
                </view>
                <view class="content">
                    <view class="swipe-box" style="height: 347rpx;" v-if="skuInfo[popupIndex] && skuInfo[popupIndex].listimg && skuInfo[popupIndex].listimg.length > 0">
                        <swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular
                            indicator-dots indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff"
                            @change="popSwiperChange" :current="0">
                            <swiper-item v-for="(item, idx) in skuInfo[popupIndex].listimg" :key="item.id">
                                <view class="swiper-item" style="height: 347rpx;">
                                    <image class="item-img pop-swiper-image" :src="showImg(item)" mode="aspectFill">
                                    </image>
                                </view>
                            </swiper-item>
                        </swiper>

                        <view class="swiper-pointer" style="right:30rpx;bottom: 20rpx;">
                            {{popSwiperCurrent}}/{{skuInfo[popupIndex].listimg.length}}
                        </view>
                    </view>

                    <view class="pop-detail-container" v-if="skuInfo[popupIndex] && skuInfo[popupIndex].sku_model">
                        <view class="pop-detail-title">房型信息</view>
                        <view v-html="formateRichText(skuInfo[popupIndex].sku_model.detailinfo)"></view>
                    </view>
                </view>
            </view>
        </uni-popup>


    </view>
</template>

<script>
export default {
    data() {
        return {
            id: null,
            popSwiperCurrent: 1,
            popupIndex: 0,

            skuInfo: [], // 酒店信息数组
            roomUser: [],
            allSeldDate: [],
            coupon: '',
            price: 0,
			skuIds: [],
			isShoppingCart: 0,
			orderList: []
        }
    },
    onReady() {
        // 清除优惠券
        this.$store.commit("choseCoupon", "");
    },
    onShow() {
        this.coupon = this.$store.state.user.coupon
        console.log(this.coupon)
    },
    onLoad(options) {
		if(options.isShoppingCart) this.isShoppingCart = options.isShoppingCart
        this.initOrderDate()
    },
    methods: {
        popSwiperChange(e) {
            this.popSwiperCurrent = e.detail.current + 1
        },

        // 初始化
        initOrderDate() {
            let data = [];
            try {
                data = JSON.parse(uni.getStorageSync('hotelOrderInfo'));
                console.log(data)
            } catch (e) {
                data = [];
                setTimeout(() => {
                    uni.navigateBack()
                }, 1000);
            }

            this.skuInfo = [];
            this.roomUser = [];

            data.forEach((item) => {
                this.skuInfo.push(item.skuInfo);
				this.skuIds.push(item.skuInfo.id);
				
				const num = item.skuInfo.buyNum || 1;
				// 根据 buyNum 创建对应数量的住客对象
				const users = Array(num).fill().map(() => ({ name: '' }));
				this.roomUser.push(users);
                try {
                    item.skuInfo.phone = (JSON.parse(uni.getStorageSync('userInfo')).mobile);
                } catch (e) {
                    item.skuInfo.phone = '';
                }
                this.getPriceCal(item.skuInfo);
            });
        },
        // 查看房型
        viewDetail() {
            this.popSwiperCurrent = 1;
            this.openPopRule();
        },

        plus(order,index) {
            order.buyNum += 1;
            this.roomUser[index].push({ name: '' });
        },
        reduce(order,index) {
            if (order.buyNum > 1) {
                order.buyNum -= 1;
                this.roomUser[index].pop();
            }
        },

        total() {
            let totalMoney = 0;
            this.skuInfo.forEach((item, index) => {
				let disfferMoney = 0;
				if(item.allSeldDate && item.allSeldDate.length > 0) {
					item.allSeldDate.forEach(v => {
					    disfferMoney += (v.price || 0);
					});
				}
                disfferMoney = ((disfferMoney * item.buyNum) || 0);
                totalMoney += disfferMoney < 0 ? 0 : disfferMoney;
            });
			this.price = totalMoney
			if (this.coupon) {
			    if (this.coupon.activity.discount_type == 'pricebreak') {
			        totalMoney = totalMoney - this.coupon.activity.money;
			    } else {
			        totalMoney = totalMoney - (totalMoney * this.coupon.activity.fold / 10);
			    }
			}
            return totalMoney;
        },

        order() {
            this.roomUser.forEach((users, index) => {
                users.forEach(v => v.name = v.name.trim());
            });

            // 校验
            for (let i = 0; i < this.skuInfo.length; i++) {
                if (!this.IsTel(this.skuInfo[i].phone)) {
                    uni.showToast({
                        title: '手机号格式校验失败',
                        icon: 'none'
                    });
                    return;
                }
                if (this.roomUser[i].some(v => {
                    return v.name.length == 0;
                })) {
                    uni.showToast({
                        title: '请输入住客姓名',
                        icon: 'none'
                    });
                    return;
                }

                let roomNames = [];
                this.roomUser[i].forEach(item => {
                    roomNames.push(item.name);
                });

                if (roomNames.length != Array.from(new Set(roomNames)).length) {
                    uni.showToast({
                        title: '住客姓名不能相同',
                        icon: 'none'
                    });
                    return;
                }
				this.skuInfo[i].roomNames = roomNames
            }
			// 如果是购物车下单
			if (this.isShoppingCart) {
				this.$store.commit("changeHotelOrderList", this.skuInfo);
				// uni.setStorageSync("hotelOrderList", this.skuInfo)
				this.goCartNextPage(4)
				return
			}

            let data = {
                coupon_id: this.coupon ? this.coupon.id : null,
                product_list: this.skuInfo.map((order, index) => {
                    let roomNames = this.roomUser[index].map(item => item.name);
                    return {
                        type: 'hotel',
                        customer_name: roomNames.toString(),
                        reserve_mobile: order.phone,
                        product_id: order.product_id,
                        sku_id: order.id,
                        start_date: order.selectDate.startDay,
                        end_date: order.selectDate.endDay,
                        product_num: order.buyNum
                    };
                })
            };

            console.log('data', data);

            this.Post({
                method: 'POST',
                data: JSON.stringify(data)
            }, '/api/order/create').then(res => {
                console.log('成功');
                if (res.code == 1) {
                    uni.removeStorageSync('hotelOrderInfo');
                    this.Post({
                        order_id: res.data.order_id,
                        pay_platform: "miniprogram",
                        pay_method: 'abc'
                    }, '/api/order/pay').then(res => {
                        if (res.data) {
                            uni.requestPayment({
                                nonceStr: res.data.nonceStr,
                                package: res.data.package,
                                paySign: res.data.paySign,
                                signType: res.data.signType,
                                timeStamp: res.data.timeStamp,
                                complete() {
                                    uni.navigateTo({
                                        url: '/subPackages/order/trades'
                                    });
                                }
                            });
                        }
                    });
                }
            });
        },

        closePopupRule() {
            this.$refs.popupRule.close();
        },
        openPopRule(index) {
            this.popupIndex = index;
            this.$refs.popupRule.open();
        },

        getPriceCal(sku) {
            this.Post({
                sku_id: sku.id,
                start_date: sku.selectDate.startDay,
                end_date: sku.selectDate.endDay,
            }, '/api/product/product_date_price').then(res => {
                let seldDate = res.data || [];
                if (seldDate.length > 1) {
                    seldDate.pop();
                }
                sku.allSeldDate = seldDate;
				
				this.total()
            });
        },
    }
}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.bg {
		min-height: 100vh;
		background: #F8F8F8;
		padding-bottom: 200rpx;
	}

	.swipe-box {
		height: 484rpx;
		position: relative;

		.swiper-item-num {
			width: 90rpx;
			height: 40rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 20rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
			line-height: 40rpx;
			position: absolute;
			right: 30rpx;
			bottom: 50rpx;
		}

		.collect {
			position: absolute;
			right: 36rpx;
			top: 36rpx;
			font-size: 23rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.swiper-pointer {
			position: absolute;
			right: 36rpx;
			bottom: 80rpx;
			background: rgba(22, 22, 22, 0.5);
			border-radius: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			padding: 6rpx 14rpx;

		}
	}

	.swiper {
		height: 484rpx;
		position: relative;

		.swiper-item {
			width: 100%;
			height: 484rpx;

			.item-img {
				width: 750rpx;
				height: 484rpx;
			}

			.item-img.pop-swiper-image {
				height: 347rpx;
				border-radius: 13rpx;
			}
		}
	}



	.detail-container {
		width: 100%;
		padding: 26rpx;
	}

	.common-container {
		background: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 22rpx 26rpx;
	}


	.info-container {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;

		.info-title {
			width: 100%;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 35rpx;
			color: #000000;
		}

		.policy-btn {
			width: 160rpx;
			height: 35rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #6A8A27;
			text-align: right;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.tag-container {
			width: 100%;
			padding: 35rpx 0;
		}

		.time-container {
			padding: 22rpx 0;

		}

		.notice-container {
			background: rgba(237, 245, 220, 0.7);
			border-radius: 13rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #000000;
			padding: 22rpx 16rpx;
			margin-top: 28rpx;

			image {
				width: 25rpx;
				height: 25rpx;
			}
		}

	}


	.order-time {
		.time {
			display: flex;
			font-family: PingFang SC;
			font-size: 24rpx;
			color: #000000;
			align-items: center;
		}
	}

	.cal-day {
		background: #EDF5DC;
		border-radius: 18rpx;
		padding: 5rpx 16rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #6A8A27;
	}


	.popup-content-date {
		position: relative;
		background: #F7F7F7;
		top: -33rpx;
		padding: 25rpx 44rpx;
		border-radius: 33rpx;

		.popup-content-title {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 35rpx;
			color: #000000;
			text-align: center;
			padding-bottom: 26rpx;
		}

		.pop-detail-container {
			background: #FFFFFF;
			border-radius: 13rpx;
			padding: 20rpx;
			margin-top: 26rpx;
			max-height: 800rpx;
			overflow-y: auto;

			.pop-detail-title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}
		}
	}


	.btn-list {
		width: 100%;
		height: 166rpx;
		background: #ffffff;
		box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5);
		display: flex;
		position: fixed;
		bottom: 0;
		padding: 20rpx 20rpx;
		align-items: center;
		justify-content: space-between;

		.btn {
			width: 233rpx;
			height: 73rpx;
			background: #6A8A2D;
			border-radius: 11rpx;
			text-align: center;
			line-height: 73rpx;
			font-weight: bold;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.price-box {
			display: flex;
			align-items: center;

			.text {
				font-size: 29rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 500;
				color: #333;
			}

			.price {
				margin-left: 15rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #DC2525;

				&:before {
					content: '¥';
					display: inline-block;
					color: #DC2525;
					font-size: 36rpx;
				}
			}

			.post-text {
				margin-left: 15rpx;
				color: #DC2525;
				font-size: 24rpx;
			}
		}
	}

	.form-container {
		.form-title {
			font-family: PingFang SC;
			color: #000000;
			font-weight: 500;
			font-size: 23rpx;
			display: flex;
			align-items: baseline;
		}

		.left {
			width: 160rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 29rpx;
			color: #000000;
			flex-shrink: 0;
		}

		.line {
			display: flex;
			align-items: center;
			border-top: 1rpx solid #D8D8D8;
			height: 92rpx;
		}

		.input {
			flex: 1;
		}

		input {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 29rpx;
			color: #000000;
		}
	}

	.num-box {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		width: 160rpx;
		justify-content: space-between;

		.num {
			text-align: center;
			width: 50rpx;
		}

		.ctrl {
			width: 47rpx;
			height: 47rpx;
			background: #6A8A27;
			border-radius: 50%;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 42rpx;
			text-align: center;
		}

		.ctrl.disabled {
			background: #E8E8E8;
			color: #999999;
		}
	}
	
	.coupon-box {
		height: 113rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		padding: 0 20rpx;
		margin: 20rpx 26rpx;
		
		.add-btn {
			width: 153rpx;
			line-height: 40rpx;
			background: #6A8A2D;
			border-radius: 9rpx;
			text-align: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
		
		.icon-coupon{
			width: 20rpx;
			height: 20rpx;
			margin-left: 15rpx;
		}
	}
</style>