<template>
	<el-dialog
		:title="isEdit ? '修改仓库' : '新增仓库'"
		v-model="isShowDialog"
		width="600px"
		:close-on-click-modal="false"
		@close="onCancel"
	>
		<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="仓库名称" prop="warehouseName">
						<el-input v-model="ruleForm.warehouseName" placeholder="请输入仓库名称" clearable />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="仓库编码" prop="warehouseCode">
						<el-input v-model="ruleForm.warehouseCode" placeholder="请输入仓库编码" clearable />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item label="仓库地址" prop="address">
						<el-input v-model="ruleForm.address" placeholder="请输入仓库地址" clearable />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="联系人" prop="contactPerson">
						<el-input v-model="ruleForm.contactPerson" placeholder="请输入联系人" clearable />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系电话" prop="contactPhone">
						<el-input v-model="ruleForm.contactPhone" placeholder="请输入联系电话" clearable />
					</el-form-item>
				</el-col>
			</el-row>
						<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item label="备注" prop="remark">
						<el-input v-model="ruleForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="submitLoading">{{ isEdit ? '修 改' : '添 加' }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
export default {
	name: 'editWarehouse',
};
</script>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { createWarehouse, updateWarehouse, getWarehouse } from '/@/api/assets/warehouse';

// 定义事件
const emit = defineEmits(['getWarehouseList']);

// 表单ref
const formRef = ref<FormInstance>();

// 弹窗状态
const isShowDialog = ref(false);
const isEdit = ref(false);
const submitLoading = ref(false);

// 表单数据
const ruleForm = reactive({
	id: '',
	warehouseName: '',
	warehouseCode: '',
	address: '',
	contactPerson: '',
	contactPhone: '',
	remark: '',
});

// 电话号码验证
const validatePhone = (rule: any, value: string, callback: any) => {
	if (value && value.trim()) {
		const phoneReg = /^1[3-9]\d{9}$/;
		const telReg = /^0\d{2,3}-?\d{7,8}$/;
		if (!phoneReg.test(value) && !telReg.test(value)) {
			callback(new Error('请输入正确的电话号码'));
		} else {
			callback();
		}
	} else {
		callback();
	}
};

// 表单验证规则
const rules = reactive<FormRules>({
	warehouseName: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
	warehouseCode: [{ required: true, message: '请输入仓库编码', trigger: 'blur' }],
	contactPhone: [{ validator: validatePhone, trigger: 'blur' }],
});

// 重置表单
const resetForm = () => {
	ruleForm.id = '';
	ruleForm.warehouseName = '';
	ruleForm.warehouseCode = '';
	ruleForm.address = '';
	ruleForm.contactPerson = '';
	ruleForm.contactPhone = '';
	ruleForm.remark = '';
};

// 打开弹窗
const openDialog = async (row?: any) => {
	resetForm();
	isEdit.value = !!row;
	
	if (row) {
		try {
			const res: any = await getWarehouse(row.id);
			const data = res.data;
			ruleForm.id = data.id || '';
			ruleForm.warehouseName = data.warehouseName || '';
			ruleForm.warehouseCode = data.warehouseCode || '';
			ruleForm.address = data.address || '';
			ruleForm.contactPerson = data.contactPerson || '';
			ruleForm.contactPhone = data.contactPhone || '';
			ruleForm.remark = data.remark || '';
		} catch (error) {
			console.error('获取仓库详情失败:', error);
		}
	}
	
	isShowDialog.value = true;
};

// 取消
const onCancel = () => {
	isShowDialog.value = false;
	formRef.value?.resetFields();
};

// 提交
const onSubmit = async () => {
	const form = formRef.value;
	if (!form) return;
	
	form.validate(async (valid: boolean) => {
		if (valid) {
			submitLoading.value = true;
			try {
				const data = {
					id: ruleForm.id || undefined,
					warehouseName: ruleForm.warehouseName,
					warehouseCode: ruleForm.warehouseCode,
					address: ruleForm.address,
					contactPerson: ruleForm.contactPerson,
					contactPhone: ruleForm.contactPhone,
					remark: ruleForm.remark,
				};
				
				if (isEdit.value) {
					await updateWarehouse(data);
					ElMessage.success('修改成功');
				} else {
					await createWarehouse(data);
					ElMessage.success('添加成功');
				}
				
				isShowDialog.value = false;
				emit('getWarehouseList');
			} catch (error) {
				console.error('提交失败:', error);
			} finally {
				submitLoading.value = false;
			}
		}
	});
};

// 暴露方法
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
</style>
