<template>
	<view class="page-content">
		<view class="content">
			<u-field
				class="field-item"
				:value="store.name"
				disabled
				input-align="right"
				label="收取门店"
			>
			</u-field>
			<u-field
				v-model="remarks"
				label="备注"
				input-align="right"
				auto-height
				:maxlength="10"
				placeholder="请填写备注(最多10个字符)"
			>
			</u-field>
			<view class="num-cont">
				<text class="u-required">支付数量</text>
				<view class="num-input">
					<u-input v-model="number" input-align="right" type="number" placeholder="请输入数量" />
					<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
				</view>
			</view>
		</view>
		<view class="pay-btn">
			<view class="total">
				<text>{{number||0}}</text>
				<view><u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image></view>
			</view>
			<view>
				<u-button @click="handlePay" type="success" >确认支付</u-button>
			</view>
		</view>
		 <!-- 确认支付弹窗 -->
		 <u-popup mode="center" :mask-close-able="false" closeable @close="closeModal" negative-top="300" v-model="showPayModal" width="600rpx" >
			<view class="slot-content">
				<view class="slot-title">请输入支付密码</view>
				<view class="text-cont">
					<view>
						<text>收取门店:</text>
						<text>{{store.name||'--'}}</text>
					</view>
					<view class="num-text">
						<text>支付数量:</text>
						<view>
							<text class="num-big">{{number}}</text>
							<u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
						</view>
					</view>
					<view>
						<text>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</text>
						<text>{{remarks||'无'}}</text>
					</view>
				</view>
				<view class="footer">
					<input v-model="password" 
					type="password" 
					:focus="focus"
					placeholder="请输入支付密码" 
					:maxlength="30"
					@confirm="confirm"
					/>
				</view>
				<view class="fot-btn">
					<u-button @click="confirm" type="success" >确认支付</u-button>
				</view>
			</view>
		</u-popup>
		
		<!-- 提示用户设置支付密码 -->
		<u-modal v-model="showSetPswModal" 
		content="请先设置支付密码,才能使用乐豆" 
		show-cancel-button 
		confirm-text="去设置" 
		cancel-text="暂时放弃"
		@confirm="toSetPwd"
		@cancel="showSetPswModal=false"
		></u-modal>
	</view>
</template>

<script>
	import { sellerReceive } from '@/api/user.js'
	import { existPayPwd } from '@/api/order.js'
	export default{
		data() {
			return {
				showSetPswModal: false,
				store: null, // 门店信息
				remarks: '', // 备注
				number: '',  // 支付数量
				showPayModal: false, // 支付弹窗
				password: '', // 支付密码
				partnerNo: '', // 销售商编号
				currentGold: 0, //用户当前拥有乐豆数
				focus: false
			}
		},
		onLoad(opts) {
			this.currentGold = this.$store.state.vuex_userData.currentGold
			console.log(this.currentGold,'currentGold')
			this.store = JSON.parse(decodeURIComponent(opts.store))
			this.partnerNo = this.store.officialPartnerNo
			// console.log(this.store,'22222')
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods: {
			// 跳转到设置支付密码页
			toSetPwd () {
				uni.navigateTo({
					url:"/pages/userCenter/userInfo/smsVerification"
				})
			},
			// 确认支付
			handlePay() {
				if (!this.number) {
					uni.showToast({
						title: '请输入支付数量',
						icon: 'none'
					})
				} else {
					if (this.number>this.currentGold) {
						uni.showToast({
							title: '您当前余额不足!',
							icon: 'none'
						})
						return false
					}
					existPayPwd().then(res => {
						console.log(res,'rrrrrr')
						if(res.status == 200) {
							// 设置过支付密码,输入密码
							if(res.data) {
								this.showPayModal = true
								setTimeout(()=>{
									this.focus = true
								},300)
							} else {
								// 没设置过支付密码,提示设置密码
								 this.showSetPswModal = true
							}
						}
					})
				}
			},
			// 关闭弹窗
			closeModal() {
				this.showPayModal = false
				this.password = ''
			},
			// 输入密码完成 支付
			confirm(e) {
				if(this.password == ''){
					uni.showToast({
						title: '请输入支付密码',
						icon: 'none'
					})
					return
				}
				let data = {
					"payPassword": this.password,
					"changeNum": this.number,
					"remarks": this.remarks,
					"officialPartnerNo": this.partnerNo
				}
				sellerReceive(data).then(res => {
					console.log(res)
					if(res.status == 200){
						uni.redirectTo({
							url: '/pages/checkOut/checkFinish?num='+this.number
						})
					} 
				})
			}
		},
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.page-content{
		width: 100%;
		height: 100%;
		padding: 20upx;
		background-color: #f8f8f8;
		.content{
			background-color: #fff;
		}
		.num-cont{
			width: 100%;
			padding: 16upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.num-input{
				display: flex;
				align-items: center;
				justify-content: center;
				>u-input {
					width: 300upx;
				}
			}
		}
		.pay-btn{
			padding: 0 30upx;
			.total {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 60upx 0;
				text{
					font-size: 48upx;
					font-weight: 600;
					color: red;
				}
			}
		}
	}
	.slot-content{
		padding: 30upx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		.slot-title{
			font-size: 36rpx;
		}
		.text-cont{
			width: 100%;
			margin-top: 20upx;
			// font-size: 20rpx;
			>view {
				padding: 15upx 60upx;
				display: flex;
				>text{
					&:last-child {
						flex: 1;
						padding-left: 30upx;
					}
				}
				.num-big{
					font-size: 36upx;
					color: red;
					padding-left: 30upx;
					font-weight: 600;
				}
			}
			.num-text{
				align-items: center;
				>view {
					display: flex;
					align-items: center;
				}
			}
			
		}
		.footer{
			width: 80%;
			border-bottom: 1px solid #b1b1b1;
			>input {
				text-align: center;
				padding: 10upx 0;
			}
		}
		.fot-btn{
			margin-top: 30upx;
		}
	}
</style>