<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="item.number" :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 > 1">
				<view class="item">
					<label>使用优惠券</label>
					<picker mode="selector" :range="coupons" range-key="title" :value="couponIndex" @change="couponsChange">
						<view class="picker-text nowrap">
							{{couponIndex == 0 ? '选择优惠券' : coupons[couponIndex].title}}
							<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 class="item">
				<label>实际支付金额</label>
				<view class="price nowrap">{{total}}</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<radio-group class="pay-group" @change="payType">
			<view class="item">
				<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, eb } from '@/apis/interfaces/order'
	export default {
		data() {
			return {
				loding 		: false,
				detail 		: {},
				qty    		: 1,
				couponPrice : 0,
				amount		: 0,
				total		: 0,
				coupons		: [],
				couponIndex	: 0,
				couponId	: '',
				account		: {},
				payValue	: 'eb',
			}
		},
		created(){
			buy({
				goods_sku_id: this.$Route.query.skuId,
				qty			: this.qty,
				type		: 1
			}, 'GET').then(res=>{
				this.loding  	 = true
				this.payValue	 = this.$Route.query.type === 1 ? 'wx' : 'eb'
				this.detail  	 = res.detail
				this.couponPrice = res.coupon_price.toFixed(2)
				this.amount		 = res.amount.toFixed(2)
				this.total		 = res.total.toFixed(2)
				this.coupons	 = res.coupons
				this.account	 = res.account
			}).catch(err =>{
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			// 获取可用优惠券
			getCoupons(){
				buy({
					goods_sku_id	: this.$Route.query.skuId,
					qty				: this.qty,
					type			: 1,
					coupon_grant_id	: this.couponId
				}, 'GET').then(res=>{
					this.couponPrice = res.coupon_price.toFixed(2)
					this.amount		 = res.amount.toFixed(2)
					this.total		 = res.total.toFixed(2)
					this.coupons 	 = [{
						title			: '不使用',
						coupon_grant_id	: ''
					}, ...res.coupons]
				}).catch(err =>{
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 选择优惠券
			couponsChange(e){
				this.couponIndex = e.detail.value
				this.couponId 	 = this.coupons[e.detail.value].coupon_grant_id
				this.getCoupons()
			},
			// 选择支付类型
			payType(e){
				this.payValue = e.detail.value
			},
			
			//数量变化
			numberChange(e){
				this.qty	= e
				this.getCoupons()
			},
			
			// 提交订单
			buyOrder(){
				buy({
					goods_sku_id	: this.$Route.query.skuId,
					qty				: this.qty,
					coupon_grant_id	: this.couponId,
					type			: 1,
					remark			: 'app订单，易货产品',
					channel			: 'app'
				}, 'POST').then(res=>{
					console.log(res)
					switch (this.payValue){
						case 'eb':
							this.ebPay(res.order_no)
							break;
						case 'wx':
							this.wxPay(res.order_no)
							break;
						default:
							uni.showToast({
								title: '支付方式错误',
								icon : 'none'
							})
							break;
					}
				}).catch(err =>{
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 微信pay
			wxPay(orderNo){
				uni.showToast({
					title: '微信支付' + orderNo,
					icon : 'none'
				})
			},
			// 易币支付
			ebPay(orderNo){
				eb(orderNo).then(res => {
					this.$Router.replace({
						name	: 'payResults',
						params	: {
							index: 1,
							price: this.total,
							type : 'eb',
							total: '可在我的资产下我的权证中查看购买的数字权证'
						}
					})
				}).catch(err => {
					uni.showModal({
						title		: '支付提示',
						content		: err.message,
						showCancel	: false,
					})
				})
			}
		}
	}
</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>
