<template>
	<div>
		<a-modal class="btn-box" v-model:visible="visible" width="80%" :footer="null" :closable="false" :maskClosable="false"
			:title="titleText">
			<a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
				<a-row>
					<a-col :span="8"><a-form-item label="统一单位编码" name="tydwbm">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.tydwbm" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="单位名称" name="dwmc">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.dwmc" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="单位代码" name="dwdm">
							<a-input autocomplete="off" placeholder="请输入18位统一社会信用代码" :disabled="showLock"
								v-model:value="formState.dwdm" /> </a-form-item></a-col>
				</a-row>
				<a-row>
					<a-col :span="8"><a-form-item label="注册日期" name="zcrq">
							<a-date-picker :disabled="showLock" v-model:value="formState['zcrq']" value-format="YYYY-MM-DD 00:00:00" />
						</a-form-item></a-col>
					<a-col :span="8"><a-form-item label="注册资本" name="zczb">
							<a-input class="int-box" @input="onInput" autocomplete="off" :disabled="showLock"
								v-model:value="formState.zczb">
								<template #suffix>万元</template>
							</a-input></a-form-item></a-col>
					<a-col :span="8"><a-form-item label="资产总额" name="zcze">
							<a-input class="int-box" @input="onChangeInput" autocomplete="off" :disabled="showLock"
								v-model:value="formState.zcze">
								<template #suffix>万元</template>
							</a-input></a-form-item></a-col>
				</a-row>
				<a-row>
					<a-col :span="8"><a-form-item label="法定代表人" name="fddbr">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.fddbr" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="法人身份证号" name="frsfzh">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.frsfzh" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="法人联系方式" name="frlxfs">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.frlxfs" /> </a-form-item></a-col>
				</a-row>
				<a-row>
					<a-col :span="8"><a-form-item label="企业联系人" name="qylxr">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.qylxr" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="办公电话" name="bgdh">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.bgdh" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="电子邮箱" name="dzyx" :rules="[{ validator: isEmail, trigger: 'blur' }]">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.dzyx" /> </a-form-item></a-col>
				</a-row>
				<a-row>
					<a-col :span="16"><a-form-item v-model:validation-status="formState.zcdz" label="注册地址" name="zcdz"
							class="from-item">
							<a-cascader :disabled="showLock" class="address-box" :options="cascaOptions"
								:load-data="(ev) => loadCascaderData(ev)" placeholder="请选择" v-model:value="formState.zcdz"
								change-on-select @change="getChangeData" />
						</a-form-item>
					</a-col>
					<a-col :span="8"><a-form-item label="详细地址" name="xxdz">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.xxdz" /> </a-form-item></a-col>
				</a-row>
				<a-row>
					<a-col :span="8"><a-form-item label="行政区划代码" name="xzqhdm">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.xzqhdm" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="传真号码" name="czhm">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.czhm" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="企业官方网址" :rules="[{ validator: isInternetUrl, trigger: 'blur' }]"
							name="qygfwzdz">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.qygfwzdz" />
						</a-form-item></a-col>
				</a-row>
				<a-row>
					<a-col :span="8"><a-form-item label="上级单位名称" name="sjdwmc">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.sjdwmc" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="邮政编码" :rules="[{ validator: isZipCode, trigger: 'blur' }]" name="yzbm">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.yzbm" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="库区数" name="kqs">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.kqs" /> </a-form-item></a-col>
				</a-row>
				<a-row>
					<a-col :span="8"><a-form-item label="仓房数" name="cfs">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.cfs" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="油罐数" name="ygs">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.ygs" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="上级单位统一编码" name="sjdwdm">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.sjdwdm" /> </a-form-item></a-col>
				</a-row>
				<a-row>
					<a-col :span="8"><a-form-item label="经度" :rules="[{ validator: isLongitude, trigger: 'blur' }]" name="jd">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.jd" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="纬度" :rules="[{ validator: isLatitude, trigger: 'blur' }]" name="wd">
							<a-input autocomplete="off" :disabled="showLock" v-model:value="formState.wd" /> </a-form-item></a-col>
					<a-col :span="8"><a-form-item label="单位类型" name="dwlx">
							<a-select :disabled="showLock" class="select-box" v-model:value="formState.dwlx" :size="size"
								placeholder="请选择">
								<a-select-option v-for="item in unitTypeList" :key="item.dwlx" :value="item.dwlx">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-item></a-col>
				</a-row>
				<a-row>
					<a-col :span="8"><a-form-item label="单位状态" name="dwzt">
							<a-select :disabled="showLock" class="select-box" v-model:value="formState.dwzt" :size="size"
								placeholder="请选择">
								<a-select-option v-for="item in auditStatus" :key="item.dwzt" :value="item.dwzt">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-item></a-col>
				</a-row>
			</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 unitInfoApi from '@/api/basic.info/unitInfoApi'
