<template>
	<view class="page-content">
		<u-gap height="10" bg-color="#f8f8f8"></u-gap>
		<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
			placeholder="请填写备注(最多500个字符)"
			type="textarea"
		>
		</u-field>
		<view class="num-cont">
			<text class="u-required">支付数量</text>
			<view class="num-input">
				<u-input v-model="number" type="number" placeholder="请输入数量" />
				<text>个乐豆</text>
			</view>
		</view>
		<u-gap height="50" bg-color="#f8f8f8"></u-gap>
		<view class="pay-btn">
			<u-button  @click="handlePay" type="error" >确认支付</u-button>
		</view>
		 <!-- 确认支付弹窗 -->
		 <u-popup mode="center" closeable @close="closeModal" v-model="showPayModal" width="600rpx" >
			<view class="slot-content">
				<view>请输入支付密码</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>乐豆
						</view>
					</view>
					<view>
						<text>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</text>
						<text>{{remarks||'--'}}</text>
					</view>
				</view>
				<view class="footer">
					<u-input v-model="password" 
					input-align="center" 
					type="password" 
					placeholder="请输入支付密码" 
					:maxlength="30"
					@confirm="confirm"
					/>
				</view>
				<view class="fot-btn">
					<u-button  @click="confirm" type="error" >确认支付</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,sellerFindByPartnerNo } from '@/api/user.js'
	import { existPayPwd } from '@/api/order.js'
	export default{
		data() {
			return {
				showSetPswModal: false,
				store: null, // 门店信息
				remarks: '', // 备注
				number: '',  // 支付数量
				showPayModal: false, // 支付弹窗
				password: '', // 支付密码
				partnerNo: '' // 销售商编号
			}
		},
		onLoad(opts) {
			console.log(opts)
			this.partnerNo = opts.scene
			// 查询销售商信息
			sellerFindByPartnerNo({officialPartnerNo: this.partnerNo}).then(res => {
				if(res.status == 200){
					this.store = res.data
				}
			})
		},
		methods: {
			// 跳转到设置支付密码页
			toSetPwd () {
				uni.navigateTo({
					url:"/pages/userCenter/userInfo/paymentPwd"
				})
			},
			// 确认支付
			handlePay() {
				if (!this.number) {
					uni.showToast({
						title: '请输入支付数量',
						icon: 'none'
					})
				} else {
					existPayPwd().then(res => {
						console.log(res,'rrrrrr')
						if(res.status == 200) {
							// 设置过支付密码,输入密码
							if(res.data) {
								this.showPayModal = true
							} 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.navigateBack()
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			}
		},
	}
</script>

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