<template>
	<view class="buyBundle-wrap">
		<u-form :model="form" ref="uForms" :label-width="165">
			<u-form-item required label="手机号：" prop="custMobile">
				<u-input v-model="form.custMobile" @input="mobileInput" maxlength="11" placeholder="请输入手机号" />
			</u-form-item>
			<u-form-item label="客户姓名：" prop="custName">
				<u-input v-model="form.custName" maxlength="30" placeholder="请输入客户姓名(最多30个字符)" />
			</u-form-item>
			<u-form-item label="应收金额：" prop="totalAmount">
				<text class="price">{{ totalAmount }}</text>
				元
			</u-form-item>
			<u-form-item label="收款方式：" prop="payType">现金</u-form-item>
		</u-form>
		<view class="footer-con">
			<text class="des">重要提示：请确认在线下实际收到款后再点击【确认收款】！</text>
			<u-button class="submit-btn" type="primary" @click="onSubmit">确认收款</u-button>
		</view>
	</view>
</template>

<script>
import { isvalidPhone } from '@/libs/validate';
import { bundleFindByMobile, bundleBuy } from '@/api/customerBundle';
export default {
	data() {
		// 校验手机号
		const isMobileValid = (rule, value, callback) => {
			if (!value) {
				callback(new Error('请输入手机号'));
			} else {
				if (!isvalidPhone(value)) {
					callback(new Error('请输入正确的手机号'));
				} else {
					callback();
				}
			}
		};
		return {
			form: {
				custMobile: '', //  手机号
				custName: '' //  客户姓名
			},
			rules: {
				custMobile: [
					{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
					{ validator: isMobileValid, trigger: ['blur', 'change'] }
				]
			},
			bundleId: '', //  套餐id
			totalAmount: '', //  应收金额
			custId: '' //  客户id
		};
	},
	onLoad(option) {
		this.bundleId = option.bundleId
		this.totalAmount = option.totalAmount
	},
	methods: {
		//  手机号输入监听
		mobileInput() {
			if (this.form.custMobile.length == 11) {
				if (isvalidPhone(this.form.custMobile)) {
					//  校验手机号
					//  根据手机号去查询是否已绑定车牌
					bundleFindByMobile({ mobile: this.form.custMobile }).then(res => {
						if (res.status == 200) {
							if (res.data) {
								//  查到客户信息
								this.custId = res.data.id;      
							} else {
								//  未查到客户信息
								this.custId = null;
							}
						} else {
							this.custId = null;
						}
					});
				}
			}
		},
		//  确认收款
		onSubmit() {
			this.$refs.uForms.validate(valid => {
				if (valid) {
					const params = {
						bundleId: this.bundleId,
						custId: this.custId,
						custName: this.form.custName,
						custMobile: this.form.custMobile,
						totalAmount: this.totalAmount,
						paymentDetail: { payType: 10001 }
					}
					bundleBuy(params).then(res => {
						if (res.status == 200) {
							//  已购套餐
							if (this.$hasPermissions('M_bundel_buyRecord')) {
								// this.$router.push({ path: '/SetmealSales/PurchasedSetmeal' })
							} else {
								this.cancel()
							}
						}
					});
				} else {
					return false
				}
			})
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForms.setRules(this.rules)
	}
};
</script>

<style lang="less">
.buyBundle-wrap {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	.price {
		font-size: 40rpx;
		margin-right: 10rpx;
		color: red;
	}
	.footer-con{
		margin-top: 30rpx;
		.des{
			color: #909399;
			font-size: 24rpx;
		}
		.submit-btn{
			display: block;
			width: 80%;
			margin: 140rpx auto 0;
		}
	}
}
</style>
