<template>
	<view class="ConfirmOrder">
		<view class="goods-info1">
			<view class="top">
				<view class="company">
					<image :src="shop.cover" mode="aspectFill" />
					<view class="name">{{shop.name}}</view>
				</view>
			</view>
			<view class="goods-info">
				<image class="goods-img" :src="info.cover" mode="aspectFill" />
				<view class="goods">
					<view class="name">
						<view class="name1 ellipsis-2">{{info.title}}</view> <span>￥{{info.price}}</span>
					</view>
					<!-- <view class="sku">均码规格/件<span>x {{info.qty}}</span> </view> -->
					<view class="sku">
						<span>数量</span>
						<span>
							<u-number-box v-model="params.qty" :min='1' :max='info.stock' @change='numberBoxChange' />
						</span>
					</view>
				</view>
			</view>
			<!-- <view class="goods-type">支付方式<span>在线支付</span></view> -->
			<view class="goods-type" @click="showCouponList = true">优惠券
				<span>{{coupon_grant_id!==''?'已优惠 - ￥'+coupon_price:'选择优惠券'}}
					<u-icon name="arrow-right" color="#666" size="24" />
				</span>
			</view>
			<!-- <view class="goods-type" style="border-top: solid 20rpx #f7f7f7;">创建时间<span>2021-11-20 13:00:15</span></view> -->
			<view class="goods-type">商品总价 <span>￥{{amount}}</span></view>
			<view class="goods-type" v-if="coupon_price>0">优惠<span> - ￥{{coupon_price}}</span></view>
			<!-- <view class="goods-type">运费 <span>免邮</span></view> -->
			<view class="goods-type">
				<u-input class="order-content" type="textarea" v-model="remark" :clearable='false' :border="true"
					:auto-height="true" placeholder="请填写订单备注" />
			</view>
			<view class="pay-select">请选择支付方式</view>
			<view class="pay-select-item" @click="selectPay('2')">
				<view class="pay-left">
					<u-icon class="pay-icon wx-icon" name="weixin-fill" color="#fff" size="40"></u-icon>
					<view class="pay-wx-title">
						微信支付
						<span>推荐微信用户使用</span>
					</view>
				</view>
				<u-icon v-if="selectTypeId!== '2'" name="checkmark-circle" color="#f7f7f7" size="50"></u-icon>
				<u-icon v-else name="checkmark-circle-fill" color="#8b64fd" size="50"></u-icon>
			</view>
			<view class="pay-select-item" @click="selectPay('3')">
				<view class="pay-left">
					<u-icon class="pay-icon al-icon" name="zhifubao" color="#fff" size="40"></u-icon>
					<view class="pay-wx-title">
						支付宝支付
						<span>推荐支付宝用户使用</span>
					</view>
				</view>
				<u-icon v-if="selectTypeId!== '3'" name="checkmark-circle" color="#f7f7f7" size="50"></u-icon>
				<u-icon v-else name="checkmark-circle-fill" color="#8b64fd" size="50"></u-icon>
			</view>
		</view>
		<!-- 订单 -->
		<view class="actions">
			<view class="title">
				实付金额：<span class="money">￥{{total}}</span>
			</view>
			<view @click="order" class="nowPay">提交订单</view>
		</view>

		<!-- 优惠券弹窗 -->
		<u-popup v-model="showCouponList" mode="bottom" border-radius="14">
			<scroll-view scroll-y="true" style="height: 1000rpx;" class="scrollView">
				<view class="coupon-title">可用优惠券列表</view>
				<view class="coupon-list-item" v-for="(item,index) in list" :key="index" v-if="list.length>0">
					<u-icon v-if="coupon_grant_id !== item.coupon_grant_id" name="checkmark-circle" color="#cacaca" size="50">
					</u-icon>
					<u-icon v-else name="checkmark-circle-fill" color="#8b64fd" size="50"></u-icon>
					<couponTemplate style="flex: 1;" :item="{...item}" :showUse='false' />
					<!-- 遮挡层用户控制点击事件 -->
					<view class="coupon-list-item" @click="selectCoupon(item)"></view>
				</view>
				<!-- 没有优惠券列表 -->
				<no-list v-if="list.length === 0" name='no-counpon' txt="没有任何可用券哦" />
			</scroll-view>
		</u-popup>
		<!-- <u-toast ref="uToast" /> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import couponTemplate from "@/components/coupon-template/coupon-template-2"
	import { mallBuyGoods } from '@/apis/interfaces/goods'
	import { wxPay, aliPay, ebPay } from '@/apis/interfaces/order'
	export default {
		name: 'OrderInfo',
		components: {
			couponTemplate
		},
		data() {
			return {
				amount			: 0,
				account			: {},
				total			: 0,
				shop			: {}, 		// 店铺信息
				info			: {}, 		// 商品详情
				showCouponList	: false, 	// 默认false不显示优惠券弹窗列表
				coupon_grant_id	: '', 		// 默认没有选择任何一个优惠券
				list			: [], 		// 优惠券列表
				params			: {}, 		// 上个页面携带过来的参数
				remark			: '', 		// 备注
				order_no		: '', 		// 下单成功的id
				selectTypeId	: '2', 		// 微信支付2 支付宝支付3
				coupon_price	: '' 		// 代驾券显示金额，提货券显示什么呢
			};
		},

		onLoad(e) {
			// 获取确认订单页面参数
			this.params = e
			this.params.qty = Number(e.qty)
			this.mallBuyGoods(e, 'get') // 确认订单商品信息get
		},
		methods: {
			// 确认商品详情页get，下单页面post
			mallBuyGoods(params, method) {
				params.coupon_grant_id = this.coupon_grant_id
				mallBuyGoods(params, method).then(res => {
					if (method === 'get') {
						this.amount 		= res.amount
						this.account 		= res.account
						this.total 			= res.total
						this.list 			= res.coupons
						this.shop 			= res.detail[0].shop
						this.info 			= res.detail[0].items[0]
						this.coupon_price 	= res.coupon_price
					} else {
						this.order_no 		= res.order_no
						this.nowPay()
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 提交订单
			order() {
				let params = this.params
				params.coupon_grant_id = this.coupon_grant_id
				params.remark = this.remark
				params.channel = 'app'
				this.mallBuyGoods(params, 'post')
			},
			// 触发支付
			nowPay() {
				let apiUrl = ''
				let data = {}
				if (this.selectTypeId === '2') {
					apiUrl = wxPay
					data = {
						order_no: this.order_no,
						type: 'app'
					}
				} else if (this.selectTypeId === '3') {
					apiUrl = aliPay
					data = {
						order_no: this.order_no,
						type: 'app'
					}
				}
				apiUrl(data).then(res => {
					// 不需要支付
					if(res.canPay === false){
						uni.showModal({
							title		: '提示',
							content		: '商品权证兑换成功',
							showCancel	: false,
							success	() {
								uni.reLaunch({
									url: '/pages/goods/payStatus?success=true'
								})
							}
						})
						return
					}
					
					// 微信支付
					if (this.selectTypeId === '2') {
						let payInfo = JSON.parse(res)
						uni.requestPayment({
							provider: "wxpay",
							orderInfo: payInfo,
							success: res => {
								uni.reLaunch({
									url: '/pages/goods/payStatus?success=true'
								})
							},
							fail: (err) => {
								uni.showToast({
									title: '支付被取消',
									mask: true,
									icon: 'none'
								})
							}
						})
					}
					// 支付宝支付
					else if (this.selectTypeId === '3') {
						uni.requestPayment({
							provider: "alipay",
							orderInfo: res,
							success: res => {
								uni.reLaunch({
									url: '/pages/goods/payStatus?success=true'
								})
							},
							fail: (err) => {
								uni.showToast({
									title: '支付被取消',
									duration: 3000,
									mask: true,
									icon: 'none'
								})
							}
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						mask: true,
						icon: 'none'
					})
				})
			},

			// 选择可用优惠券
			selectCoupon(item) {
				if (this.coupon_grant_id === item.coupon_grant_id) {
					this.coupon_grant_id = ''
				} else {
					this.coupon_grant_id = item.coupon_grant_id
				}
				this.mallBuyGoods(this.params, 'get')
				this.showCouponList = false
			},
			// 增加库存时候触发事件
			numberBoxChange(e) {
				this.params.qty = e.value
				this.mallBuyGoods(this.params, 'get')
			},
			// 选择支付方式
			selectPay(id) {
				if (id === '1') {
					if (this.info.is_change) {
						this.selectTypeId = id
					} else {
						uni.showToast({
							title: '当前商品不支持EB支付',
							icon : 'none'
						})
					}
				} else if (id === '2') {
					this.selectTypeId = id
				} else if (id === '3') {
					this.selectTypeId = id
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.pay-select {
		padding: 20rpx 30rpx;
		border-top: 20rpx #f7f7f7 solid;
	}

	.pay-select-item {
		background-color: #fff;
		padding: 30rpx;
		border-bottom: solid 1rpx #f7f7f7;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

		.pay-left {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			box-sizing: border-box;

			.pay-wx-title {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				box-sizing: border-box;
				margin-left: 30rpx;
				font-size: 28rpx;

				span {
					font-size: 24rpx;
					color: #cacaca;
					margin-top: 10rpx;
				}
			}
		}
		.pay-icon{
			border-radius: 10rpx;
			padding: 10rpx;
			&.wx-icon {
				background: #04BE02;
			}
			&.al-icon {
				background: #1678ff;
			}
		}
	}

	.ConfirmOrder {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F7F7F7;
		padding-bottom: 80rpx;


		.acceptInfo {
			margin: 0 30rpx;
			// background-color: #fff;
			box-shadow: 0 0 14rpx 4rpx rgba($color: $mian-color, $alpha: 0.2);
			border-radius: 20rpx;
			padding: 30rpx;
			position: relative;
			top: -30rpx;

			.name {
				font-size: 36rpx;
				font-weight: 600;

				span {
					padding-left: 20rpx;
					font-size: 30rpx;
				}
			}

			.address {
				padding: 20rpx 40rpx;
				font-size: 28rpx;

				span {
					margin-left: 10rpx;
				}
			}
		}

		.goods-info1 {
			background-color: #fff;
			border-top: solid 20rpx #f7f7f7;

			.goods-type {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 30rpx 40rpx;
				color: #666;
				border-bottom: solid 1rpx #f7f7f7;
			}

			.goods-type span {
				color: #000;
			}

			.order-content {
				width: 100%;
			}

			// 顶部信息
			.top {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 40rpx;
				border-bottom: solid 1rpx #f7f7f7;

				.company {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					box-sizing: border-box;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				.name {
					font-size: 30rpx;
					color: #484848;
				}

				.no {
					margin-top: 20rpx;
					font-size: $title-size*0.9;
					color: #999;
				}

				.status {
					color: #999;
					font-size: $title-size;
				}
			}

			// 商品信息
			.goods-info {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				padding: 30rpx 40rpx;

				.goods-img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}

				.goods {
					flex: 1;
					margin-left: 20rpx;

					.name {
						width: 100%;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						justify-content: space-between;
						box-sizing: border-box;
						font-size: 30rpx;
						// font-weight: bold;

						.name1 {
							width: 340rpx;
						}

						span {
							font-size: 34rpx;
							font-weight: normal;
						}
					}

					.sku {
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #999;
					}
				}
			}

			// 合计信息
			.total {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #353535;
				flex: 1;
				text-align: right;
				margin-top: 20rpx;
				padding-bottom: 30rpx;
			}

			.total-btn {
				// border: solid 1rpx #f7f7f7;
				padding: 10rpx 30rpx;
				border-radius: 10rpx;
				color: red;
			}
		}

		// 操作信息
		.actions {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			box-sizing: border-box;
			flex-wrap: wrap;
			flex: 1;
			font-size: 30rpx;
			color: #666;
			width: 100%;
			background-color: #Fff;
			position: fixed;
			bottom: 0;
			padding: 20rpx 0;

			span {
				color: $mian-color;
				margin-right: 30rpx;
				font-weight: 600;
				font-size: 32rpx;
			}

			.nowPay {
				padding: 20rpx 50rpx;
				text-align: center;
				box-sizing: border-box;
				background-color: $mian-color;
				color: #fff;
			}
		}

		// 优惠券弹窗
		.scrollView {
			// padding: 40rpx;
			box-sizing: border-box;
			position: relative;

			// 标题
			.coupon-title {
				padding: 40rpx;
				font-weight: bold;
				font-size: 40rpx;
				border-bottom: solid 1rpx #f7f7f7;
			}

			// 优惠券样式
			.coupon-list-item {
				border-bottom: solid 1rpx #f7f7f7;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				position: relative;
				width: 100%;

				.coupon-list-item {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					background-color: rgba($color: #000, $alpha: 0);
					z-index: 10001;
				}
			}
		}

		// 选择收货地址
		.add-addr {
			width: 100%;
			background-color: #fff;
			border-bottom: solid rgba($color: $mian-color, $alpha:0.2) 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 40rpx;

			.selectNew {
				flex: 1;
				text-align: center;
			}

			.selectNew2 {
				padding: 20rpx 0;
				flex: 1;
				font-size: 34rpx;
				color: #353535;

				span {
					color: #666;
					font-size: 28rpx;
					margin-left: 20rpx;
				}

				.addrs {
					font-size: 26rpx;
					margin-top: 10rpx;
					color: #666;
				}
			}
		}

	}
</style>
