<template>
	<view class="buyBundle-wrap">
		<u-form :model="form" ref="uForms" :label-width="165" label-align="right">
			<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-item required label="客户手机：" prop="custMobile">
				<u-input v-model="form.custMobile" @input="mobileInput" focus type="number" 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>
		<view class="footer-con">
			<u-button class="submit-btn" type="primary" hover-class="none" :custom-style="customBtnStyle" @click="onSubmit">确认收款</u-button>
			<text class="des">提示：请确认在线下实际收到款后再点击【确认收款】。</text>
		</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 {
			customBtnStyle: {  //  自定义按钮样式
				borderColor: '#e84131',
				backgroundColor: '#e84131',
				color: '#fff'
			},
			form: {
				custMobile: '', //  手机号
				custName: '' //  客户姓名
			},
			rules: {
				custMobile: [
					{ required: true, message: '请输入客户手机', trigger: ['blur'] },
					{ validator: isMobileValid, trigger: ['blur'] }
				]
			},
			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) {
							uni.showToast({ icon:'none', title: '收款成功' })
							setTimeout(()=>{
								//  套餐销售记录
								uni.switchTab({
								    url: '/pages/index/index'
								})
							}, 1000)
						}
					});
				} 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{
			display: block;
			color: #909399;
			font-size: 24rpx;
			text-align: center;
			padding-top: 40rpx;
		}
		.submit-btn{
			display: block;
			width: 80%;
			margin: 140rpx auto 0;
		}
	}
}
</style>
