<template>
	<view>
		<uni-section title="抬头类型" type="line">
			<view class="uni-list">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view style="flex: 1;">{{item.name}}</view>
					</label>
				</radio-group>
			</view>
		</uni-section>
		<uni-section title="发票详情" type="line">
			<view class="paddinglr30">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
					<uni-forms-item label="发票抬头" name="invoicetitle" required>
						<uni-easyinput v-model="baseFormData.invoicetitle" placeholder="请输入发票抬头" />
					</uni-forms-item>
					<uni-forms-item label="纳税人识别号" name="userId" required>
						<uni-easyinput v-model="baseFormData.userId" placeholder="请输入纳税人识别号" />
					</uni-forms-item>
					<uni-forms-item label="注册地址">
						<uni-easyinput v-model="baseFormData.address" placeholder="请输入注册地址" />
					</uni-forms-item>
					<uni-forms-item label="注册电话">
						<uni-easyinput v-model="baseFormData.telphone" placeholder="请输入注册电话" />
					</uni-forms-item>
					<uni-forms-item label="开户行">
						<uni-easyinput v-model="baseFormData.bank" placeholder="请输入开户行" />
					</uni-forms-item>
					<uni-forms-item label="开户账号">
						<uni-easyinput v-model="baseFormData.bankAccount" placeholder="请输入开户账号" />
					</uni-forms-item>
					<uni-forms-item label="电子邮箱" name="email" required>
						<uni-easyinput v-model="baseFormData.email" placeholder="请输入电子邮箱" />
					</uni-forms-item>
					<uni-forms-item label="备注">
						<uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="备注" />
					</uni-forms-item>
					<uni-section title="纸质票邮寄方式" type="line">
						<uni-forms-item label="邮寄地址" name="emsAdress" required="">
							<uni-easyinput v-model="baseFormData.emsAdress" placeholder="请输入邮寄地址" />
						</uni-forms-item>
						<uni-forms-item label="联系人">
							<uni-easyinput v-model="baseFormData.emsUsername" placeholder="请输入联系人" />
						</uni-forms-item>
						<uni-forms-item label="联系方式">
							<uni-easyinput v-model="baseFormData.emsTel" placeholder="请输入联系方式" />
						</uni-forms-item>
					</uni-section>
				</uni-forms>

			</view>
		</uni-section>
		<view class="paddinglr30 margin-top-30 uni-common-mb">
			<button type="primary" @click="submit('baseForm')">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: '1',
						name: '个人'
					},
					{
						value: '2',
						name: '企业'
					},
					{
						value: '3',
						name: '非企业性单位'
					},
				],
				current: 0,
				baseFormData: {
					invoicetitle: '',
					userId: '',
					address: '',
					telphone: '',
					bank: '',
					bankAccount: '',
					email: '',
					remark: '',
					emsAdress: '',
					emsUsername: '',
					emsTel: '',
				},
				// 校验规则
				rules: {
					invoicetitle: {
						rules: [{
							required: true,
							errorMessage: '发票抬头不能为空'
						}]
					},
					userId: {
						rules: [{
							required: true,
							errorMessage: '纳税人识别号不能为空'
						}, {
							format: 'number',
							errorMessage: '纳税人识别号只能输入数字'
						}]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '电子邮箱不能为空'
						}, ]
					},
					emsAdress: {
						rules: [{
							required: true,
							errorMessage: '邮寄地址不能为空'
						}, ]
					},
				},
			};
		},
		onLoad() {},

		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.baseForm.setRules(this.rules)
		},

		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		},
	}
</script>

<style lang="scss">

</style>
