<template>
	<view v-if="loding">
		<!-- 订单信息 -->
		<view class="order-list" v-for="(mall, mallIndex) in detail" :key="mallIndex">
			<view class="shop-name">
				<image class="logo" :src="mall.shop.cover" mode="aspectFill"></image>
				{{mall.shop.name || '-'}}
			</view>
			<view class="item" v-for="(item, itemsIndex) in mall.items" :key="itemsIndex">
				<image class="cover" :src="item.cover" mode="aspectFill"></image>
				<view class="title">{{item.title}}</view>
				<view class="tool">
					<view class="price"><text>￥</text>{{item.price}}</view>
					<uni-number-box class="number" :min="1" :value="qty" @change="numberChange"></uni-number-box>
				</view>
			</view>
		</view>
		<view class="amount">
			<view class="item">
				<label>订单金额</label>
				<view class="price nowrap">{{amount}}</view>
			</view>
			<block v-if="coupons.length > 0">
				<view class="item">
					<label>使用优惠券</label>
					<picker>
						<view class="picker-text nowrap">
							优惠券
							<uni-icons type="arrowright" color="#ddd"></uni-icons>
						</view>
					</picker>
				</view>
				<view class="item">
					<label>优惠金额</label>
					<view class="price nowrap">-{{couponPrice}}</view>
				</view>
			</block>
		</view>
		<!-- 支付方式 -->
		<radio-group class="pay-group" @change="payType">
			<view class="item" v-if="buyTypeId != 1">
				<label>
					<radio class="radio" value="eb" checked color="#c82626" />
					<view class="title">易货额支付</view>
					<view class="sub-title" v-if="payValue === 'eb'">可用：{{account.getEBBalance}} 冻结：{{account.getEBFrozen}}</view>
				</label>
			</view>
			<view class="item">
				<label>
					<radio class="radio" value="wx" color="#c82626" />
					<view class="title">微信支付</view>
				</label>
			</view>
		</radio-group>
		<!-- footer -->
		<view class="footer">
			<button size="default" @click="buyOrder">提交订单</button>
		</view>
	</view>
</template>

<script>
	import { buy } from '@/apis/interfaces/order'
	export default {
		data() {
			return {
				loding 		: false,
				detail 		: {},
				qty    		: 1,
				couponPrice : 0,
				amount		: 0,
				total		: 0,
				coupons		: [],
				account		: {},
				payValue	: 'eb',
				buyTypeId	: ''
			}
		},
		created(){
			buy({
				goods_sku_id: this.$Route.query.skuId || 23,
				qty			: this.qty,
				type		: this.$Route.query.type === 1 ? 2: 1
			}, 'GET').then(res=>{
				this.loding  	 = true
				this.buyTypeId	 = this.$Route.query.type
				this.payValue	 = this.$Route.query.type === 1 ? 'wx' : 'eb'
				this.detail  	 = res.detail
				this.couponPrice = res.coupon_price
				this.amount		 = res.amount
				this.total		 = res.total
				this.coupons	 = res.coupons
				this.account	 = res.account
			}).catch(err =>{
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			payType(e){
				this.payValue = e.detail.value
			},
			
			//数量变化
			numberChange(e){
				this.qty	= e
				this.amount = this.detail[0].items[0].price * e
			},
			
			// 提交订单
			buyOrder(){
				buy({
					goods_sku_id: this.$Route.query.skuId || 23,
					qty			: this.qty,
					type		: this.payValue == 'eb' ? 1 : 2,
					remark		: 'app订单'
				}, 'POST').then(res=>{
					uni.showToast({
						title: '订单id:' + res.order_no,
						icon : 'none'
					})
				}).catch(err =>{
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 微信pay
			wxPay(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 商品统计
	.amount{
		background: white;
		margin: $margin;
		border-radius: $radius/2;
		padding: 0 $padding;
		box-sizing: border-box;
		.item{
			position: relative;
			border-bottom: solid 1rpx $border-color;
			padding-left: 160rpx;
			line-height: 90rpx;
			text-align: right;
			&:last-child{
				border-bottom: none;
			}
			label{
				position: absolute;
				left: 0;
				top: 0;
				font-size: $title-size-lg;
			}
			.number-box{
				display: inline-block;
				line-height: 90rpx;
			}
			.price{
				color: $text-price;
			}
			.picker-text{
				font-size: $title-size-lg;
				color: $text-gray;
			}
		}
	}
	// 支付方式
	.pay-group{
		background: white;
		margin: $margin;
		border-radius: $radius/2;
		padding: 0 $padding;
		box-sizing: border-box;
		.item{
			position: relative;
			border-bottom: solid 1rpx $border-color;
			padding: ($padding - 10) 70rpx ($padding - 10) 0;
			&:last-child{
				border-bottom: none;
			}
			.radio{
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -25rpx;
			}
			.sub-title{
				font-size: $title-size-sm;
				color: $text-gray;
				line-height: 40rpx;
			}
			.title{
				font-size: $title-size-lg;
				line-height: 50rpx;
			}
		}
	}
	// 支付按钮
	.footer{
		padding: 0 $padding $padding*2;
		button{
			background: $text-price;
			font-size: $title-size;
			color: white;
			height: 90rpx;
			line-height: 90rpx;
			font-weight: bold;
			border-radius: $radius/2;
			&::after{
				border: none;
			}
		}
	}
	// 订单商品列表
	.order-list{
		background: white;
		margin: $margin;
		border-radius: $radius/2;
		padding: $padding;
		box-sizing: border-box;
		.shop-name{
			position: relative;
			padding-bottom: $padding;
			font-size: $title-size-lg;
			padding-left: 68rpx;
			line-height: 48rpx;
			min-height: 48rpx;
			color: $text-color;
			.logo{
				position: absolute;
				left: 0;
				top: 0;
				width: 48rpx;
				height: 48rpx;
			}
		}
		.item{
			position: relative;
			padding-left: 180rpx;
			padding-bottom: $padding/2;
			padding-top: $padding/2;
			min-height: 160rpx;
			.cover{
				position: absolute;
				left: 0;
				top: $padding/2;
				height: 160rpx;
				width: 160rpx;
				background: #2C405A;
			}
			.title{
				height: 110rpx;
				line-height: 40rpx;
				font-size: $title-size-lg;
				color: $text-color;
			}
			.tool{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.price{
					font-weight: bold;
					color: $text-price;
					font-size: $title-size;
					line-height: 40rpx;
					height: 40rpx;
					text{
						font-size: 80%;
					}
				}
			}
		}
	}
</style>
