<template>
	<view class="order">
		<view>
			<u-cell v-if="address.length > 0" size="large"
				:title="address[0].value + ' ' + address[1].value + ' ' + address[8].value"
				:label="address[2].value + ',' + address[4].value + ',' + address[6].value + ',' + address[3].value"
				:isLink="true" url="/pages/shipping-address/shipping-address" :border="false"></u-cell>
			<u-cell v-else size="large" title="Add shipping address"
				label="The prizes will be delivered to the door by express" :isLink="true" url="/pages/shipping-address/shipping-address" :border="false"></u-cell>
			<view class="hr"></view>
			<product-item img="http://124.71.5.138:9683/commoditySpec/20220106/y6OmB8Y6ELM2NnWubmcJreeywlvjgfd3F9cIMbCQ.jpg" name="Product name" desc="Description" price="$123456.00" num="2"/>
			<u-cell class="border-top" size="large" title="The urgent logistics" label="7-20 business days" :isLink="false" :border="false"
				value="$0.00"></u-cell>
		</view>
		<view class="pay-info">
			<view class="caption">Total Cost</view>
			<view class="content">
				<view class="item">
					<view class="left">product price</view>
					<view class="right">$120.11</view>
				</view>
				<view class="item">
					<view class="left">Shipping Fee</view>
					<view class="right">$0.00</view>
				</view>
				<view class="item">
					<view class="left">remark</view>
					<view class="right">Insufficient integral</view>
				</view>
				<view class="item">
					<view class="left"></view>
					<view class="right">Total:<text class="total-price">$140.11</text></view>
				</view>
			</view>
		</view>
		<view class="sub-btn">
			<view class="left">
				Total:<text class="total-price">$140.11</text>
			</view>
			<view class="right">
				<button @click="placeAnOrder">Place an order</button>
			</view>
		</view>
	</view>
</template>

<script>
	import productItem from "@/components/product-item/product-item"
	export default {
		data() {
			return {
				title: "",
				address: []
			}
		},
		components: {
			productItem
		},
		mounted() {
			// this.address = uni.getStorageSync('ShoppingAddress')
		},
		onShow() {
			this.address = uni.getStorageSync('ShoppingAddress')
		},
		methods: {
			placeAnOrder() {
				// 判断是否填写收货地址
				if(this.address.length < 1) {
					uni.showToast({
						icon: 'none',
						title: 'Receiving address is empty'
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: 'Submitted successfully'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		margin-bottom: 90rpx;
		display: inline-block;
		width: 100%;

		.hr {
			margin: 0 10rpx;
			width: calc(100% - 20rpx);
			height: 10rpx;
			background-image: url("data:image/png;base64,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");
			background-size: 90%;
			background-repeat: repeat;
		}
		.border-top {
			border-top: 1rpx solid $uni-bg-color-hover;
		}

		.pay-info {
			border-top: 20rpx solid $uni-bg-color-grey;

			.caption {
				font-size: $uni-font-size-lg;
				padding: 30rpx 30rpx;
				border-bottom: 1rpx solid $uni-bg-color-hover;
			}

			.content {
				padding: 30rpx;

				.item {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					font-size: $uni-font-size-base;
					padding: 20rpx 0;

					.left {
						color: $uni-text-color-placeholder;
					}

					.right {
						.total-price {
							color: $uni-color-error;
							margin-left: 10rpx;
						}
					}

					&:last-child {
						padding: 30rpx 0;
						border-top: 1rpx solid $uni-bg-color-hover;
					}
				}
			}
		}

		.sub-btn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx;
			border-top: 1rpx solid $uni-bg-color-hover;
			font-size: $uni-font-size-base;

			.left {
				padding-left: 30rpx;
				font-size: $uni-font-size-base;

				.total-price {
					color: $uni-color-error;
					margin-left: 10rpx;
				}

				flex: 1;
			}

			.right {
				button {
					height: 90rpx;
					background-color: #fada49;
					border: none;
					border-radius: 0;
					font-size: $uni-font-size-base;
					line-height: 90rpx;
					outline: none;
				}
			}
		}
	}
</style>
