<template>
	<xn-form-container
		:title="'位置信息管理新增'"
		:width="800"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form
			:model="formState"
			ref="formStateRef"
			:rules="formStateRules"
			name="basic"
			autocomplete="off"
			@finish="onFinish"
			@finishFailed="onFinishFailed"
		>
			<a-row>
				<a-col :span="12">
					<div class="common">
						<a-form-item
							class="form-item"
							label="单位名称"
							name="dwmc"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-input
								class="inputs"
								v-model:value="formState.dwmc"
								:disabled="disabled"
								placeholder="请输入单位"
								allow-clear
							/>
						</a-form-item>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="common">
						<a-form-item
							class="form-item selects"
							label="单位类型"
							name="dwlx"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-select :disabled="disabled" v-model:value="formState.dwlx" @change="handleChange">
								<a-select-option v-for="item in optionsEthnicity" :key="item.id" :value="item.id">{{
									item.dictLabel
								}}</a-select-option>
							</a-select>
						</a-form-item>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="common">
						<a-form-item
							class="form-item"
							label="地址"
							name="zcdz"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-input v-model:value="formState.zcdz" :disabled="disabled" placeholder="请输入地址" all-clear />
						</a-form-item>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="common">
						<a-form-item class="form-item" label="单位性质" name="companyNature" :label-col="{ span: 8 }">
							<a-select :disabled="disabled" v-model:value="formState.companyNature" @change="handleChange">
								<a-select-option v-for="item in optionsGender" :key="item.id" :value="item.id">{{
									item.dictLabel
								}}</a-select-option>
							</a-select>
						</a-form-item>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="common">
						<a-form-item class="form-item" label="统一社会信用代码" name="dwdm" :label-col="{ span: 8 }">
							<a-input
								v-model:value="formState.dwdm"
								:disabled="disabled"
								placeholder="请输入18一社会信用代码"
								allow-clear
							/>
						</a-form-item>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="common">
						<a-form-item class="form-item" label="邮政编码" name="yzbm" :label-col="{ span: 8 }">
							<a-input v-model:value="formState.yzbm" :disabled="disabled" placeholder="请输入邮政编码" allow-clear />
						</a-form-item>
					</div>
				</a-col>
			</a-row>

			<!--  -->
			<a-row>
				<a-col :span="12">
					<div class="common">
						<a-form-item class="form-item" label="联系电话(法人)" name="frlxfs" :label-col="{ span: 8 }">
							<a-input v-model:value="formState.frlxfs" :disabled="disabled" placeholder="请输入联系电话" all-clear />
						</a-form-item>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="common">
						<a-form-item class="form-item" label="联系人(企业)" name="qylxr" :label-col="{ span: 8 }">
							<a-input v-model:value="formState.qylxr" :disabled="disabled" placeholder="请输入联系人" all-clear />
						</a-form-item>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="common">
						<a-form-item class="form-item" label="经度" name="jd" :label-col="{ span: 8 }">
							<a-input v-model:value="formState.jd" :disabled="disabled" placeholder="请输入经度" all-clear />
						</a-form-item>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="common">
						<a-form-item class="form-item" label="纬度" name="wd" :label-col="{ span: 8 }">
							<a-input v-model:value="formState.wd" :disabled="disabled" placeholder="请输入纬度" all-clear />
						</a-form-item>
					</div>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="20">
					<div class="common">
						<a-form-item
							v-model:validation-status="formState.xzqhdm"
							class="form-item xingzheng"
							label="行政区划"
							name="xzqhdm"
							:label-col="{ span: 5 }"
						>
							<a-cascader
								:disabled="disabled"
								class="address-box"
								:options="cascaOptions"
								:load-data="(ev) => loadCascaderData(ev)"
								placeholder="请选择行政区划"
								v-model:value="formState.xzqhdm"
								change-on-select
								@change="getChangeData"
							/>
						</a-form-item>
					</div>
				</a-col>
			</a-row>
			<div class="btnBox">
				<a-button class="acc" @click="onClose"> 取消 </a-button>
				<a-button class="acc snowy-buttom-left" :disabled="disabled" type="primary" html-type="submit"> 保存 </a-button>
			</div>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
		</template>
	</xn-form-container>
