<template>
	<!-- 添加客户名称 -->
	<!-- <u-popup v-model="show" mode="center" length="90%"> -->
	<view style="padding: 40rpx; background-color: #fff;">
		<!-- <h4 style="width: 100%; text-align: center; font-size: 30rpx; margin-bottom: 20rpx;">
			添加客户
		</h4> -->
		<u-form :model="formData" ref="formRef" label-width="145">
			<u-form-item label="名称" prop="customerName">
				<u-input v-model="formData.customerName" placeholder="请输入名称" />
			</u-form-item>
			<u-form-item label="编码" prop="customerCode">
				<u-input v-model="formData.customerCode" placeholder="请输入编码" />
			</u-form-item>
			<u-form-item label="邮箱" prop="contactsEmail">
				<u-input v-model="formData.contactsEmail" placeholder="请输入邮箱" />
			</u-form-item>
			<u-form-item label="选择地址" prop="registerAddress">
				<u-input
					v-model="formData.registerAddress"
					:disabled="true"
					placeholder="请选择"
					@tap="showRegion = true"
				/>
			</u-form-item>
			<u-form-item label="详细地址" prop="detailedAddress" :border-bottom="false">
				<u-input
					type="textarea"
					v-model="formData.detailedAddress"
					placeholder="请输入详细地址"
				/>
			</u-form-item>
		</u-form>
		<u-button type="error" @tap="saveConsignee">保存</u-button>
	</view>
	<!-- </u-popup> -->
	<u-picker mode="region" v-model="showRegion" @confirm="confirm" />
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, ComponentInternalInstance } from 'vue'
import { onReady } from '@dcloudio/uni-app'
import { addConsignee } from '@/api/profile';

let formRef = ref();
// let show = ref(false);
let showRegion = ref(false);
let { proxy }: any = getCurrentInstance() as ComponentInternalInstance;

let formData = ref({
	customerName: '', // 客户名称
	customerCode: '', // 客户编码
	contactsEmail: '', // 客户邮箱
	registerAddress: '', // 注册地址(省市区)
	detailedAddress: '', // 详细地址
});
let rules = ref({
	customerName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
	customerCode: [{ required: true, message: '请输入编码', trigger: 'blur' }],
	contactsEmail: [
		{ required: true, message: '请输入email', trigger: 'blur' },
		{
			validator: (rule, value: any, callback) => {
				return proxy.$u.test.email(value);
			},
			message: 'email不正确',
			trigger: 'blur',
		},
	],
	registerAddress: [{ required: true, message: '请选择地址', trigger: ['blur', 'change'] }],
	detailedAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
});


// 引入校验
onReady(() => {
	formRef.value?.setRules(rules.value);
})

// 设置地区
let confirm = (data: any) => {
	formData.value.registerAddress = data.province.name + data.city.name + data.area.name;
};

// 保存客户
let saveConsignee = () => {
		formRef.value.validate((valid: boolean, err: any) => {
			if(valid) {
				addConsignee(formData.value).then((res: any) => {
					if (res.data.code === 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
						});
						uni.navigateBack()
					}
				});
			} else console.log(err);
		})
};
</script>

<style></style>
