<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">
							<view class="address-info">
								张大大 17638755181
							</view>
							<view class="address-detail">
								西安市雁塔区中天国际公寓A座2605
							</view>
						</view>
						<view class="addres-book-button">
							地址簿<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">
							<view class="address-info">
								王大大 17638755181
							</view>
							<view class="address-detail">
								新疆乌鲁木齐大三巴公路铁硫唑1楼209
							</view>
						</view>
						<view class="addres-book-button">
							地址簿<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.price
						}">
							<view class="patter-price">
								{{pattern.price}}<text style="font-size: 24rpx;">元</text>
							</view>
							<view class="patter-explain">
								{{pattern.explain}}
							</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" @change="test"></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></u-cell>
					<u-cell :border="false" title="我的备注" isLink>
						<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" @click="toView">
								费用合计 <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>
			<view class="nextstep-button" @click="confirm">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	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: '奥克兰大理石是镂空雕刻,圾的卢卡斯离开的萨科拉上来,打死了 '
				},
				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: 1
					},
					picture: {
						id: 2,
						name: '照片费用2',
						key: 'picture',
						value: 100
					},
					postage: {
						id: 3,
						name: '邮寄费用',
						key: 'postage',
						value: 135
					},
					discounts: {
						id: 4,
						name: '我的优惠券',
						key: 'discounts',
						value: 22
					}
				},
				showPrice: false,
			};
		},
		onLoad(option) {
			this.orderInfo.plan = option.plan
			this.priceInfo.postage.value = this.postPattern[0].price
			console.log(option);
		},
		methods: {
			test(e) {
				console.log(e, this.orderInfo);
			},
			confirm() {
				this.showPrice = true
			},
			closePricePanel() {
				this.showPrice = false
			},
			tpPay() {

			}
		},
		computed: {
			totalPrice() {
				return Object.values(this.priceInfo).reduce((total, next) => {
					return total + next.value
				}, 0)
			}
		}
	}
</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>