<template>
	<div>
		<a-modal
			v-model:visible="visible"
			width="50%"
			:closable="false"
			:maskClosable="false"
			:title="titleText"
			:footer="null"
		>
			<a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
				<div class="text-box">
					<a-form-item label="预警名称" name="yjmc">
						<a-input class="title-box" autocomplete="off" :disabled="showLock" v-model:value="formState.yjmc" />
					</a-form-item>
					<a-form-item label="架空期预警第一个月" name="dyy">
						<a-input-number
							:formatter="formatter"
							class="title-box"
							autocomplete="off"
							:disabled="showLock"
							v-model:value="formState.dyy"
						/>
					</a-form-item>
					<a-form-item label="架空期预警第二个月" name="dey">
						<a-input-number
							:formatter="formatter"
							class="title-box"
							autocomplete="off"
							:disabled="showLock"
							v-model:value="formState.dey"
						/>
					</a-form-item>
					<a-form-item label="架空期预警第三个月" name="dsy">
						<a-input-number
							:formatter="formatter"
							class="title-box"
							autocomplete="off"
							:disabled="showLock"
							v-model:value="formState.dsy"
						/>
					</a-form-item>
					<a-form-item label="架空期预警第四个月" name="dsyf">
						<a-input-number
							:formatter="formatter"
							class="title-box"
							autocomplete="off"
							:disabled="showLock"
							v-model:value="formState.dsyf"
						/>
					</a-form-item>
				</div>
			</a-form>
			<div class="btn-box">
				<a-button v-if="dataObj.isType !== '3'" style="margin-right: 16px" type="primary" @click="handleOk"
					>保存</a-button
				>
				<a-button @click="handleCancel">关闭</a-button>
			</div>
		</a-modal>
	</div>
</template>
<script setup>
	// import { isSocialCreditOrIdCode } from '@/utils/validator'
	// import gloabl from '@/api/basic.info/global'
	const props = defineProps({
		dataObj: {
			type: Object,
			default: () => {}
		}
	})
	const formState = ref({
		yjmc: '',
		dyy: '',
		dey: '',
		dsy: '',
		dsyf: ''
	})
	const rules = ref({
		yjmc: [{ required: true, message: '请输入预警名称', trigger: 'blur' }],
		dyy: [{ required: true, message: '请输入第一月百分值', trigger: 'blur' }],
		dey: [{ required: true, message: '请输入第二月百分值', trigger: 'blur' }],
		dey: [{ required: true, message: '请输入第三月百分值', trigger: 'blur' }],
		dsyf: [{ required: true, message: '请输入第四月百分值', trigger: 'blur' }]
	})
	const isTypeData = ref('')
	const showLock = ref(false)
	const visible = ref(false)
	const titleText = ref('')
	const formRef = ref(null)
	const emit = defineEmits(['isVisible'])
	// 取消按钮
	const handleCancel = () => {
		visible.value = false
		emit('isVisible', false)
		formRef.value.resetFields() //resetFields()函数是组件库提供的
		formState.value = {}
	}
	// 确定按钮
	const handleOk = () => {
		formRef.value
			.validate()
			.then(() => {
				// isTypeData === '1' 新增  2是编辑 3是查看
				if (isTypeData.value === '1') return addData()
				if (isTypeData.value === '2') return editData()
				visible.value = false
				emit('isVisible', false)
				formRef.value.resetFields() //resetFields()函数是组件库提供的
				formState.value = {}
			})
			.catch((error) => {
				message.warning('请填写完善')
				console.log('error', error)
			})
	}
	// 新增
	const addData = () => {}
	// 编辑
	const editData = () => {}
	// 用于查看调用
	const detailData = (id) => {}

	//推荐使用： 实时验证，输入值大于100时显示100，并且不显示多余的数字；值为空时显示0 ；如果不满足需求你可以在接着改
	const formatter = (value) => {
		let reg = /^([0-9]{1,2}|100)$/ //0-100的正整数
		let reg1 = /\D/g
		if (reg.test(value)) {
			return Number(value.replace(reg1, '')).toLocaleString()
		} else {
			// value = 100
			if (value == '') {
				return 0
			} else {
				value = 100
				return value
			}
		}
	}
	// 监听点击事件更新数据
	watch(
		() => props.dataObj,
		async (newValue, oldvalue) => {
			await nextTick()
			titleText.value = newValue.titleText
			visible.value = newValue.visible
			showLock.value = newValue.showLock
			isTypeData.value = newValue.isType
			// isType字段用于查看接口
			if (newValue.isType == '2' || newValue.isType == '3') {
				detailData(newValue.id)
			} else {
				// 用于新增时清空表格数据
				formState.value = {}
			}
		},
		{ deep: true, immediate: true }
	)
</script>
<style lang="less" scoped>
	.ant-input {
		width: 80%;
	}
	/* 针对 a-form-item 的 label 应用样式 */
	::v-deep .ant-form-item-label {
		width: 160px;
		text-align: right;
	}
	::v-deep .ant-form-item-control-input {
		width: 100%;
	}
	.title-box {
		width: 100%;
	}
	.ant-picker {
		width: 92%;
	}
	.ant-select {
		width: 80% !important;
	}
	.from-input {
		width: 101.4%;
	}
	::v-deep.ant-modal-footer {
		display: none !important;
	}
	.text-box {
		margin: 0 auto;
		width: 60%;
	}
	.btn-box {
		text-align: center;
	}
	.btn-type {
		background-color: #22ce8d;
		color: #fff;
	}
	//去除 input输入框后面的小箭头
	/deep/.ant-input-number-input {
		height: 32px !important;
	}
	/deep/.ant-input-number {
		width: 100%;
		height: 100%;
		box-shadow: none;
		.ant-input-number-input-wrap {
			height: 100%;
			input {
				height: 100%;
				text-align: center;
			}
		}
		.ant-input-number-handler-wrap {
			display: none;
		}
	}
</style>
