<template>
	<view class="order-submission">

		<view v-if="volume" class="volume">
			<u--image :src="volume.poster" width="300rpx" height="168.75rpx" mode="aspectFill" radius="8rpx"></u--image>
			<view class="volume-info">
				<view class="volume-title">{{volume.volumeName}}</view>
				<view class="volume-level">{{volume.level}} | {{volume.nodeList?volume.nodeList.length: 0}}小节</view>
				<view class="volume-price">
					<view style="height: 30rpx;"><text style="font-size: 16rpx;">￥</text>{{isSpike?volume.spikePrice:volume.price}}</view>
				</view>
			</view>
		</view>


		<view class="wrapper">
			<view class="item acea-row row-between-wrapper">
				<view>积分抵扣</view>
				<view class="discount">
					<view class="select-btn">
						<view class="checkbox-wrapper">
							<!-- <input type="checkbox" v-model="useIntegral" @click="changeUseIntegral"/> -->
							<checkbox-group @change="changeUseIntegral">
								<label class="well-check">
									<text class="integral">
										当前积分
										<text class="num font-color-red">{{ userInfo.integral || 0 }}</text>
									</text>
									<checkbox value="true" :checked="useIntegral ? true : false"></checkbox>
								</label>
							</checkbox-group>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="wrapper">
			<view class="item acea-row row-between-wrapper">
				<view>余额抵扣</view>
				<view class="discount">
					<view class="select-btn">
						<view class="checkbox-wrapper">
							<!-- <input type="checkbox" v-model="useIntegral" @click="changeUseIntegral"/> -->
							<checkbox-group @change="changeUseNowMoney">
								<label class="well-check">
									<text class="integral">
										当前余额
										<text class="num font-color-red">{{ userInfo.nowMoney || 0 }}</text>
									</text>
									<checkbox value="true" :checked="useNowMoney ? true : false"></checkbox>
								</label>
							</checkbox-group>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="wrapper">
			<view class="item">
				<view>支付方式</view>
				<view class="list">
					<view class="payItem acea-row row-middle" v-if="!isIntegral"
						:class="active === 'weixin' ? 'on' : ''" @click="payItem('weixin')" v-show="isWeixin">
						<view class="name acea-row row-center-wrapper">
							<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
							微信支付
						</view>
						<view class="tip">微信快捷支付</view>
					</view>
					<view class="payItem acea-row row-middle" v-if="!isIntegral"
						:class="active === 'weixin' ? 'on' : ''" @click="payItem('weixin')" v-show="!isWeixin">
						<view class="name acea-row row-center-wrapper">
							<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
							微信支付
						</view>
						<view class="tip">微信快捷支付</view>
					</view>
				</view>
			</view>
		</view>
		<view class="moneyList">
			<view class="item acea-row row-between-wrapper">
				<view>商品总价：</view>
				<view class="money">￥{{ orderPrice.totalPrice }}</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>积分抵扣：</view>
				<view class="money">-￥{{ orderPrice.deductionIntegral }}</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>余额抵扣：</view>
				<view class="money">-￥{{ orderPrice.deductionMoney }}</view>
			</view>
		</view>
		<view class="com_buy_agreement">
			订单不支持退款，提交则表示您同意<text style="color: #eb3729;" @click="toAgreement">《用户购买充值协议》</text> 
		</view>
		<view style="height: 120rpx"></view>
		
		<view class="footer acea-row row-between-wrapper">
			<view>
				合计:
				<text class="font-color-red">￥{{ orderPrice.payPrice }}</text>
			</view>
			<view class="settlement" @click="createOrder">立即结算</view>
		</view>
		<CouponListWindow v-on:couponchange="changecoupon($event)" v-model="showCoupon" :price="orderPrice.totalPrice"
			:checked="usableCoupon.id" @checked="changeCoupon" :cartid="cartid"></CouponListWindow>
		<AddressWindow @checked="changeAddress" @redirect="addressRedirect" v-model="showAddress"
			:checked="addressInfo.id" ref="mychild"></AddressWindow>
	</view>
