<template>
	<view class="uni-page">
		<u-navbar placeholder :autoBack="true" bgColor="#fff0e7" title="订单信息"></u-navbar>
		<view class="content-main">
			<view class="info-box">
				<view class="info-title"> 地址信息 </view>
				<view class="info-content">
					<view class="step-line"> </view>
					<view class="step-item">
						<view class="step-icon"> 寄 </view>
						<view class="address-box" v-if="sendAddre">
							<view class="address-info">
								{{ sendAddre.name }} {{ sendAddre.phone }}
							</view>
							<view class="address-detail">
								{{ sendAddre.address }}
							</view>
						</view>
						<view class="address-box" v-else>
							<view class="address-info">请选择寄件地址 </view>
						</view>
						<view class="addres-book-button" @click="toSelectAddress('sendAddre')">
							地址簿<img src="~@/static/01跳转@2x.png" alt="" style="width: 14rpx; height: 25rpx" />
						</view>
					</view>
					<view class="step-item">
						<view class="step-icon step-icon-last"> 收 </view>
						<view class="address-box" v-if="takeAddre">
							<view class="address-info">
								{{ takeAddre.name }} {{ takeAddre.phone }}
							</view>
							<view class="address-info"> </view>
							<view class="address-detail">
								{{ takeAddre.address }}
							</view>
						</view>
						<view class="address-box" v-else>
							<view class="address-info">请选择收件地址 </view>
						</view>
						<view class="addres-book-button" @click="toSelectAddress('takeAddre')">
							地址簿<img src="~@/static/01跳转@2x.png" alt="" style="width: 14rpx; height: 25rpx" />
						</view>
					</view>
				</view>
			</view>
			<view class="info-box">
				<view class="info-title"> 邮寄方式 </view>
				<view class="info-content">
					<view class="info-content-flex">
						<view :class="{
                'post-pattern-item': true,
                'post-pattern-item-active':
                  pattern.id === orderInfo.postPattern,
              }" v-for="pattern in postPattern" :key="pattern.id" @click="
                () => {
                  orderInfo.postPattern = pattern.id;
                  priceInfo.postage.value = pattern.balance;
                }
              ">
							<view class="patter-price">
								{{ pattern.balance }}<text style="font-size: 24rpx">元</text>
							</view>
							<view class="patter-explain">
								{{ pattern.title }}
							</view>
						</view>
					</view>
				</view>
				<!-- 			<EventNotice content="最新活动，开通会员0元寄信">
					<template #leftIcon>
						<image src="/static/12活动@2x.png" style="width: 100%; height: 100%" alt=""></image>
					</template>
					<template #rightIcon>
						<u-icon name="arrow-right" color="#CE7A2C" size="16"></u-icon>
					</template>
				</EventNotice> -->
			</view>
			<view class="info-box">
				<PayPattern v-model="orderInfo.payPattern"></PayPattern>
			</view>
			<view class="info-box">
				<u-cell-group :border="false">
					<!-- 	<u-cell :border="false" title="我的会员" isLink>
						<template #value>
							<view class=""> 暂无会员 </view>
						</template>
					</u-cell> -->
					<u-cell :border="false" title="我的优惠券" isLink @click="toSelectDiscounts">
						<template #value>
							<view style="width: 300rpx; text-align: right">
								{{ discounts ? discounts.title : "" }}
							</view>
						</template>
					</u-cell>
					<u-cell :border="false" title="我的备注" isLink @click="
              () => {
                showExplainInput = true;
              }
            ">
						<template #value>
							<view style="width: 300rpx">
								{{ orderInfo.note }}
							</view>
						</template>
					</u-cell>
				</u-cell-group>
			</view>
		</view>

		<view class="floor-button">
			<u-popup closeable :border="false" :show="showPrice" mode="bottom" :round="40" @close="closePricePanel">
				<view class="price-panel-box">
					<u-cell-group :border="false">
						<u-cell :border="false" v-for="item in priceInfo" :key="item.id">
							<template #title>
								<view class="price-info-title">{{ item.name }}</view>
							</template>
							<template #value>
								<view :class="{
                    'price-info-value': true,
                    'price-info-value-black': item.value <= 0,
                  }">¥ {{ item.value.toFixed(2)}}</view>
							</template>
						</u-cell>
						<view class="" style="display: flex; margin-top: 50rpx">
							<view class="to-view-button">
								费用合计
								<text style="margin-left: 20rpx; color: #ce7a2c">¥<text
										style="font-size: 42rpx; margin-left: 10rpx">{{
                    totalPrice
                  }}</text></text>
							</view>
							<view class="nextstep-button" @click="tpPay"> 立即支付 </view>
						</view>
					</u-cell-group>
				</view>
			</u-popup>

			<u-popup :show="showExplainInput" @close="
          () => {
            showExplainInput = false;
          }
        ">
				<view>
					<u--textarea v-model="orderInfo.note" placeholder="请输入备注信息"></u--textarea>
				</view>
			</u-popup>
			<view class="nextstep-button" @click="confirm"> 确认 </view>
		</view>
		<u-loading-page :loading="isPayOver"></u-loading-page>
	</view>
