<template>
	<xn-form-container
		:title="formData.id ? '编辑物资领用' : '增加物资领用'"
		:width="800"
		:visible="visible"
		:destroy-on-close="true"
		:body-style="{ 'padding-top': '0px' }"
		@close="onClose"
	>
		<div style="padding: 20px 0">
			<a-form ref="formRef" :label-col="{ style: { width: '110px' } }" :model="formData" :rules="formRules" layout="inline">
				<a-row :gutter="20" style="width: 100%">
					<a-col :span="12" class="col_bottom">
						<a-form-item label="领用时间" name="useTime">
							<a-date-picker v-model:value="formData.useTime" :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }" value-format="YYYY-MM-DD HH:mm:ss"  format="YYYY-MM-DD HH:mm:ss" />
						</a-form-item>
					</a-col>
					<a-col :span="12" class="col_bottom">
						<a-form-item label="物资编号" name="itemCode">
							<a-input v-model:value="formData.itemCode" placeholder="请输入物资编号"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="col_bottom">
						<a-form-item label="物资名称" name="itemName">
							<a-input v-model:value="formData.itemName" placeholder="请输入物资名称"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="col_bottom">
						<a-form-item label="物资类别" name="itemType">
							<a-select v-model:value="formData.itemType">
								<a-select-option v-for="item in typeList" :key="item.id" :value="item.id">{{item.configName}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="col_bottom">
						<a-form-item label="品牌" name="brand">
							<a-input v-model:value="formData.brand" placeholder="请输入品牌"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="col_bottom">
						<a-form-item label="型号规格" name="specification">
							<a-input v-model:value="formData.specification" placeholder="请输入型号规格"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="col_bottom">
						<a-form-item label="仓库位置" name="warehouseId">
							<a-select v-model:value="formData.warehouseId">
								<a-select-option v-for="item in wareList" :key="item.id" :value="item.id">{{item.configName}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="col_bottom">
						<a-form-item label="单位" name="unit">
							<a-input v-model:value="formData.unit" placeholder="请输入单位"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="col_bottom">
						<a-form-item label="领用数量" name="useQuantity">
							<a-input v-model:value="formData.useQuantity" type="number" placeholder="请输入领用数量"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="col_bottom">
						<a-form-item label="领用部门" name="useDepartmentId">
							<a-tree-select
								v-model:value="formData.useDepartmentId"
								style="width: 100%"
								:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
								placeholder="请选择领用部门"
								allow-clear
								tree-default-expand-all
								:tree-data="treeData"
								:field-names="{
									children: 'children',
									label: 'name',
									value: 'id'
								}"
								@change="onDepartment"
								selectable="false"
								tree-line
							/>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="col_bottom">
						<a-form-item label="领用人" name="userId">
							<a-select v-model:value="formData.userId">
								<a-select-option v-for="item in personList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="12" class="col_bottom">
						<a-form-item label="预计归还时间" name="expectReturnTime">
							<a-date-picker v-model:value="formData.expectReturnTime" :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }" value-format="YYYY-MM-DD HH:mm:ss"  format="YYYY-MM-DD HH:mm:ss" />
						</a-form-item>
					</a-col>
					<a-col :span="24" class="col_bottom">
						<a-form-item label="备注" name="remarks">
							<a-textarea v-model:value="formData.remarks" placeholder="请填写备注" :rows="4" />
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="wareForm">
	import dayjs from 'dayjs'
	import bizWareApi from "@/api/biz/bizWareApi"
	import bizDepartmentApi from "@/api/biz/bizDepartmentApi";
	import { required } from '@/utils/formRules'
	import { cloneDeep } from "lodash-es"

	// 抽屉状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const treeData = ref([])
	const submitLoading = ref(false)
	const typeList = ref([])
	const wareList = ref([])



	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
		}
		bizWareApi.getWareTypeList().then(res => {
			typeList.value = res
		})
		bizWareApi.getWareHouseList().then(res => {
			wareList.value = res
		})
		bizDepartmentApi.getDepartmentTree().then(res => {
			treeData.value = res
		})
	}

	const personList = ref([])
	const onDepartment = (value) => {
		let params = {
			departmentId: value
		}
		bizWareApi.getDepartmentPerson(params).then(res => {
			personList.value = res
		})
	}


	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		formData.value = {}
		visible.value = false
	}

	// 默认要校验的
	const formRules = {
		useTime: [required('请选择领用时间')],
		itemCode: [required('请输入物资编号')],
		itemName: [required('请输入物资名称')],
		itemType: [required('请选择物资类别')],
		brand: [required('请输入品牌')],
		specification: [required('请输入型号规格')],
		unit: [required('请输入单位')],
		warehouseId: [required('请选择仓库')],
		useQuantity: [required('请输入领用数量')],
		useDepartmentId: [required('请选择领用部门')],
		userId: [required('请选择领用人')],
		expectReturnTime: [required('请选择预计归还时间')]
	}

	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			const formDataParam = cloneDeep(formData.value)
			if (formDataParam.id) {
				bizWareApi.editWare(formDataParam).then(() => {
					onClose()
					emit('successful')
				}).finally(() => {
					submitLoading.value = false
				})
			} else {
				bizWareApi.addWare(formDataParam).then(() => {
					onClose()
					emit('successful')
				}).finally(() => {
					submitLoading.value = false
				})
			}
		})
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>

<style scoped>
	.col_bottom {
		margin-bottom: 10px;
	}
</style>
