<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='1000' @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="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('1')">
				<view class="pay-left">
					<u-icon class="wx-icon" name="integral-fill" color="#fff" size="40"></u-icon>
					<view class="pay-wx-title">
						E币交易
						<span>可用Eb总额：{{account.getEBBalance}}</span>
					</view>
				</view>
				<u-icon v-if="selectTypeId!== '1'" name="checkmark-circle" color="#f7f7f7" size="50" />
				<u-icon v-else name="checkmark-circle-fill" color="#8b64fd" size="50" />
			</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,
		ebPay
	} from '@/apis/interfaces/order'
	export default {
		name: 'OrderInfo',
		components: {
			couponTemplate
		},
		data() {
			return {
				// box: {
				// 	min: 1,
				// 	max: 100
				// },
				amount: 0,
				account: {},
				total: 0,
				shop: {}, // 店铺信息
				info: {}, // 商品详情
				showCouponList: false, // 默认false不显示优惠券弹窗列表
				coupon_grant_id: '', // 默认没有选择任何一个优惠券
				list: [], // 优惠券列表
				params: {}, // 上个页面携带过来的参数
				remark: '', // 备注
				order_no: '', // 下单成功的id
				selectTypeId: '2', // 微信支付2 E币支付1
				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 => {
					this.$refs.uToast.show({
						title: err.message,
						type: 'primary',
						duration: 3000
					})
				})
			},
			// 提交订单
			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() {
				this.canPay = false
				let apiUrl = ''
				let data = {}
				if (this.selectTypeId === '2') {
					apiUrl = wxPay
					data = {
						order_no: this.order_no,
						type: 'app'
					}
				} else {
					apiUrl = ebPay
					data = {
						order_no: this.order_no
					}
				}
				apiUrl(data).then(res => {
					if (this.selectTypeId === '2') {
						if (typeof res === 'string') {
							let payInfo = JSON.parse(res)
							uni.requestPayment({
								provider: "wxpay",
								orderInfo: payInfo,
								success: res => {
									uni.showToast({
										title: '支付成功',
										duration: 3000,
										mask: true,
										icon: 'none'
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/goods/payStatus?success=true'
										})
										this.canPay = true
									}, 3000);
								},
								fail: (err) => {
									uni.showToast({
										title: '支付失败',
										duration: 3000,
										mask: true,
										icon: 'none'
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/goods/payStatus?success=false'
										})
										this.canPay = true
									}, 3000);
								}
							})
						} else {
							uni.showToast({
								title: '创建订单成功',
								duration: 3000,
								mask: true,
								icon: 'none'
							})
							setTimeout(() => {
								this.canPay = true
								uni.reLaunch({
									url: '/pages/goods/payStatus?success=true'
								})
							}, 3000);
						}
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						duration: 3000,
						mask: true,
						icon: 'none'
					})
					setTimeout(res => {
						this.canPay = true
					}, 2000)
				})
			},

			// 选择可用优惠券
			selectCoupon(item) {
				if (this.coupon_grant_id === item.coupon_grant_id) {
					this.coupon_grant_id = ''
					// this.coupon_price = ''
				} else {
					this.coupon_grant_id = item.coupon_grant_id
					// this.coupon_price = item.price
				}
				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 {
						this.$refs.uToast.show({
							title: '当前商品不支持EB支付'
						})
					}
				} else if (id === '2') {
					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;
				}
			}
		}

		.wx-icon {
			background-color: #8b64fd;
			border-radius: 10rpx;
			padding: 10rpx;
		}
	}

	.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>