</template>

<script>
	import {
		toPay,
		getPostList
	} from "../../request/wm.js";
	import EventNotice from "@/components/event-notice/event-notice.vue";
	import PayPattern from "@/components/Pay-patter/Pay-patter.vue";
	export default {
		components: {
			EventNotice,
			PayPattern,
		},
		data() {
			return {
				orderInfo: {
					plan: "",
					postPattern: 1,
					payPattern: 1,
					note: "",
				},
				isPayOver: false,
				postPattern: [{
						id: 1,
						price: 5.2,
						explain: "平信(无物流)",
					},
					{
						id: 2,
						price: 10.0,
						explain: "挂号信",
					},
					{
						id: 3,
						price: 30.0,
						explain: "EMS",
					},
					{
						id: 4,
						price: 30.0,
						explain: "顺丰",
					},
				],
				priceInfo: {
					print: {
						id: 1,
						name: "信件费用-普通打印",
						key: "print",
						value: 0,
					},
					picture: {
						id: 2,
						name: "照片费用",
						key: "picture",
						value: 0,
					},
					postage: {
						id: 3,
						name: "邮寄费用",
						key: "postage",
						value: 0,
					},
					discounts: {
						id: 4,
						name: "我的优惠券",
						key: "discounts",
						value: 0,
					},
				},
				showPrice: false,
				sendAddre: null,
				takeAddre: null,
				discounts: null,
				showExplainInput: false,
				postList: [],
			};
		},
		async onLoad() {
			if (!this.$store.letterInfo) {
				uni.navigateTo({
					url: "/pages/index/index",
				});
			}
			let {
				data
			} = await getPostList();
			this.postPattern = data.data.data;
			this.priceInfo.postage.value = this.postPattern[0].balance;
		},
		methods: {
			test(e) {
				console.log(e, this.orderInfo);
			},
			confirm() {
				if (!this.sendAddre || !this.takeAddre) {
					uni.showToast({
						icon: "error",
						title: "请选择收货地址！",
					});
					return;
				}
				// console.log(this.orderInfo);
				if (!this.$store.letterInfo.coupon) {
					this.$store.letterInfo.coupon = 0;
				}
				this.$store.letterInfo.send_type = this.orderInfo.postPattern;
				this.$store.letterInfo.remark = this.orderInfo.note;
				console.log(this.$store.letterInfo);
				this.showPrice = true;
			},
			closePricePanel() {
				this.showPrice = false;
			},
			toSelectDiscounts() {
				uni.navigateTo({
					url: "/pages/coupon/coupon",
					events: {
						select: ({
							data
						}) => {
							let baseValue = +this.totalPrice + (this.discounts?.balance || 0)
							console.log(baseValue, data.start);
							console.log(baseValue < data.start);
							if (baseValue < data.start) {
								console.log(uni.$u);
								setTimeout(() => {
									uni.$u.toast('不满足优惠券最低使用额度');
								}, 100)
								return

							}
							if (data) {
								this.discounts = data;
								this.priceInfo.discounts.value = 0 - data.balance
								// this.priceInfo.discounts.value = 0 - 5;
								this.$store.letterInfo.coupon = data.id;
							} else {

								// this.priceInfo.discounts.value = 0 - data.balance
								this.priceInfo.discounts.value = 0;
								this.$store.letterInfo.coupon = 0;
							}

							console.log(data);
						},
					},
				});
			},
			toSelectAddress(type) {
				uni.navigateTo({
					url: "/pages/address/address",
					events: {
						selectAddres: ({
							data
						}) => {
							switch (type) {
								case "sendAddre":
									this.sendAddre = data;
									this.$store.letterInfo.send_address =
										`${data.name} ${data.phone} ${data.address}`;
									console.log(this.sendAddre);
									break;
								case "takeAddre":
									this.takeAddre = data;
									this.$store.letterInfo.take_address =
										`${data.name} ${data.phone} ${data.address}`;
									console.log(this.takeAddre);
									break;
								default:
									break;
							}
						},
					},
				});
			},
			async tpPay() {
				this.isPayOver = true;
				try {
					this.$store.letterInfo.pay_payment = this.orderInfo.payPattern;
					let payData = {
						...this.$store.letterInfo,
						isMmanual: undefined,
					};
					let {
						data
					} = await toPay(this.$store.letterInfo);
					if (data.code === 1) {
						this.isPayOver = false;
						// #ifdef H5
						if (this.orderInfo.payPattern === 1) {
							uni.showToast({
								title: data.msg,
							});
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/mine/mine",
								});
							}, 1000);
						} else {
							location.href = data.data.pay.url;
							// window.lo
						}
						// #endif

						// #ifdef MP-WEIXIN
						uni.showToast({
							title: "小程序支付暂未配置",
							icon: "error",
						});
						// #endif
					} else {
						uni.showToast({
							title: data.msg,
							icon: "error",
						});
						this.isPayOver = false;
					}
				} catch (e) {
					this.isPayOver = false;
					//TODO handle the exception
				}
				console.log(data);
			},
		},
		computed: {
			totalPrice() {
				console.log(this.$store.letterInfo);
				this.$store.productionType.forEach((item) => {
					console.log(item.id, this.$store.letterInfo.mail_type);
					if (item.id === this.$store.letterInfo.mail_type) {
						this.priceInfo.print.name = "信件费用-" + item.title;
						this.priceInfo.print.value = +item.price;
					}
				});
				let photoPrices = null;
				if (this.$store.letterInfo.isMmanual) {
					photoPrices = this.$store.photoPrice?.photo_write;
				} else {
					photoPrices = this.$store.photoPrice?.photo_artificial;
				}
				this.$store.letterInfo.thumb?.forEach((file, index) => {
					if (!index) return;
					if (photoPrices && photoPrices[index] !== undefined) {
						this.priceInfo.picture.value += +photoPrices[index];
					} else {
						this.priceInfo.picture.value += +photoPrices[photoPrices.length - 1];
					}
				});
				let value = Object.values(this.priceInfo).reduce((total, next) => {
					console.log(total + next.value);
					return (+total + +next.value).toFixed(2);
				}, 0);
				return value < 0 ? 0 : value
			},
		},
	};
