<template>
	<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
		<el-row :gutter="24">
			<el-col :span="8" class="mb20">
				<el-form-item label="项目名称">
					<el-input :model-value="projectName || form.projectName" readonly placeholder="-" disabled />
				</el-form-item>
			</el-col>
			<el-col :span="8" class="mb20">
				<el-form-item label="需求部门">
					<el-input :model-value="deptName || form.deptName" readonly placeholder="-" disabled />
				</el-form-item>
			</el-col>
			<el-col :span="8" class="mb20">
				<el-form-item label="是否签订合同" prop="hasContract">
					<el-radio-group v-model="form.hasContract" :disabled="contractStatus === 'pending'">
						<el-radio label="0">否</el-radio>
						<el-radio label="1">是</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="8" class="mb20" v-if="form.hasContract === '1'">
				<el-form-item label="合同信息">
					<div v-if="contractLoading" class="contract-info-loading">
						<el-icon class="is-loading"><Loading /></el-icon>
						<span>正在查询合同...</span>
					</div>
					<div v-else-if="contractStatus === 'completed' && currentContract" class="contract-info-display">
						<div class="contract-item">
							<span class="label">合同名称：</span>
							<span class="value">{{ currentContract.contractName || currentContract.contractNo || '-' }}</span>
						</div>
						<div class="contract-item">
							<span class="label">合同金额：</span>
							<span class="value">{{ currentContract.money ? `${currentContract.money}元` : '-' }}</span>
						</div>
					</div>
					<el-alert v-else-if="contractStatus === 'none'" type="warning" :closable="false" show-icon>
						<template #title>
							<span>未找到关联合同，无法进行履约操作</span>
						</template>
					</el-alert>
					<el-alert v-else-if="contractStatus === 'pending'" type="error" :closable="false" show-icon>
						<template #title>
							<span>合同正在流程审批中，无法进行履约操作</span>
						</template>
					</el-alert>
				</el-form-item>
			</el-col>
			<el-col :span="8" class="mb20">
				<el-form-item label="是否分期验收" prop="isInstallment">
					<el-radio-group v-model="form.isInstallment" :disabled="contractStatus === 'pending'">
						<el-radio label="0">否</el-radio>
						<el-radio label="1">是</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="8" class="mb20" v-if="form.isInstallment === '1'">
				<el-form-item label="分期次数" prop="totalPhases">
					<el-input-number v-model="form.totalPhases" :min="1" :max="99" placeholder="请输入" style="width: 100%" :disabled="contractStatus === 'pending'" />
				</el-form-item>
			</el-col>
			<el-col :span="8" class="mb20">
				<el-form-item label="供应商名称" prop="supplierName">
					<el-input 
						v-model="form.supplierName" 
						:placeholder="form.hasContract === '1' ? '自动带出' : '请输入供应商名称'" 
						:readonly="form.hasContract === '1'"
						:disabled="contractStatus === 'pending'"
					/>
				</el-form-item>
			</el-col>
			<el-col :span="8" class="mb20">
				<el-form-item label="资产管理员" prop="assetAdminId">
					<el-select
						v-model="form.assetAdminId"
						placeholder="请输入姓名或工号搜索"
						filterable
						remote
						clearable
						reserve-keyword
						:remote-method="searchAssetAdmin"
						:loading="assetAdminLoading"
						style="width: 100%"
						:disabled="contractStatus === 'pending'"
						@change="onAssetAdminChange"
					>
						<el-option
							v-for="item in assetAdminOptions"
							:key="item.teacherNo"
							:label="(item.commonDeptName ? item.commonDeptName + ' - ' : '') + (item.realName || item.name) + ' (' + item.teacherNo + ')'"
							:value="item.teacherNo"
						>
							<span>{{ item.commonDeptName ? item.commonDeptName + ' - ' : '' }}{{ item.realName || item.name }}</span>
							<span style="color: #999; font-size: 12px; margin-left: 8px">{{ item.teacherNo }}</span>
						</el-option>
					</el-select>
					<div class="field-note">如入固定资产，必填</div>
				</el-form-item>
			</el-col>
			<el-col :span="8" class="mb20">
				<el-form-item label="采购人员" prop="purchaserId">
					<el-select
						v-model="form.purchaserId"
						placeholder="请输入姓名或工号搜索"
						filterable
						remote
						clearable
						reserve-keyword
						:remote-method="searchPurchaser"
						:loading="purchaserLoading"
						style="width: 100%"
						:disabled="contractStatus === 'pending'"
						@change="onPurchaserChange"
					>
						<el-option
							v-for="item in purchaserOptions"
							:key="item.teacherNo"
							:label="(item.commonDeptName ? item.commonDeptName + ' - ' : '') + (item.realName || item.name) + ' (' + item.teacherNo + ')'"
							:value="item.teacherNo"
						>
							<span>{{ item.commonDeptName ? item.commonDeptName + ' - ' : '' }}{{ item.realName || item.name }}</span>
							<span style="color: #999; font-size: 12px; margin-left: 8px">{{ item.teacherNo }}</span>
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :span="8" class="mb20" v-if="form.hasContract === '0'">
				<el-form-item label="成交金额" prop="transactionAmount" :required="form.hasContract === '0'">
					<el-input-number v-model="form.transactionAmount" :min="0" :precision="2" placeholder="请输入成交金额" style="width: 100%" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { Loading } from '@element-plus/icons-vue';