import { message } from 'ant-design-vue'
import {
	isSocialCreditOrIdCode,
	isLongitude,
	isLatitude,
	isEmail,
	isTelephone,
	isZipCode,
	isInternetUrl,
	isSocialCreditCode
} from '@/utils/validator'
const props = defineProps({
	dataObj: {
		type: Object,
		default: () => { }
	}
})
const isTypeData = ref('')
const showLock = ref(false)
const visible = ref(false)
const titleText = ref('')
const formState = ref({
	tydwbm: '',
	dwmc: '',
	dwdm: '',
	dwlx: '',
	zczb: '',
	zcze: '',
	zcrq: new Date(),
	fdbbr: '',
	frsfzh: '',
	qylxr: '',
	bgdh: '',
	zcdd: '',
	zcdz: '',
	xxdz: '',
	xzqhdm: '',
	kqs: '',
	cfs: '',
	ygs: '',
	dwzt: '',
})
const cascaOptions = ref([])
const unitTypeList = ref([
	{
		name: '粮食仓储企业',
		dwlx: '1'
	},
	{
		name: '粮食购销企业',
		dwlx: '2'
	},
	{
		name: '粮食加工企业',
		dwlx: '3'
	},
	{
		name: '粮食设备制造企业',
		dwlx: '4'
	},
	{
		name: '其他粮食企业',
		dwlx: '9'
	},
	{
		name: '中央直属储备粮库',
		dwlx: '11'
	},
	{
		name: '中谷粮油集团',
		dwlx: '12'
	},
	{
		name: '省级储备粮库',
		dwlx: '13'
	},
	{
		name: '第十集储备粮库',
		dwlx: '14'
	},
	{
		name: '县级储备粮库',
		dwlx: '15'
	},
	{
		name: '其他仓储企业',
		dwlx: '19'
	}
])
const rules = ref({
	tydwbm: [{ required: true, message: '请输入统一单位编码', trigger: 'blur' }],
	dwmc: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
	dwdm: [
		{ required: true, message: '请输入单位代码', trigger: 'blur' },
		{ validator: isSocialCreditCode, trigger: 'blur' }
	],
	dwlx: [{ required: true, message: '请选择单位类型', trigger: 'change' }],
	zcrq: [{ required: true, message: '请选择注册日期', trigger: 'change' }],
	fddbr: [{ required: true, message: '请输入法定代表人', trigger: 'blur' }],
	frsfzh: [
		{ required: true, message: '请输入法人身份证号', trigger: 'blur' },
		{ validator: isSocialCreditOrIdCode, trigger: 'blur' }
	],
	qylxr: [{ required: true, message: '请输入企业联系人', trigger: 'blur' }],
	bgdh: [
		{ required: true, message: '请输入办公电话', trigger: 'blur' },
		{ validator: isTelephone, trigger: 'blur' }
	],
	zcdz: [{ required: true, message: '请输入注册地址', trigger: 'change' }],
	xzqhdm: [{ required: true, message: '请输入行政区划代码', trigger: 'blur' }],
	kqs: [{ required: true, message: '请输入库区数', trigger: 'blur' }],
	cfs: [{ required: true, message: '请输入仓房数', trigger: 'blur' }],
	ygs: [{ required: true, message: '请输入油罐数', trigger: 'blur' }],
	dwzt: [{ required: true, message: '请选择单位状态', trigger: 'change' }],
})
const auditStatus = ref([
	{ name: '正常', dwzt: 1 },
	{ name: '退出储备粮承储', dwzt: 2 }
])

