<template>
	<view class="cart-pages">
		<view v-if="!userInfo.receiveAddress" @click="editAddress" class="noAddress">
			<view>请输入收货地址</view>
			<u-icon name="arrow-right" size="36"></u-icon>
		</view>
		<view v-else class="cart-bar">
			<view>
				<u-image height="40rpx" width="40rpx" src="/static/position.png"></u-image>
			</view>
			<view class="position">
				 <view class="address">{{receiveAddress}}</view>
				 <view>{{userInfo.receiverName +'&nbsp;&nbsp;&nbsp;' + userInfo.receiverPhone}}</view>
			</view>
			<view @click="editAddress">
				<u-image height="50rpx" width="50rpx" src="/static/edit.png"></u-image>
			</view>
		</view>
		<view class="goods-list">
			<!-- 商品列表 -->
			<view class="goods-item" v-for="(item,index) in goodsList" :key="item.id">
				<view class="goods-imgs">
					<u-image border-radius="12" width="158rpx" height="140rpx" :src="item.goods.homeImage"></u-image>
				</view>
				<view class="goods-info">
					<view class="good-name">{{item.goods.name}}</view>
					<view class="goods-price">
						<view>
							<text>{{item.goods.sellGold}}</text>
							<u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
						</view>
						<view>×{{item.buyQty}}</view>
					</view>
				</view>
			</view>
			<!-- 总计 -->
			<view class="goods-heji">
				<view>
					<view>商品合计:</view>
					<view class="heji">
						<text>{{totalPrice}}</text>
						<u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
					</view>
				</view>
				<view>
					<view>运费:</view>
					<view>免运费</view>
				</view>
			</view>
		</view>
		<view class="cart-submit">
			<view>
			  <view>总计:<text>{{totalPrice}}</text></view>
			  <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
			</view>
			<view>
				<u-button size="mini" :loading="btnLoading" :custom-style="toOrderButton" type="error" @click="toSaveOrder">确认支付</u-button>
			</view>
		</view>
		<!-- 提示用户设置支付密码 -->
		<u-modal v-model="showSetPswModal" 
		content="请先设置支付密码,才能使用乐豆" 
		show-cancel-button 
		confirm-text="去设置" 
		cancel-text="暂时放弃"
		@confirm="toSetPwd"
		@cancel="showSetPswModal=false"
		></u-modal>
		<!-- 确认取消弹窗 -->
		<u-modal v-model="showLeavePsw" 
		title="确认放弃支付吗?"
		content="您的订单在30分钟内未支付将被取消" 
		show-cancel-button 
		confirm-text="确认放弃" 
		cancel-text="继续支付"
		@confirm="canclePay"
		@cancel="payAgain"
		></u-modal>
		<!-- 确认支付弹窗 -->
		 <u-popup mode="center" closeable @close="showLeavePsw=true" v-model="showInputPsw" width="500rpx" >
			<view class="slot-content">
				<view>确认支付</view>
				<view class="text-cont">
					<text class="num-big">{{totalPrice}}</text>
					<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
				</view>
				<view class="footer">
					<input v-model="password" 
					maxlength="30" 
					style="text-align: center;"
					type="password" 
					@confirm="toPay"
					placeholder="请输入支付密码" />
				</view>
				<view class="fot-btn">
					<u-button :loading="payBtn" @click="toPay" type="error" >确认支付</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { saveOrder, signPay, existPayPwd} from '@/api/order.js'
	import {
		findAddressBycustomerNo
	} from '@/api/receiveAddress.js'
	export default {
		data() {
			return {
				toOrderButton: {
					borderRadius:'100rpx',
					fontSize:'30rpx',
					width: '200rpx',
					height: '80rpx'
				},
				goodsList: [], // 商品列表
				// 用户信息
				userInfo: {},
				btnLoading: false,  // 提交按钮加载圈
				orderId: '', // 订单id
				password: '', // 支付密码
				showSetPswModal: false,  // 设置支付密码弹窗
				showInputPsw: false, // 打开输入密码弹窗
				showLeavePsw: false, // 打开确定放弃弹窗
				payBtn: false
			};
		},
		onShow() {
			this.getLocation()
		},
		onLoad() {
			this.goodsList = this.$store.state.vuex_toOrderList
			// console.log(this.goodsList,'llllllllllll')
			// 监听设置密码是否成功
			uni.$once('setPswSuccess', this.setPsw)
		},
		computed: {
			// 总计
			totalPrice() {
				let total = 0
				this.goodsList.map(item => {
					total = total + item.buyQty * item.goods.sellGold
				})
				return total 
			},
			// 收货地址
			receiveAddress() { 
				if (this.userInfo.receiveAreasName) {
					let area = this.userInfo.receiveAreasName.split(',')
					return area[0]+area[1]+area[2]+this.userInfo.receiveAddress
				}
			}
		},
		methods: {
			// 获取用户位置
			getLocation() {
				 findAddressBycustomerNo({}).then(res => {
					 console.log(res)
					 if (res.status == 200) {
						 this.userInfo = res.data[0] || {}
					 } else {
						 this.userInfo = {}
						 uni.showToast({
						 	title: res.message,
							icon: 'none'
						 })
					 }
				 })
			},
			//新增/修改收货地址信息
			editAddress(){
				this.$u.vuex("vuex_OrderAddress",this.userInfo)
				uni.navigateTo({
					url:"/pages/toOrder/editAddress"
				})
			},
			// 跳转到设置支付密码页
			toSetPwd () {
				uni.navigateTo({
					url:"/pages/userCenter/userInfo/smsVerification"
				})
			},
			// 设置密码成功, 打开输入密码弹窗
			setPsw (e) {
				if (e.success) {
					this.showInputPsw = true
				}
			},
			//确认放弃
			canclePay() {
				this.showLeavePsw = false
				this.showInputPsw = false
				this.password = ''
				// 跳转到订单列表
				uni.redirectTo({
					url:"/pages/order/order"
				})
			},
			// 继续支付
			payAgain () {
				this.showLeavePsw = false
				this.showInputPsw = true
			},
			// 支付  校验用户是否设置过支付密码
			toCheckPwd(){
				// 判断用户是否设置过支付密码
				existPayPwd().then(res=>{
					console.log(res,'rrrrrr')
					if(res.status == 200) {
						// 设置过支付密码,输入密码
						if(res.data) {
							this.showInputPsw = true
						} else {
							// 没设置过支付密码,提示设置密码
							 this.showSetPswModal = true
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			// 支付  保存订单
			toSaveOrder () {
				if (!this.userInfo.receiveAddress) {
					uni.showToast({
						title: '请先输入收货地址',
						icon: 'none'
					})
					return false
				}
				// 已生成订单
				if(this.orderId) {
					// 校验用户是否设置过支付密码
					this.toCheckPwd()
				} else {
					this.btnLoading = true
					let orderGoodsList = []
					this.goodsList.map((item,index)=>{
						orderGoodsList[index] = {
							goodsNo: item.goodsNo,
							buyQty: item.buyQty
						}
					})
					
					let params = {
						receiveAddress: this.receiveAddress,
						receiverName: this.userInfo.receiverName,
						receiverPhone: this.userInfo.receiverPhone,
						orderGoodsList: orderGoodsList,
					}
					saveOrder(params).then(res=>{
						console.log(res,'rrrrrrr')
						this.btnLoading = false
						if(res.status==200) {
							this.orderId = res.data.id
							// 校验用户是否设置过支付密码
							this.toCheckPwd()
							// 刷新购物车
							uni.$emit('getCartList')
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}
			},
			// 支付
			toPay() {
				if (this.password === '') {
					uni.showToast({
						title: '请先输入支付密码',
						icon: 'none'
					})
					return false
				}
				let params = {
					payPwd: this.password,
					id: this.orderId
				}
				this.payBtn = true
				signPay(params).then(res=>{
					this.payBtn = false
					if(res.status == 200) {
						// 跳转到支付完成界面
						uni.redirectTo({
							url:"/pages/toOrder/payFinish?id=" + this.orderId
						})
					} else{
						this.password = ''
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss">
page{
	height: 100%;
}
.cart-pages{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.cart-bar{
		background: #FFFFFF;
		border-bottom: 1px solid #F8F8F8;
		border-top: 10upx solid #F8F8F8;
		display: flex;
		align-items: center;
		padding:15upx 20upx;
		.position{
			flex-grow: 1;
		}
		> view{
			padding: 10upx;
			.address{
				padding: 5upx 0;
			}
			&:last-child{
				padding: 0 20upx;
			}
		}
	}
	.noAddress{
		background: #FFFFFF;
		border-bottom: 1px solid #F8F8F8;
		border-top: 10upx solid #F8F8F8;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:30upx 20upx;
		font-size: 30upx;
	}
	.goods-list{
		padding: 20upx 0;
		flex-grow: 1;
		overflow: auto;
		.goods-class-box{
			background: #FFFFFF;
			box-shadow: 1px 1px 3px #eee;
			margin-bottom: 20upx;
		}
		
		.goods-item{
			padding: 20upx 40upx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #F8F8F8;
			background: #fff;
			&:last-child{
				border: 0;
			}
			.goods-imgs{
				position: relative;
			}
			.goods-info{
				flex-grow: 1;
				padding-left: 20upx;
				.good-name{
					font-weight: bold;
					word-break: break-all;
				}
			}
			.goods-price{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20upx;
				>view{
					&:first-child{
						display: flex;
						align-items: center;
						text{
							color: red;
							font-size: 35upx;
							margin-right: 6upx;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
	.goods-heji{
		padding: 20upx 40upx;
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #eee;
		margin-top: 20upx;
		>view{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10upx 0;
			.heji{
				display: flex;
				align-items: center;
				text{
					color: red;
					margin-right: 6upx;
					font-size: 35upx;
					font-weight: bold;
				}
			}
		}
	}
	.cart-submit{
		padding: 20upx 30upx;
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #eee;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		> view{
			&:first-child{
				display: flex;
				align-items: center;
				text{
					color: red;
					font-size: 40upx;
					margin-right: 6upx;
					font-weight: bold;
				}
			}
		}
	}
	// 支付密码弹窗
	.slot-content{
		padding: 30upx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		.text-cont{
			width: 100%;
			padding: 60upx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.num-big{
				font-size: 40upx;
				color: red;
				font-weight: 600;
				margin-right: 6rpx;
			}
		}
		.footer{
			width: 80%;
			border-bottom: 1px solid #b1b1b1;
			margin-bottom: 30upx;
		}
	}
}
</style>