<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="unitInfoId">
						<a-select class="select-box" :disabled="showLock" v-model:value="formState.unitInfoId" :size="size"
							style="width: 100%" @change="monitoringCahnge" placeholder="请选择">
							<a-select-option v-for="item in enterpriseList" :key="item.unitInfoId" :value="item.unitInfoId">{{ item.dwmc
							}}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="库区名称" name="orgInfoId">
						<a-select class="select-box" :disabled="showLock" v-model:value="formState.orgInfoId" :size="size"
							style="width: 100%" placeholder="请选择">
							<a-select-option v-for="item in orgInfoList" :key="item.orgInfoId" :value="item.orgInfoId">{{ item.orgName
							}}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="粮食品种" name="grainVarietyId">
						<a-select class="select-box" :disabled="showLock" v-model:value="formState.grainVarietyId" :size="size"
							style="width: 100%" placeholder="请选择">
							<a-select-option v-for="item in varietyList" :key="item.grainVarietyId" :value="item.grainVarietyId">{{
								item.enumname }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="粮食性质" name="grainNatureId">
						<a-select class="select-box" :disabled="showLock" v-model:value="formState.grainNatureId" :size="size"
							style="width: 100%" placeholder="请选择">
							<a-select-option v-for="item in natureList" :key="item.grainNatureId" :value="item.grainNatureId">{{
								item.enumname }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="储备规模计划量（吨）" name="reservePlanQuantity">
						<a-input class="title-box" autocomplete="off" :disabled="showLock"
							v-model:value="formState.reservePlanQuantity" />
					</a-form-item>
					<a-form-item label="计划文号">
						<a-input class="title-box" autocomplete="off" :disabled="showLock" v-model:value="formState.planNo" />
					</a-form-item>
					<a-form-item label="备注">
						<a-textarea class="title-box" :rows="4" placeholder="请输入" :maxlength="6" autocomplete="off"
							:disabled="showLock" v-model:value="formState.remark" />
					</a-form-item>
				</div>
				<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-form>
		</a-modal>
	</div>
</template>
<script setup>
import reserveQuantityApi from '@/api/reserve.info/reserveQuantityApi.js'
import { latLngValidator } from '@/utils/validator'
import { message } from 'ant-design-vue'
const props = defineProps({
	dataObj: {
		type: Object,
		default: () => { }
	}
})
const formState = ref({})
const rules = ref({
	unitInfoId: [{ required: true, message: '请选择企业单位', trigger: 'change' }],
	orgInfoId: [{ required: true, message: '情选择库区名称', trigger: 'change' }],
	grainVarietyId: [{ required: true, message: '请选择粮食品种', trigger: 'change' }],
	grainNatureId: [{ required: true, message: '请选择粮食性质', trigger: 'change' }],
	reservePlanQuantity: [{ required: true, message: '请输入数量', trigger: 'blur' },
	{ validator: latLngValidator, 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 enterpriseList = ref([])
const orgInfoList = ref([])
const varietyList = ref([])
const natureList = ref([])

//过滤筛选数据列表 
const orgId = ref('')
const monitoringCahnge = (val) => {
	enterpriseList.value.filter(item => {
		item.unitInfoId === val ? orgId.value = item.unitInfoId : ''
	})
	formState.value.orgInfoId = null
	orgInfoList.value = []
	monitorList(orgId.value)
}
// 库区名称
const monitorList = (val) => {
	reserveQuantityApi.getOrgInfoData({
		id: val
	}).then((res) => {
		orgInfoList.value = []
		res.forEach(item => {
			orgInfoList.value.push({
				orgInfoId: Number(item.orgId),
				orgName: item.orgName || ''
			})
		})
	})
}
// 企业名称
const getEnterpriseList = () => {
	reserveQuantityApi.getUnitInfoData().then((res) => {
		enterpriseList.value = []
		res.forEach(item => {
			enterpriseList.value.push({
				unitInfoId: item.id,
				dwmc: item.dwmc || ''
			})
		})
	})
}
// 粮食品种
const getLspzInfoList = () => {
	reserveQuantityApi.getLspzInfoData().then((res) => {
		varietyList.value = []
		res.forEach(item => {
			varietyList.value.push({
				grainVarietyId: Number(item.enumId),
				enumname: item.enumname || ''
			})
		})
	})
}
// 粮食性质
const getLsxzInfoList = () => {
	reserveQuantityApi.getLsxzInfoData({ parentId: '1032' }).then((res) => {
		natureList.value = []
		res.forEach(item => {
			natureList.value.push({
				grainNatureId: Number(item.enumId),
				enumname: item.enumname || ''
			})
		})
	})
}
// 取消按钮
const handleCancel = () => {
	colosData()
}
// 确定按钮
const handleOk = () => {
	formRef.value
		.validate()
		.then(() => {
			// 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 addData = () => {
	formRef.value
		.validate()
		.then(() => {
			let obj = {
				unitInfoId: formState.value.unitInfoId,
				orgInfoId: formState.value.orgInfoId,
				grainVarietyId: formState.value.grainVarietyId,
				grainNatureId: formState.value.grainNatureId,
				reservePlanQuantity: formState.value.reservePlanQuantity,
				status: 1,
				remark: formState.value.remark,
				planNo: formState.value.planNo,
			}
			reserveQuantityApi.reserveScaleAdd(obj).then((res) => {
				colosData()
				message.success('操作成功')
			})
		})
		.catch((error) => {
			message.warning('请填写完善')
			console.log('error', error)
		})
}
// 编辑
const editData = () => {
	formRef.value
		.validate()
		.then(() => {
			let obj = {
				id: props.dataObj.id,
				unitInfoId: formState.value.unitInfoId,
				orgInfoId: formState.value.orgInfoId,
				grainVarietyId: formState.value.grainVarietyId,
				grainNatureId: formState.value.grainNatureId,
				reservePlanQuantity: formState.value.reservePlanQuantity,
				status: 1,
				remark: formState.value.remark,
				planNo: formState.value.planNo,
			}
			reserveQuantityApi.reserveScaleEdit(obj).then((res) => {
				colosData()
				message.success('操作成功')
			})
		})
		.catch((error) => {
			message.warning('请填写完善')
			console.log('error', error)
		})
}
// 用于查看调用
const detailData = (id) => {
	reserveQuantityApi.reserveScaleDetail({ id: id }).then((res) => {
		monitorList(res.unitInfoId)
		formState.value = { ...res }
	})
}
// 取消按钮
const colosData = () => {
	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
		getEnterpriseList(), getLspzInfoList(), getLsxzInfoList()
		// isType字段用于查看接口
		if (newValue.isType == '2' || newValue.isType == '3') {
			detailData(newValue.id)
		} else {
			// 用于新增时清空表格数据
			formState.value = {}
		}
	},
	{ deep: 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%;
}

/deep/.ant-input-number-input {
	text-align: left !important;
}

.title-box {
	width: 100%;
}

.ant-picker {
	width: 92%;
}

.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;
}
</style>
