<script setup>
	import { message } from 'ant-design-vue'
	import { getById } from '@/api/storageJob/internalCirculation'

	const props = defineProps({
		visible: {
			type: Boolean,
			required: false,
			default: false
		},
		editData: {
			type: Object,
			required: false,
			default: null
		},
		action: {
			type: String,
			required: false,
			default: null
		}
	})

	const isView = computed(() => props.action === 'view')
	const isAdd = computed(() => props.action === 'add')
	const isEdit = computed(() => props.action === 'edit')
	const isApprove = computed(() => props.action === 'approve')
	const readonly = computed(() => {
		return isView.value || isApprove.value
	})

	const show = ref(props.visible)
	const formData = ref({})
	const getData = () => {
		getById(props.editData.id).then((resp) => {
			formData.value = resp
		})
	}

	watch(
		() => props.visible,
		(n, o) => {
			if (n) {
				getData()
			}
			show.value = n
		}
	)

	const emit = defineEmits(['update:visible', 'on-approve'])

	const close = () => emit('update:visible', false)

	const submitLoading = ref(false)

	const save = () => {
		close()
	}
</script>

<template>
	<xn-form-container title="详细信息" width="80%" v-model:visible="show" :destroy-on-close="true" @close="close">
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-divider>详细信息</a-divider>
			<a-row :gutter="42">
				<a-col :span="8">
					<a-form-item label="库区名称" name="orgName">
						<a-input :disabled="readonly" v-model:value="formData.orgName" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="仓房名称" name="cfmc">
						<a-input :disabled="readonly" v-model:value="formData.cfmc" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="仓房类型" name="cflxmc">
						<a-input :disabled="readonly" v-model:value="formData.cflxmc" />
					</a-form-item>
				</a-col>
			</a-row>

			<a-row :gutter="42">
				<a-col :span="8">
					<a-form-item label="品种" name="pzmc">
						<a-input :disabled="readonly" v-model:value="formData.pzmc" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="数量" name="kcsl">
						<a-input :disabled="readonly" v-model:value="formData.kcsl" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="入库年限" name="rknx">
						<a-input :disabled="readonly" v-model:value="formData.rknx" />
					</a-form-item>
				</a-col>
			</a-row>

			<a-row :gutter="42">
				<a-col :span="8">
					<a-form-item label="害虫检测单号" name="hcjcdh">
						<a-input :disabled="readonly" v-model:value="formData.hcjcdh" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="发生部位" name="fsbw">
						<a-input :disabled="readonly" v-model:value="formData.fsbw" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="主要害虫" name="someField">
						<a-input :disabled="readonly" v-model:value="formData.someField" />
					</a-form-item>
				</a-col>
			</a-row>

			<a-row :gutter="42">
				<a-col :span="8">
					<a-form-item label="环流熏蒸方式" name="hlxzfs">
						<a-input :disabled="readonly" v-model:value="formData.hlxzfs" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="施药人员资质情况" name="syrrzzqk">
						<a-input :disabled="readonly" v-model:value="formData.syrrzzqk" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="施药资质审核" name="syzzsh">
						<a-input :disabled="readonly" v-model:value="formData.syzzsh" />
					</a-form-item>
				</a-col>
			</a-row>

			<a-row :gutter="42">
				<a-col :span="8">
					<a-form-item label="磷化氢浓度" name="lhqnd">
						<a-input :disabled="readonly" v-model:value="formData.lhqnd" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="散气日期" name="sqrq">
						<a-date-picker
							v-model:value="formData.sqrq"
							:show-time="true"
							format="YYYY-MM-DD HH:mm:ss"
							:disabled="readonly"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="散气方法" name="sqff">
						<a-input :disabled="readonly" v-model:value="formData.sqff" />
					</a-form-item>
				</a-col>
			</a-row>

			<a-row :gutter="42">
				<a-col :span="8">
					<a-form-item label="散气批准人" name="sqpzr">
						<a-input :disabled="readonly" v-model:value="formData.sqpzr" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="散气天数" name="sqts">
						<a-input :disabled="readonly" v-model:value="formData.sqts" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="散气结束时磷化氢浓度" name="sqjsslhqnd">
						<a-input :disabled="readonly" v-model:value="formData.sqjsslhqnd" />
					</a-form-item>
				</a-col>
			</a-row>

			<a-row :gutter="42">
				<a-col :span="8">
					<a-form-item label="熏蒸负责人" name="xzfzr">
						<a-input :disabled="readonly" v-model:value="formData.xzfzr" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="熏蒸作业人员" name="xzzyry">
						<a-input :disabled="readonly" v-model:value="formData.xzzyry" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="熏蒸时间" name="xzsj">
						<a-date-picker
							v-model:value="formData.xzsj"
							format="YYYY-MM-DD HH:mm:ss"
							:show-time="true"
							:disabled="readonly"
						/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="close">关闭</a-button>
			<a-button v-if="!readonly" style="margin-right: 8px" type="primary" @click="save" :loading="submitLoading">
				保存
			</a-button>
		</template>
	</xn-form-container>
</template>

<style scoped></style>