</script>

<style lang="scss" scoped>
	.uni-page {
		display: flex;
		flex-direction: column;
	}

	.content-main {
		flex: 1;
		overflow: auto;
		// height: 100%;
	}

	.info-box {
		margin-top: 30rpx;
		background-color: white;
		min-height: 100rpx;
		border-radius: 40rpx;
		height: fit-content;
		padding: 30rpx 30rpx;

		.info-title {
			font-size: 34rpx;
			font-weight: bold;
		}

		.info-content {
			position: relative;
			padding: 30rpx 0;

			.step-line {
				position: absolute;
				height: calc(60%);
				width: 0;
				// background-color: black;
				border-left: 1rpx black dashed;
				left: 28rpx;
				top: 20%;
			}

			.step-item {
				display: flex;
				margin-bottom: 50rpx;
				align-items: center;
				position: relative;
				height: 100%;
			}

			.step-item:last-child {
				margin-bottom: 0;
			}

			.address-box {
				flex: 1;
				// padding-top: 20rpx;
			}

			.address-info,
			.addres-book-button {
				font-size: 32rpx;
				color: black;
			}

			.step-icon-box {
				height: 100%;
			}
		}

		.address-detail {
			font-size: 24rpx;
		}

		.step-icon {
			position: relative;
			z-index: 1;
			margin-right: 10rpx;
			width: 56rpx;
			height: 56rpx;
			background-color: #e39b46;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			// font-family: OPPOSans-bold, OPPOSans;
			color: white;
			font-size: 34rpx;
			font-weight: bold;
			// bottom: 0;
		}

		.addres-book-button {
			width: fit-content;
			margin-right: 10rpx;
			height: 100%;
			display: flex;
			align-items: center;

			img {
				margin-left: 10rpx;
			}
		}
	}

	.info-content-flex {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 150rpx;
		gap: 30rpx;
		height: 100%;
		width: 100%;

		.post-pattern-item {
			width: 196rpx;
			height: 134rpx;
			background: #fff7f2;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.patter-price {
				font-size: 42rpx;
				font-weight: bold;
				color: black;
			}

			.patter-explain {
				margin-top: 10rpx;
				font-size: 24rpx;
				// opacity: 50%;
			}
		}

		.post-pattern-item-active {
			background: #e39b46;

			.patter-price {
				color: white;
			}

			.patter-explain {
				color: white;
				opacity: 1;
			}
		}
	}

	.to-view-button {
		width: 459rpx;
		min-height: 98rpx;
		background-color: #ffe4d9;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}

	.nextstep-button {
		flex: 1;
		background: linear-gradient(to bottom right, #e8b648, #e08745);
		min-height: 98rpx;
		border-radius: 20rpx;
		color: white;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.price-panel-box {
		box-sizing: border-box;
		height: 690rpx;
		padding: 37rpx;
		padding-top: 171rpx;

		.price-info-title {
			font-size: 30rpx;
		}

		.price-info-value {
			color: #ce7a2c;
		}
	}
</style>