import { getContracts, searchTeachers } from '/@/api/purchase/purchasingrequisition';
import { useMessage } from '/@/hooks/message';

const CONTRACT_FLOW_STATUS = {
	RUNNING: '0',
	COMPLETED: '1',
	CANCELLED: '2',
};

const props = defineProps<{
	modelValue: Record<string, any>;
	projectName?: string;
	deptName?: string;
	purchaseId?: string | number;
	resetKey?: number;
}>();

const emit = defineEmits(['update:modelValue']);

const formRef = ref<FormInstance>();
const contractLoading = ref(false);
const currentContract = ref<any>(null);
const contractStatus = ref<'none' | 'pending' | 'completed' | ''>('');

const purchaserOptions = ref<any[]>([]);
const purchaserLoading = ref(false);

const assetAdminOptions = ref<any[]>([]);
const assetAdminLoading = ref(false);

const form = reactive({
	hasContract: '0',
	contractId: '',
	isInstallment: '0',
	totalPhases: 1,
	projectName: '',
	deptName: '',
	supplierName: '',
	purchaserId: '',
	purchaserName: '',
	assetAdminId: '',
	assetAdminName: '',
	transactionAmount: null as number | null,
	...props.modelValue,
});

const syncFormFromModel = (val: Record<string, any> | undefined) => {
	Object.assign(form, val || {});
	if (form.purchaserId && form.purchaserName) {
		purchaserOptions.value = [{ teacherNo: form.purchaserId, realName: form.purchaserName, name: form.purchaserName }];
	}
	if (form.assetAdminId && form.assetAdminName) {
		assetAdminOptions.value = [{ teacherNo: form.assetAdminId, realName: form.assetAdminName, name: form.assetAdminName }];
	}
};

const loadContractInfo = async () => {
	if (!props.purchaseId) {
		contractStatus.value = '';
		currentContract.value = null;
		return;
	}
	
	contractLoading.value = true;
	contractStatus.value = '';
	currentContract.value = null;
	
	try {
		const res = await getContracts({ id: props.purchaseId });
		const list = res?.data;
		
		if (Array.isArray(list) && list.length > 0) {
			const contract = list[0];
			currentContract.value = contract;
			form.contractId = contract.id;
			
			if (contract.flowStatus === CONTRACT_FLOW_STATUS.COMPLETED) {
				contractStatus.value = 'completed';
				form.supplierName = contract.supplierName || '';
			} else if (contract.flowStatus === CONTRACT_FLOW_STATUS.RUNNING) {
				contractStatus.value = 'pending';
				form.supplierName = '';
			} else {
				contractStatus.value = 'pending';
				form.supplierName = '';
			}
		} else {
			contractStatus.value = 'none';
			currentContract.value = null;
			form.contractId = '';
			form.supplierName = '';
		}
	} catch (e: any) {
		contractStatus.value = 'none';
		currentContract.value = null;
		form.contractId = '';
		form.supplierName = '';
	} finally {
		contractLoading.value = false;
	}
};

