<template>
	<view class="content">
		<!-- address -->
		<block v-if="address != ''">
			<view class="block address" @click="$Router.push({name: 'Address'})">
				<uni-icons class="address-icon location" type="location-filled" size="24" color="#34CE98"></uni-icons>
				<uni-icons class="address-icon arrows" type="right" size="20" color="#999"></uni-icons>
				<view class="user"><text>{{address.name}}</text>{{address.mobile}}</view>
				<view class="city">{{address.full_address}}</view>
			</view>
		</block>
		<block v-else>
			<view class="block address-new" @click="$Router.push({name: 'Address'})">
				<uni-icons class="icon" type="plus" size="26" color="#34CE98"></uni-icons>添加收货地址
			</view>
		</block>
		<!-- 订单产品 -->
		<view class="block goods-box">
			<block v-for="(item, index) in goodsInfo" :key="index">
				<view class="goods-item">
					<image class="order-cover" :src="item.items[0].cover" mode="aspectFill"></image>
					<view class="order-title">{{item.items[0].title}}</view>
					<view class="order-count">
						<view class="order-price"><text>￥</text>{{item.items[0].price}}</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 订单信息 -->
		<view class="block info-box">
			<view class="info-item">
				<view class="label">购买数量</view>
				<uni-number-box class="info-number" :value="qty" :min="1" :max="999" @change="numberChange" />
			</view>
			<view class="info-item">
				<view class="label">配送方式</view>
				<view class="nowrap">快递</view>
			</view>
			<view class="info-item">
				<view class="label">配送费用</view>
				<view class="nowrap">{{freight == 0 ? '免费': freight}}</view>
			</view>
		</view>
		<view class="block info-box">
			<view class="info-item">
				<view class="label">订单备注</view>
				<textarea class="info-textarea" v-model="remark" placeholder="订单备注"></textarea>
			</view>
		</view>
		<!-- footer -->
		<view class="order-footer">
		    <view class="total">总计：<text>￥{{total}}</text></view>
		    <button class="btn" @click="subOrder">确认订单</button>
		</view>
	</view>
</template>

<script>
	import { buy, verify } from '@/apis/interfaces/store'
	export default {
		data() {
			return {
				qty		  : 1,
				goodsInfo : [],
				total	  : 0,
				freight	  : 0,
				address	  : "",
				remark	  : ""
			};
		},
		computed:{
			
		},
		onShow(){
			if(JSON.stringify(this.$store.getters.getAddress) !== '{}') this.address = this.$store.getters.getAddress
		},
		mounted() {
			this.getBuy()
		},
		methods:{
			getBuy(){
				buy({
					goods_sku_id: this.$Route.query.skuId,
					qty: this.qty
				}).then(res => {
					this.address   = res.address
					this.freight   = res.freight
					this.total     = res.total
					this.goodsInfo = res.detail
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			numberChange(e){
				this.qty = e
				this.getBuy()
			},
			// 确认订单
			subOrder(){
				if(this.address === ""){
					uni.showModal({
						title		: '提示',
						content		: '暂未添加收货地址，无法下单',
						showCancel	: true,
						confirmText	: '添加',
						success		: res => {
							if(res.confirm){
								this.$Router.push({name: 'Address'})
							}
						}
					})
					return
				}
				verify({
					goods_sku_id: this.$Route.query.skuId,
					qty			: this.qty,
					address_id	: this.address.address_id,
					remark		: this.remark || ''
				}).then(res => {
					this.$store.commit('setAddress', {})
					this.$Router.replace({
						name: 'Pay',
						params: {
							orderNo: res.order_no,
							price  : res.total
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: $window-color;
		min-height: 100vh;
		overflow: hidden;
		padding-bottom: $padding + 80;
		box-sizing: border-box;
	}
	.block{
		background: white;
		margin: $margin;
		border-radius: $radius;
	}
	// 地址管理
	.address{
		position: relative;
		padding: $padding 80rpx $padding 90rpx;
		font-size: $title-size-lg;
		.user{
			font-size: $title-size;
			line-height: 40rpx;
			color: $text-gray;
			text{
				color: black;
				max-width: 200rpx;
				display: inline-block;
				margin-right: $margin/2;
			}
		}
		.city{
			padding-top: $padding/2;
			font-size: $title-size-sm;
			color: $text-gray;
			line-height: 36rpx;
		}
		.address-icon{
			position: absolute;
			top: 50%;
			&.location{
				margin-top: -26rpx;
				left: $margin - 10;
			}
			&.arrows{
				margin-top: -20rpx;
				right: $margin - 10;
			}
		}
	}
	.address-new{
		padding: $padding;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		color: $main-color;
		.icon{
			vertical-align: middle;
			margin-bottom: 8rpx;
			margin-right: 10rpx;
		}
	}
	// 订单列表
	.goods-item{
		display: flex;
		align-items: center;
		padding: $padding;
		.order-cover{
			vertical-align: top;
			width: 128rpx;
			height: 128rpx;
		}
		.order-title{
			@extend .ellipsis;
			text-align: left;
			flex: 1;
			padding-left: $margin;
			font-size: 28rpx;
			line-height: 40rpx;
		}
		.order-count{
			text-align: right;
			padding-left: $margin;
			line-height: 40rpx;
			.order-price{
				font-size: 30rpx;
				font-weight: bold;
				color: $text-price;
				&>text{
					font-size: 24rpx;
				}
			}
			.order-sum{
				font-size: $title-size-sm;
				color: $text-gray;
			}
		}
	}
	// 订单信息
	.info-box{
		.info-item{
			position: relative;
			padding: $padding $padding $padding 200rpx;
			font-size: $title-size-m;
			min-height: 40rpx;
			text-align: right;
			.label{
				position: absolute;
				left: $margin;
				top: $margin;
				color: $text-gray;
			}
			.info-textarea{
				height: 120rpx;
				width: 100%;
				text-align: left;
				font-size: $title-size-m;
			}
			&::after{
				position: absolute;
				left: $margin;
				right: $margin;
				content: " ";
				height: 1rpx;
				bottom: 0;
				background: $border-color;
			}
			&:last-child::after{
				display: none;
			}
		}
	}
	// footer
	.order-footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: $padding;
		background: white;
		border-radius: $radius $radius 0 0;
		box-shadow: 0 0 10rpx 10rpx rgba($color: #000000, $alpha: .02);
		z-index: 99;
		display: flex;
		.total{
			line-height: 80rpx;
			font-size: $title-size-lg;
			font-weight: bold;
			width: calc(100% - 300rpx - #{$margin});
			color: $text-gray;
			font-weight: normal;
			@extend .nowrap;
			text{
				color: $text-price;
				font-size: $title-size-lg;
				font-weight: bold;
			}
		}
		.btn{
			margin-left: $margin;
			width: 300rpx;
			height: 80rpx;
			padding: 0;
			line-height: 80rpx;
			font-size: $title-size-lg;
			border-radius: 40rpx;
			background: $main-color;
			color: white;
			font-weight: bold;
			&::after{
				display: none;
			}
		}
	}
</style>
