<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 selects"
							label="库区名称"
							name="orgId"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-select :disabled="disabled" v-model:value="formState.orgId" @change="handleChange">
								<a-select-option v-for="item in optionsEthnicity" :key="item.orgId" :value="item.orgId">{{
									item.orgName
								}}</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="personInCharge"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-input
								v-model:value="formState.personInCharge"
								: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="zcdzCity"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-select :disabled="disabled" v-model:value="formState.zcdzCity" @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="accidentType"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-select :disabled="disabled" v-model:value="formState.accidentType" @change="handleChange">
								<a-select-option :value="1">熏蒸事故</a-select-option>
								<a-select-option :value="2">火灾事故</a-select-option>
								<a-select-option :value="3">烘干事故</a-select-option>
								<a-select-option :value="4">高空事故</a-select-option>
								<a-select-option :value="5">用电事故</a-select-option>
								<a-select-option :value="6">车辆事故</a-select-option>
								<a-select-option :value="7">吊装事故</a-select-option>
								<a-select-option :value="8">水灾事故</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="occurrenceTime"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-date-picker
								:disabled="disabled"
								v-model:value="formState.occurrenceTime"
								valueFormat="YYYY-MM-DD HH:mm:ss"
								style="width: 250px"
							/>
						</a-form-item>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="common">
						<a-form-item
							class="form-item"
							label="发生地点"
							name="location"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-input v-model:value="formState.location" :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="lossSituation"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-input
								v-model:value="formState.lossSituation"
								: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="casualtyCount"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-input
								v-model:value="formState.casualtyCount"
								: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="accidentCause"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-input
								v-model:value="formState.accidentCause"
								: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="investigationResult"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-input
								v-model:value="formState.investigationResult"
								: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="investigationTime"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-date-picker
								:disabled="disabled"
								v-model:value="formState.investigationTime"
								valueFormat="YYYY-MM-DD HH:mm:ss"
								style="width: 250px"
							/>
						</a-form-item>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="common">
						<a-form-item
							class="form-item"
							label="调查人"
							name="investigator"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-input
								v-model:value="formState.investigator"
								: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="accidentLevel"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-select :disabled="disabled" v-model:value="formState.accidentLevel" @change="handleChange">
								<a-select-option :value="1">一级</a-select-option>
								<a-select-option :value="2">二级</a-select-option>
								<a-select-option :value="3">三级</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="disposalTime"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-date-picker
								:disabled="disabled"
								v-model:value="formState.disposalTime"
								valueFormat="YYYY-MM-DD HH:mm:ss"
								style="width: 250px"
							/>
						</a-form-item>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="common">
						<a-form-item
							class="form-item"
							label="处置人"
							name="disposalPerson"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 20 }"
						>
							<a-input
								v-model:value="formState.disposalPerson"
								:disabled="disabled"
								placeholder="请输入处置人"
								all-clear
							/>
						</a-form-item>
					</div>
				</a-col>
			</a-row>

			<a-col :span="24">
				<div class="common">
					<a-form-item
						class="form-item"
						label="处置情况"
						name="disposalSituation"
						:label-col="{ span: 4 }"
						:wrapper-col="{ span: 20 }"
					>
						<a-textarea
							v-model:value="formState.disposalSituation"
							:disabled="disabled"
							placeholder="请输入处置情况"
							all-clear
						/>
					</a-form-item>
				</div>
			</a-col>

			<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/security/index.js'
	import businessDEl from '@/api/security/index.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 rest = () => {
				for (let key in formState.value) {
					formState.value[key] = ''
				}
			}
			const detail = async (v) => {
				const res = await business.AQSGGLview({ id: v })
				formState.value = res
			}
			const onClose = () => {
				rest()
				visible.value = false
			}
			watch(
				() => visible.value,
				(newVal) => {
					if (!newVal) {
						setTimeout(() => {
							rest()
						}, 0)
					}
				},
				{ immediate: true, deep: true }
			)

			const formState = ref({
				orgId: 0,
				zcdzCity: '',
				unitInfoId: '',
				personInCharge: '',
				accidentType: 0,
				occurrenceTime: '',
				location: '',
				lossSituation: '',
				casualtyCount: 0,
				accidentCause: '',
				investigationResult: '',
				investigationTime: '',
				investigator: '',
				accidentLevel: 0,
				disposalTime: '',
				disposalPerson: '',
				disposalSituation: '',
				status: 1
			})

			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) => {
				formState.value.status = 1
				await handleAdd(formState.value)
				emit('change')
				onClose()
			}

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

			onMounted(() => {
				getEthnicity()
				// getGender()
			})
			// 获取下拉单位类型
			const optionsGender = ref([]) // 单位性质
			const optionsEthnicity = ref([]) //单位类型
			const getEthnicity = async () => {
				const res = await businessDEl.getAllList()
				optionsEthnicity.value = res
			}
			onMounted(() => {
				DQlist()
			})
			const DQlist = async () => {
				const res = await business.TJFXDQ({ parentId: '1781535965870915586' })
				optionsGender.value = res
			}
			const handleChange = (val) => {
				console.log(val)
			}
			const delADD = () => {
				formStateRef.value.validate().then(() => {})
			}

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

			return {
				optionsGender,
				optionsEthnicity,
				handleChange,
				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>