const searchPurchaser = async (query: string) => {
	if (!query) {
		purchaserOptions.value = [];
		return;
	}
	purchaserLoading.value = true;
	try {
		const res = await searchTeachers(query);
		purchaserOptions.value = res?.data || [];
	} catch (_) {
		purchaserOptions.value = [];
	} finally {
		purchaserLoading.value = false;
	}
};

const searchAssetAdmin = async (query: string) => {
	if (!query) {
		assetAdminOptions.value = [];
		return;
	}
	assetAdminLoading.value = true;
	try {
		const res = await searchTeachers(query);
		assetAdminOptions.value = res?.data || [];
	} catch (_) {
		assetAdminOptions.value = [];
	} finally {
		assetAdminLoading.value = false;
	}
};

const onPurchaserChange = (teacherNo: string) => {
	if (!teacherNo) {
		form.purchaserId = '';
		form.purchaserName = '';
		return;
	}
	const selected = purchaserOptions.value.find((item: any) => item.teacherNo === teacherNo);
	if (selected) {
		form.purchaserId = selected.teacherNo;
		form.purchaserName = selected.realName || selected.name;
	}
};

const onAssetAdminChange = (teacherNo: string) => {
	if (!teacherNo) {
		form.assetAdminId = '';
		form.assetAdminName = '';
		return;
	}
	const selected = assetAdminOptions.value.find((item: any) => item.teacherNo === teacherNo);
	if (selected) {
		form.assetAdminId = selected.teacherNo;
		form.assetAdminName = selected.realName || selected.name;
	}
};

watch(
	() => props.modelValue,
	(val) => {
		syncFormFromModel(val);
	},
	{ deep: true, immediate: true }
);

watch(
	() => props.resetKey,
	() => {
		syncFormFromModel(props.modelValue);
		contractStatus.value = '';
		currentContract.value = null;
	}
);

watch(form, () => emit('update:modelValue', { ...form }), { deep: true });

watch(
	() => form.hasContract,
	(val) => {
		if (val === '1') {
			loadContractInfo();
		} else {
			contractStatus.value = '';
			currentContract.value = null;
			form.contractId = '';
		}
		formRef.value?.validateField('transactionAmount');
	}
);

onMounted(() => {
	if (form.hasContract === '1') {
		loadContractInfo();
	}
});

const rules: FormRules = {
	hasContract: [{ required: true, message: '请选择是否签订合同', trigger: 'change' }],
	isInstallment: [{ required: true, message: '请选择是否分期验收', trigger: 'change' }],
	totalPhases: [{ required: true, message: '请输入分期次数', trigger: 'blur' }],
	transactionAmount: [
		{
			validator: (rule: any, value: any, callback: any) => {
				if (form.hasContract === '0' && (value === null || value === undefined || value === '')) {
					callback(new Error('未签订合同时，成交金额为必填'));
				} else {
					callback();
				}
			},
			trigger: 'blur',
		},
	],
};

const validate = async () => {
	if (form.hasContract === '1' && contractStatus.value === 'pending') {
		useMessage().error('合同正在流程审批中，无法进行履约操作');
		return false;
	}
	if (form.hasContract === '1' && contractStatus.value === 'none') {
		useMessage().error('未找到关联合同，无法进行履约操作');
		return false;
	}
	return formRef.value?.validate();
};

defineExpose({ validate, form });
</script>

<style scoped>
.mb20 {
	margin-bottom: 20px;
}
.field-note {
	font-size: 12px;
	color: #999;
	margin-top: 4px;
}
.contract-info-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #409eff;
}
.contract-info-display {
	background: #f5f7fa;
	border-radius: 4px;
	padding: 12px;
}
.contract-item {
	display: flex;
	align-items: center;
	line-height: 1.8;
}
.contract-item .label {
	color: #606266;
	min-width: 80px;
}
.contract-item .value {
	color: #303133;
	font-weight: 500;
}
</style>