</template>
<style scoped lang="less">
	.order-submission .wrapper .shipping select {
		color: #999;
		padding-right: 0.15 * 100rpx;
	}

	.order-submission .wrapper .shipping .iconfont {
		font-size: 0.3 * 100rpx;
		color: #515151;
	}

	.order-submission .allAddress {
		width: 100%;
		background-image: linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
		background-image: -webkit-linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
		background-image: -moz-linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
		padding-top: 1 * 100rpx;
	}

	.order-submission .allAddress .nav {
		margin: 0 auto;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.order-submission .allAddress .nav .item {
		flex: 1;
		position: relative;
	}

	.order-submission .allAddress .nav .item.on {
		position: relative;
	}

	.order-submission .allAddress .nav .item.on:before {
		position: absolute;
		bottom: 0;
		content: '快递配送';
		font-size: 0.28 * 100rpx;
		display: block;
		height: 0;
		left: 0;
		right: 0;
		border-width: 0.4 * 100rpx;
		border-style: solid;
		border-color: #fff;
		z-index: 9;
		text-align: center;
		line-height: 0.14 * 100rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(2).on:before {
		content: '到店自提';
		border-width: 0.4 * 100rpx;
	}

	.order-submission .allAddress .nav .item.on2 {
		position: relative;
	}

	.order-submission .allAddress .nav .item.on2:before {
		position: absolute;
		bottom: 0;
		content: '到店自提';
		font-size: 0.28 * 100rpx;
		display: block;
		height: 0;
		left: 0;
		right: 0;
		border-width: 0.4 * 100rpx;
		border-style: solid;
		border-color: #d5e6e6;
		text-align: center;
		line-height: 0.14 * 100rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(1).on2:before {
		content: '快递配送';
		border-width: 0.4 * 100rpx;
	}

	.order-submission .allAddress .address {
		width: 6.91 * 100rpx;
		height: 1.5 * 100rpx;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.order-submission .allAddress .line {
		width: 7.1 * 100rpx;
		margin: 0 auto;
	}

	.order-submission .wrapper .item .discount input::placeholder {
		color: #ccc;
	}
</style>
<script>
	import OrderGoods from '@/components/OrderGoods'
	import {
		postOrderConfirm,
		postOrderComputed,
		createOrder
	} from '@/api/order'
	import {
		mapGetters
	} from 'vuex'
	import {
		handleOrderPayResults,
		subscribeMessage
	} from '@/libs/order'
	import {
		weappPay
	} from '@/libs/wechat'
	import {
		isWeixin,
		handleErrorMessage
	} from '@/utils'
	import * as SubjectApi from '@/api/subject.js'
	const NAME = 'SubjectOrderSubmission',
		_isWeixin = true
	const orderKey = "v" + Date.now()

	export default {
		name: NAME,
		components: {
			OrderGoods,
		},
		props: {},
		data: function() {
			return {
				offlinePayStatus: 2,
				from: this.$deviceType,
				deduction: true,
				enableIntegral: true,
				enableIntegralNum: 0,
				isWeixin: _isWeixin,
				volumeId: 0,
				volume: undefined,
				active: _isWeixin ? 'weixin' : 'yue',
				showCoupon: false,
				showAddress: false,
				addressInfo: {},

				useIntegral: true,
				useNowMoney: true,
				orderPrice: {
					payPrice: '计算中',
					deductionIntegral: 0,
					deductionMoney: 0,
					totalPrice: 0
				},
				isSpike: false
			}
		},
		computed: mapGetters(['userInfo', 'storeItems']),
		watch: {
			useIntegral() {
				this.computedPrice()
			},
			useNowMoney() {
				this.computedPrice()
			},
			shipping_type() {
				this.computedPrice()
			},
		},
		onLoad: function() {
			let that = this
			this.volumeId = that.$yroute.query.volumeId
			this.$store.dispatch('getUser', true)
			this.getVolumeInfo()
		},
		methods: {
			toAgreement() {
				uni.navigateTo({
					url: '/pages/subject/agreement/agreement'
				})
			},
			getVolumeInfo() {
				SubjectApi.getSubjectVolumeInfo(this.volumeId).then(res => {
					this.volume = res.data
					this.computedPrice()
				})
			},

			changeUseIntegral: function(e) {
				this.useIntegral = e.mp.detail.value[0]
			},
			changeUseNowMoney: function(e) {
				this.useNowMoney = e.mp.detail.value[0]
			},
			// 计算商品价格
			computedPrice() {
				// 是否秒杀
				const now = Date.now()
				let {
					isSpike,
					spikeEndTime,
					spikeStartTime,
					price,
					spikePrice
				} = this.volume
				let payPrice = price;
				if (this.volume.isSpike && spikeEndTime && spikeStartTime && spikePrice != null) {
					spikeStartTime = spikeStartTime.replace(/-/g, '/')
					spikeEndTime = spikeEndTime.replace(/-/g, '/')
					if (new Date(spikeStartTime).getTime() < now && new Date(spikeEndTime) > now) {
						payPrice = spikePrice
						this.isSpike = true
					}
				}
				this.orderPrice.totalPrice = payPrice.toFixed(2)
				let deductionIntegral = 0
				if (this.useIntegral) {
					if (this.userInfo.integral >= payPrice) {
						deductionIntegral = payPrice
						payPrice = 0
					} else {
						deductionIntegral = this.userInfo.integral
						payPrice -= this.userInfo.integral
					}
				}

				let deductionMoney = 0
				if (this.useNowMoney) {
					if (this.userInfo.nowMoney >= payPrice) {
						deductionMoney = payPrice
						payPrice = 0
					} else {
						deductionMoney = this.userInfo.nowMoney
						payPrice -= this.userInfo.nowMoney
					}
				}

				this.orderPrice.payPrice = payPrice.toFixed(2)
				this.orderPrice.deductionMoney = deductionMoney.toFixed(2)
				this.orderPrice.deductionIntegral = deductionIntegral.toFixed(2)
			},



			payItem: function(index) {
				this.active = index
			},

			createOrder() {
				uni.showLoading({
					title: '生成订单中',
				})
				let from = {}
				if (this.$deviceType == 'app') {
					from.from = 'app'
				}
				console.log(this.$deviceType)
				// #ifdef MP-WEIXIN
				subscribeMessage()
				// #endif
				SubjectApi.createOrder(orderKey, {

						useIntegral: this.useIntegral ? 1 : 0,
						useNowMoney: this.useNowMoney ? 1 : 0,
						payType: this.active,
						volumeId: this.volumeId,
						from: this.from,
						mark: this.mark || '',
						...from,
					})
					.then(res => {
						console.log('res: ',res);
						if(res.data.status == 'pay_success') {
							uni.showToast({
							  title: "支付成功",
							  icon: "success",
							  duration: 2000,
							});
							uni.$emit("VolumePaid", this.volumeId)
							this.$yrouter.back();
						}else {
							weappPay(res.data.data)
							.then((res)=>{
								uni.showToast({
								  title: "支付成功",
								  icon: "success",
								  duration: 2000,
								});
								uni.$emit("VolumePaid", this.volumeId)
								this.$yrouter.back();
							}).catch(err => {
								uni.showToast({
								  title: "支付失败",
								  icon: "none",
								  duration: 2000,
								});
							})
						}
						
					
					})
					.catch(err => {
						handleErrorMessage(err, '创建订单失败')
					})
			},
		},
	}
</script>
<style lang="scss" scope>
	.volume {
		display: flex;
		padding: 30rpx;
		justify-content: space-between;

		&-info {
			width: 350rpx;
		}

		&-title {
			font-size: 32rpx;
			height: 70rpx;
		}

		&-level {
			font-size: 24rpx;
			color: #6c6c6c;
			margin-bottom: 10rpx;
		}

		&-price {
			font-size: 26rpx;
			color: #eb3729;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn-pay {
			width: 130rpx;
		}
	}
	
	.com_buy_agreement{
		padding: 27rpx 30rpx;
		background-color: #FFFFFF;
		margin-top: 12rpx;
	}
</style>