<template>
	<view class="container">
		<view class="goods">
			<view class="title">商品信息</view>
			<view class="info">
				<image class="img" :src="goods.img" mode=""></image>
				<view class="right">
					<view class="goods-title">{{goods.title}}</view>
					<view class="bottom-info">
						<view class="integral">{{goods.sellingPrice}}</view>
						<view class="buy-button">
							<image v-if="goodsNum===1" class="reduce" src="../../static/reduce.png" mode="" @click="reduce()"></image>
							<image v-else class="reduce" src="../../static/reduce-h.png" mode="" @click="reduce()"></image>
							<view class="goods-num">{{goodsNum}}</view>
							<image class="plus" src="../../static/add.png" mode="" @click="add()"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom" :style="{'height':safeAreaBottom+120+'rpx'}">
			<view class="left">
				<text class="title">支付积分：<text class="num">{{payIntegral}}积分</text></text>
			</view>
			<view class="right" @click="goSubmit()">
				立即兑换
			</view>
		</view>
		<pwdCodeAlert closeName="showPwdAlert" v-show="showPwdAlert" :integral="payIntegral" @pwdSubmit="pwdSubmit"></pwdCodeAlert>
		<smsCodeAlert closeName="showSmsCodeAlert" v-show="showSmsCodeAlert" @smsCodeSubmit="smsCodeSubmit"></smsCodeAlert>
		<Alert v-show="errorAlert" :text="errorAlertText" @clickCertain="clickAlert" @clickCancel="clickAlert"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: {},
				goodsNum: 1,
				safeAreaBottom: this.SafeAreaBottom,
				showPwdAlert: false,
				showSmsCodeAlert: false,
				errorAlert: false,
				errorAlertText: '',
				orderId: ''
			};
		},
		onLoad(options) {
			console.log(this.$store.state);
			this.goods = this.$store.state.submitGoods || {}
			this.goodsNum = this.goods.num
		},
		computed: {
			payIntegral() {
				return this.$numUtils.numMulti(this.goods.sellingPrice+'', this.goodsNum+'')
			}
		},
		methods: {
			add() {
				if (this.$numUtils.numMulti(this.goods.sellingPrice+'', this.goodsNum+1) > Number(this.$store.state.userInfo.surplusIntegral)) {
					this.toast('积分不够')
					return 
				}
				this.goodsNum++
			},
			reduce() {
				if (this.goodsNum === 1) {
					return
				}
				this.goodsNum--
			},
			goSubmit() {
				let params = {
					'payIntegral':this.payIntegral,
					'payDetail':[
						{
							'spuId': this.goods.spuNo,
							'skuId': this.goods.skuNo,
							'payNumber': this.goodsNum
						}
					]
				}
				this.$net.post('/submit', params).then(res=>{
					if (res.code === 200) {
						this.orderId = res.data.orderId
						if (res.data.isSendSms === 1) {
							this.showSmsCodeAlert = true
						} else {
							this.showPwdAlert = true
						}
					} else {
						this.errorAlertText = res.message
						this.errorAlert = true
					}
				})
			},
			clickAlert() {
				this.errorAlert = false
			},
			smsCodeSubmit(e) {
				this.$net.post('/payment/validation', {'orderId':this.orderId,'smsCode':e}).then(res=>{
					if (res.code === 200) {
						this.showSmsCodeAlert = false
						this.showPwdAlert = true
					} else {
						this.toast(res.message)
					}
				})
			},
			pwdSubmit(e) {
				this.$net.post('/payment', {'orderId':this.orderId,'payPasswd':e}).then(res=>{
					if (res.code === 200) {
						this.showPwdAlert = false
						this.$router.push('OrderDetail',{'orderId':res.data.orderId})
					} else {
						this.toast(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #F5F5F5;
	.goods {
		margin: 24rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		padding: 24rpx;
		.title {
			font-size: 32rpx;
			font-weight: bolder;
			color: #333333;
			line-height: 44rpx;
		}
		.info {
			display: flex;
			margin-top: 28rpx;
			.img {
				height: 200rpx;
				width: 200rpx;
				display: block;
				border-radius: 8rpx;
			}
			.right {
				margin-left: 16rpx;
				.goods-title {
					font-size: 28rpx;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					height: 80rpx;
					line-height: 40rpx;
					width: 438rpx;
				}
				.attr {
					margin-top: 8rpx;
					font-size: 26rpx;
					color: #666666;
					line-height: 36rpx;
				}
				.bottom-info {
					margin-top: 76rpx;
					display: flex;
					align-items: center;
					width: 438rpx;
					justify-content: space-between;
					.integral {
						font-size: 32rpx;
						height: 36rpx;
						line-height: 36rpx;
						color: #FF0520;
					}
					.buy-button {
						position: relative;
						display: flex;
						width: 160rpx;
						height: 40rpx;
						font-size: 28rpx;
						align-items: center;
						.reduce {
							width: 40rpx;
							height: 40rpx;
						}
						
						.goods-num {
							width: 78rpx;
							text-align: center;
							color: #333333;
						}
						
						.plus {
							position: absolute;
							top: 0;
							left: 118rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
	.bottom {
		// height: 120rpx;
		bottom: 0;
		background-color: #FFFFFF;
		display: flex;
		padding: 0 24rpx;
		// align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		right: 0;
		.left {
			margin-top: 32rpx;
			.title {
				font-size: 28rpx;
				color: #252525;
			}
			.num {
				font-size: 28rpx;
				font-weight: bolder;
				color: #FF0520;
			}
		}
		.right {
			margin-top: 20rpx;
			height: 80rpx;
			border-radius: 40rpx;
			width: 256rpx;
			background-color: #FF0520;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 82rpx;
		}
	}
}
</style>