const formRef = ref(null)
const emit = defineEmits(['isVisible'])
// 数字输入框只能输入数字
function onInput(event) {
	// 仅允许数字输入
	formState.value.zczb = event.target.value.replace(/\D/g, '');
}
function onChangeInput(event) {
	// 仅允许数字输入
	formState.value.zcze = event.target.value.replace(/\D/g, '');
}
// 取消按钮
const handleCancel = () => {
	visible.value = false
	emit('isVisible', false)
	formRef.value.resetFields() //resetFields()函数是组件库提供的
	formState.value = {}
	infoObj.value = {
		id: '1781533421287342082',
		isQueryFristNode: true
	}
}
// 确定按钮
const handleOk = () => {
	formRef.value
		.validate()
		.then(() => {
			formState.value.zczb = Number(formState.value.zczb)
			formState.value.zcze = Number(formState.value.zcze)
			// isTypeData === '1' 新增  2是编辑 3是查看
			if (isTypeData.value === '1') return addData()
			if (isTypeData.value === '2') return editData()
		})
		.catch((error) => {
			message.warning('请填写完善')
			console.log('error', error)
		})
}

const infoObj = ref({
	id: '1781533421287342082',
	isQueryFristNode: true
})
const loadCascaderData = (selectedOptions) => {
	const targetOption = selectedOptions[selectedOptions.length - 1]
	targetOption.loading = true
	infoObj.value.id = targetOption.id
	if (selectedOptions.length >= 2) {
		infoObj.value.isQueryFristNode = true
	} else {
		infoObj.value.isQueryFristNode = false
	}
	initProvince(infoObj.value, (data) => {
		targetOption.loading = false
		targetOption.children = data
	})
}

// 新增时候获取省
const initProvince = (id, cb) => {
	unitInfoApi
		.getAllChildrenData(id)
		.then((res) => {
			let datas = res.map((v) => {
				let row = { label: v.dictLabel, value: v.dictValue, id: v.id, pid: v.parentId, sortCode: v.sortCode }
				row['isLeaf'] = v.sortCode.toString().length >= 6
				return row
			})
			if (cb) {
				cb(datas)
			} else {
				cascaOptions.value = []
				cascaOptions.value = datas
			}
		})
		.catch()
}
let register = {
	zcdzProvince: '',
	zcdzCity: '',
	zcdzArea: ''
}
// 注册地址选择一栏
const getChangeData = (val, selectedOptions) => {
	// 将选择好的id循环取出push到formState.value里面
	if (selectedOptions.length === 1) {
		register.zcdzProvince = selectedOptions[0].id
	} else if (selectedOptions.length === 2) {
		register.zcdzProvince = selectedOptions[0].id
		register.zcdzCity = selectedOptions[1].id
	} else {
		register.zcdzProvince = selectedOptions[0].id
		register.zcdzCity = selectedOptions[1].id
		register.zcdzArea = selectedOptions[2].id
	}
	console.log(register, selectedOptions, 'yyyyre')
}


// 用于新增提交
const addData = () => {
	formState.value.zcdzProvince = register.zcdzProvince
	formState.value.zcdzCity = register.zcdzCity
	formState.value.zcdzArea = register.zcdzArea
	formState.value.zcdz = ''
	unitInfoApi.addUnitForm(formState.value).then((res) => {
		isClose()
		register = {
			zcdzProvince: '',
			zcdzCity: '',
			zcdzArea: ''
		}
	})
}
// 用于修改提交
const editData = () => {
	formState.value.zcdzProvince = register.zcdzProvince
	formState.value.zcdzCity = register.zcdzCity
	formState.value.zcdzArea = register.zcdzArea
	formState.value.zcdz = ''
	unitInfoApi.editUnitForm(formState.value).then((res) => {
		isClose()
		register = {
			zcdzProvince: '',
			zcdzCity: '',
			zcdzArea: ''
		}
	})
}
// 用于查看调用
const detailData = (id) => {
	unitInfoApi.unitInfoDetail({ id: id }).then((res) => {
		formState.value = { ...res }
	})
}
const isClose = () => {
	visible.value = false
	emit('isVisible', false)
	formRef.value.resetFields() //resetFields()函数是组件库提供的
	formState.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
		initProvince(infoObj.value)
		// 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: 130px;
	text-align: right;
}

::v-deep .ant-form-item-control-input {
	width: 100%;
}

.ant-picker {
	width: 80%;
}

.ant-select {
	width: 80%;
}

.from-input {
	width: 101.4%;
}

.address-box {
	width: 91.6%;
}

.btn-box {
	text-align: center;
}

.int-box {
	width: 80% !important;
}

::v-deep.ant-modal-footer {
	display: none !important;
}
</style>