</template>
<script lang="js">
	import business from '@/api/business/personnelApi'
	import businessDEl from '@/api/business/dictionary.js'
	import { ref } from 'vue'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import global from '@/api/basic.info/global'
	import {
		isSocialCreditOrIdCode,
		isLongitude,
		isLatitude,
		isEmail,
		// isTelephone,
		isChinese,
		isMobileData,
		isZipCode,
		isInternetUrl,
		isSocialCreditCode
	} from '@/utils/validator-zq'
	export default {
		name: 'FromName',
		components: {},
		emits: ['change'],

		setup(props, { emit }) {
			const disabled = ref(false)
			const visible = ref(false)
			const records = ref('')
			const onOpen = (record, flag, view, row) => {
				records.value = record
				visible.value = flag
				disabled.value = view
				if (row) {
					detail(row.id)
					formState.value.id = row.id
				}
			}
			const detail = async (v) => {
				const res = await business.QYWZXXview({ id: v })
				formState.value = res

				if (res.zcdzProvinceName && res.zcdzCityName && res.zcdzAreaName) {
					formState.value.xzqhdm = `${res.zcdzProvinceName}/${res.zcdzCityName}/${res.zcdzAreaName}`
				} else if (res.zcdzProvinceName && res.zcdzCityName) {
					formState.value.xzqhdm = `${res.zcdzProvinceName}/${res.zcdzCityName}`
				} else {
					formState.value.xzqhdm = `${res.zcdzProvinceName}`
				}
				console.log(formState.value)
			}
			const onClose = () => {
				visible.value = false
			}
			watch(
				() => visible.value,
				(newVal) => {
					if (!newVal) {
						setTimeout(() => {
							formState.value = {
								id: '',
								dwdm: '',
								dwmc: '',
								dwlx: '',
								zcdz: '',
								companyNature: '',
								qylxr: '',
								frlxfs: '',
								yzbm: '',
								jd: '',
								wd: '',
								xzqhdm: '',
								zcdzProvince: '',
								zcdzCity: '',
								zcdzArea: ''
							}
						}, 0)
					}
				},
				{ immediate: true, deep: true }
			)

			const formState = ref({
				id: '',
				dwdm: '',
				dwmc: '',
				dwlx: '',
				zcdz: '',
				companyNature: '',
				qylxr: '',
				frlxfs: '',
				yzbm: '',
				jd: '',
				wd: '',
				xzqhdm: '',
				zcdzProvince: '',
				zcdzCity: '',
				zcdzArea: ''
			})

			const formStateRef = ref(null)
			const formStateRules = ref({
				dwmc: [
					{ required: true, message: '请填写!', trigger: 'change' }
					// { validator: isChinese, trigger: 'change' }
				],
				dwlx: [{ required: true, message: '请填写!', trigger: 'change' }],
				zcdz: [
					{ required: true, message: '请填写!', trigger: 'blur' }
					// { validator: isChinese, trigger: 'change' }
				],
				companyNature: [{ required: true, message: '请填写!', trigger: 'change' }],
				dwdm: [
					{ required: true, message: '请填写!', trigger: 'change' },
					{ validator: isSocialCreditCode, trigger: 'change' }
				],
				yzbm: [
					{ required: true, message: '请填写!', trigger: 'change' },
					{ validator: isZipCode, trigger: 'change' }
				],
				frlxfs: [
					{ required: true, message: '请填写!', trigger: 'change' },
					{ validator: isMobileData, trigger: 'change' }
				],
				qylxr: [
					{ required: true, message: '请填写!', trigger: 'change' }
					// { validator: isMobileData, trigger: 'change' }
				],
				jd: [
					{ required: true, message: '请填写!', trigger: 'change' },
					{ validator: isLongitude, trigger: 'change' }
				],
				wd: [
					{ required: true, message: '请填写!', trigger: 'change' },
					{ validator: isLatitude, trigger: 'change' }
				],
				xzqhdm: [{ required: true, message: '请填写!', trigger: 'change' }]
			})

			const onFinish = async (values) => {
				if (records.value == 'add') {
					formState.value.zcdzProvince = register.zcdzProvince
					formState.value.zcdzCity = register.zcdzCity
					formState.value.zcdzArea = register.zcdzArea
				}
				// formState.value.xzqhdm = ''
				await handleAdd(formState.value)
				emit('change')
				formState.value = {
					id: '',
					dwdm: '',
					dwmc: '',
					dwlx: '',
					zcdz: '',
					companyNature: '',
					qylxr: '',
					frlxfs: '',
					yzbm: '',
					jd: '',
					wd: '',
					xzqhdm: '',
					zcdzProvince: '',
					zcdzCity: '',
					zcdzArea: ''
				}
				onClose()
			}

			const handleAdd = async (val) => {
				formState.value.xzqhdm = ''
				if (records.value == 'edit') {
					console.log(records.value)
					const res = await business.QYWZXXedit(val)
				} else {
					const res = await business.QYWZXXadd(val)
					console.log('add')
				}
			}

			onMounted(() => {
				getEthnicity()
				getGender()
			})
			// 获取下拉单位类型
			const optionsGender = ref([]) // 单位性质
			const optionsEthnicity = ref([]) //单位类型
			const getEthnicity = async () => {
				const res = await businessDEl.genderDEl({ isQueryFristNode: true, parentId: '1783406822916190209' })
				optionsEthnicity.value = res
			}
			const getGender = async () => {
				const res = await businessDEl.genderDEl({ isQueryFristNode: true, parentId: '1787747408829857793' })
				optionsGender.value = res
			}

			const handleChange = (val) => {
				console.log(val)
			}

			const delADD = () => {
				formStateRef.value.validate().then(() => {})
			}

			const onFinishFailed = (errorInfo) => {
				console.log('Failed:', errorInfo)
			}

			// -________________________________

			onMounted(() => {
				initProvince(infoObj.value)
				getEthnicity()
			})

			const infoObj = ref({
				id: '1781533421287342082',
				isQueryFristNode: true
			})
			const cascaOptions = ref([])
			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
				})
			}
			let register = {
				zcdzProvince: '',
				zcdzCity: '',
				zcdzArea: ''
			}

			// 新增时候获取省
			const initProvince = (id, cb) => {
				business
					.getAllChildrenDataDEl(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()
			}
			// 注册地址选择一栏
			const getChangeData = (val, selectedOptions) => {
				// 将选择好的id循环取出push到formState.value里面
				if (selectedOptions.length === 1) {
					register = { zcdzProvince: '', zcdzCity: '', zcdzArea: '' }
					register.zcdzProvince = selectedOptions[0].id
				} else if (selectedOptions.length === 2) {
					register = { zcdzProvince: '', zcdzCity: '', zcdzArea: '' }
					register.zcdzProvince = selectedOptions[0].id
					register.zcdzCity = selectedOptions[1].id
				} else {
					register = { zcdzProvince: '', zcdzCity: '', zcdzArea: '' }
					register.zcdzProvince = selectedOptions[0].id
					register.zcdzCity = selectedOptions[1].id
					register.zcdzArea = selectedOptions[2].id
				}
			}

			return {
				optionsGender,
				optionsEthnicity,
				handleChange,
				loadCascaderData,
				infoObj,
				initProvince,
				getChangeData,
				cascaOptions,
				formStateRules,
				delADD,
				formStateRef,
				formState,
				onFinish,
				onFinishFailed,
				disabled,
				onOpen,
				visible,
				onClose
			}
		}
	}
</script>
<style lang="less" scoped>
	.btnBox {
		text-align: center;
		margin-top: 100px;
		.snowy-buttom-left {
			margin-left: 100px;
		}
		.acc {
			width: 80px;
			height: 40px;
		}
	}
	// ::v-deep(.ant-form-item-control-input) {
	// 	// width: 250px;
	// }
	// .selects {
	// 	::v-deep(.ant-select-selector) {
	// 		// width: 20px;
	// 	}
	// }

	// .xingzheng {
	// 	::v-deep(.ant-select-selector) {
	// 		width: 400px;
	// 	}
	// }
</style>
