<template>
	<div class="implement-page">
		<div class="implement-form">
			<!-- 步骤一：选择实施采购途径 -->
			<div class="step-section">
				<div class="step-header">
					<span class="step-number" :class="{ completed: step1Completed && !isEditingStep1 }">1</span>
					<span class="step-title">选择实施采购途径</span>
					<el-tag v-if="step1Completed && !isEditingStep1" type="success" size="small">已完成</el-tag>
				</div>
				<div class="step-content">
					<el-form-item label="实施采购途径" required>
						<el-select
							v-model="implementType"
							placeholder="请选择实施采购途径"
							clearable
							:disabled="step1Completed && !isEditingStep1"
							style="width: 300px"
						>
							<el-option v-for="item in IMPLEMENT_TYPE_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<!-- 步骤一未完成：显示保存按钮 -->
					<el-form-item v-if="!step1Completed">
						<el-button type="primary" :loading="saveTypeSubmitting" :disabled="!implementType" @click="handleSaveImplementType">保存</el-button>
					</el-form-item>
					<!-- 步骤一已完成但正在编辑：显示修改确认按钮 -->
					<el-form-item v-else-if="isEditingStep1">
						<el-button type="primary" :loading="saveTypeSubmitting" :disabled="!implementType" @click="handleReSaveImplementType">确认修改</el-button>
						<el-button @click="cancelEditStep1">取消</el-button>
					</el-form-item>
					<!-- 步骤一已完成且未在编辑：显示修改按钮 -->
					<el-form-item v-else>
						<el-button type="default" @click="startEditStep1">修改</el-button>
					</el-form-item>
				</div>
			</div>

			<!-- 步骤二：分配代理（仅委托代理采购且步骤一完成时显示） -->
			<div v-if="showStep2" class="step-section">
				<div class="step-header">
					<span class="step-number" :class="{ completed: step2Completed }">2</span>
					<span class="step-title">分配代理机构</span>
					<el-tag v-if="step2Completed" type="success" size="small">已完成</el-tag>
				</div>
				<div class="step-content">
					<el-form-item label="分配方式">
						<el-radio-group v-model="agentMode">
							<el-radio label="designated">指定代理</el-radio>
							<el-radio label="random">随机分配</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item v-if="agentMode === 'designated'" label="选择代理">
						<el-select v-model="selectedAgentId" placeholder="请选择招标代理" filterable style="width: 100%" :loading="agentListLoading">
							<el-option v-for="item in agentList" :key="item.id" :label="item.agentName" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item v-if="agentMode === 'random'" label="随机结果">
						<div class="agent-roller">
							<span v-if="rollingAgentName" class="rolling">{{ rollingAgentName }}</span>
							<span v-else-if="assignedAgentName" class="assigned">已分配：{{ assignedAgentName }}</span>
							<span v-else class="placeholder">点击下方按钮进行随机分配</span>
						</div>
					</el-form-item>
					<el-form-item v-if="applyRow?.agentName" label="当前代理">
						<el-tag>{{ applyRow.agentName }}</el-tag>
						<!-- 发送状态 -->
						<el-tag v-if="applyRow?.agentSent === YES_NO.YES" type="success" style="margin-left: 8px">已发送</el-tag>
						<el-tag v-else type="info" style="margin-left: 8px">未发送</el-tag>
					</el-form-item>
					<!-- 指定代理按钮：未发送招标代理时可操作 -->
					<el-form-item v-if="agentMode === 'designated' && canReassignAgent">
						<el-button type="primary" :loading="assignAgentSubmitting" :disabled="!selectedAgentId" @click="handleAssignAgentDesignated">{{
							step2Completed ? '重新指定' : '指定代理'
						}}</el-button>
					</el-form-item>
					<!-- 随机分配按钮：未发送招标代理时可操作 -->
					<el-form-item v-if="agentMode === 'random' && canReassignAgent">
						<el-button type="primary" :loading="assignAgentSubmitting" @click="handleAssignAgentRandom">随机分配</el-button>
					</el-form-item>
					<!-- 发送招标代理按钮 -->
					<el-form-item v-if="canSendToAgent">
						<el-button type="success" :loading="sendToAgentSubmitting" @click="handleSendToAgent">发送招标代理</el-button>
					</el-form-item>
					<!-- 撤回招标代理按钮 -->
					<!--					<el-form-item v-if="canRevokeAgent">-->
					<!--						<el-button type="warning" :loading="revokeAgentSubmitting" @click="handleRevokeAgent">撤回</el-button>-->
					<!--					</el-form-item>-->
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="PurchasingImplement">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { ElMessageBox } from 'element-plus';
import { getObj, assignAgent, sendToAgent, revokeAgent, saveImplementType } from '/@/api/purchase/purchasingrequisition';
import { getPage as getAgentPage } from '/@/api/purchase/purchaseagent';
import { useMessage } from '/@/hooks/message';
import { Session } from '/@/utils/storage';

// ==================== 常量定义（与后端枚举保持一致） ====================

/** 实施采购途径（与后端 ImplementTypeEnum 及 add.vue 一致） */
const IMPLEMENT_TYPE_OPTIONS = [
	{ value: '1', label: '自行组织采购' },
	{ value: '2', label: '委托代理采购' },
	{ value: '140', label: '框架协议' },
	{ value: '170', label: '网上商城' },
] as const;

/** 实施采购途径值 */
const IMPLEMENT_TYPE = {
	/** 自行组织采购 */
	SELF_ORGANIZED: '1',
	/** 委托代理采购 */
	ENTRUST_AGENT: '2',
	/** 框架协议 */
	FRAMEWORK_AGREEMENT: '140',
	/** 网上商城 */
	ONLINE_MALL: '170',
} as const;

/** 采购形式（与后端 PurchaseModeEnum 一致） */
const PURCHASE_MODE = {
	/** 部门自行采购 */
	DEPT_SELF: '1',
	/** 学校统一采购 */
	SCHOOL_UNIFIED: '2',
} as const;

/** 采购途径（与后端 PurchaseChannelEnum 一致） */
const PURCHASE_CHANNEL = {
	/** 自行采购 */
	SELF: '1',
	/** 委托采购中心采购 */
	ENTRUST_CENTER: '2',
} as const;

/** 是否标识（与后端 CommonConstants.YES/NO 一致） */
const YES_NO = {
	NO: '0',
	YES: '1',
} as const;

const emit = defineEmits<{
	(e: 'close'): void;
	(e: 'saved'): void;
}>();

/** 申请单 ID */
const applyId = ref<string | number | null>(null);

const applyRow = ref<any>(null);
const implementType = ref<string>(IMPLEMENT_TYPE.SELF_ORGANIZED);

/** 步骤控制 */
const step1Completed = ref(false);
const saveTypeSubmitting = ref(false);
const isEditingStep1 = ref(false);
const originalImplementType = ref<string>('');

/** 分配代理相关 */
const agentMode = ref<'designated' | 'random'>('designated');
const selectedAgentId = ref<string>('');
const agentList = ref<any[]>([]);
const agentListLoading = ref(false);
const assignAgentSubmitting = ref(false);
const rollingAgentName = ref<string>('');
const assignedAgentName = ref<string>('');
const sendToAgentSubmitting = ref(false);
const revokeAgentSubmitting = ref(false);
let rollInterval: ReturnType<typeof setInterval> | null = null;

/** 是否显示步骤二：委托代理采购 且 步骤一已完成 且 不在编辑步骤一 */
const showStep2 = computed(() => {
	return step1Completed.value && !isEditingStep1.value && implementType.value === IMPLEMENT_TYPE.ENTRUST_AGENT;
});

/** 步骤二是否完成：已分配代理 */
const step2Completed = computed(() => {
	return !!applyRow.value?.agentId;
});

/** 是否可以发送招标代理：委托代理采购 且 已分配代理 且 未发送 */
const canSendToAgent = computed(() => {
	if (implementType.value !== IMPLEMENT_TYPE.ENTRUST_AGENT) return false;
	const row = applyRow.value;
	if (!row) return false;
	return !!row.agentId && row.agentSent !== YES_NO.YES;
});

/** 是否可以重新分配代理：未发送招标代理时可操作 */
const canReassignAgent = computed(() => {
	const row = applyRow.value;
	if (!row) return false;
	return row.agentSent !== YES_NO.YES;
});

/** 是否可以撤回招标代理：已发送招标代理时可撤回 */
const canRevokeAgent = computed(() => {
	const row = applyRow.value;
	if (!row) return false;
	return !!row.agentId && row.agentSent === YES_NO.YES;
});

const loadAgentList = async () => {
	agentListLoading.value = true;
	try {
		const res = await getAgentPage({ size: 500, current: 1 });
		const records = res?.data?.records ?? res?.records ?? [];
		agentList.value = Array.isArray(records) ? records : [];
	} catch (_) {
		agentList.value = [];
	} finally {
		agentListLoading.value = false;
	}
};

/** 随机分配代理 - 滚动动画 */
const startRollingAnimation = (finalAgentName: string) => {
	if (agentList.value.length === 0) return;

	if (rollInterval) {
		clearInterval(rollInterval);
		rollInterval = null;
	}

	rollingAgentName.value = '';
	assignedAgentName.value = '';

	let currentIndex = 0;
	const totalDuration = 2000;
	const intervalTime = 80;

	rollInterval = setInterval(() => {
		rollingAgentName.value = agentList.value[currentIndex].agentName;
		currentIndex = (currentIndex + 1) % agentList.value.length;
	}, intervalTime);

	setTimeout(() => {
		if (rollInterval) {
			clearInterval(rollInterval);
			rollInterval = null;
		}
		rollingAgentName.value = '';
		assignedAgentName.value = finalAgentName;
	}, totalDuration);
};

const handleAssignAgentRandom = async () => {
	const id = applyRow.value?.id ?? applyId.value;
	if (!id) {
		useMessage().warning('无法获取申请单ID');
		return;
	}
	assignAgentSubmitting.value = true;
	try {
		const res = await assignAgent(id, 'random');
		const finalAgentName = res?.data?.agentName || res?.agentName || '';
		if (finalAgentName) {
			startRollingAnimation(finalAgentName);
		} else {
			useMessage().success('随机分配代理成功');
			await loadData();
		}
	} catch (e: any) {
		useMessage().error(e?.msg || '随机分配代理失败');
	} finally {
		assignAgentSubmitting.value = false;
	}
};

const handleAssignAgentDesignated = async () => {
	const id = applyRow.value?.id ?? applyId.value;
	if (!id) {
		useMessage().warning('无法获取申请单ID');
		return;
	}
	if (!selectedAgentId.value) {
		useMessage().warning('请选择招标代理');
		return;
	}
	assignAgentSubmitting.value = true;
	try {
		await assignAgent(id, 'designated', selectedAgentId.value);
		useMessage().success('指定代理成功');
		await loadData();
	} catch (e: any) {
		useMessage().error(e?.msg || '指定代理失败');
	} finally {
		assignAgentSubmitting.value = false;
	}
};

/** 发送招标代理 - 带确认弹窗 */
const handleSendToAgent = async () => {
	const id = applyRow.value?.id ?? applyId.value;
	if (!id) {
		useMessage().warning('无法获取申请单ID');
		return;
	}

	// 确认弹窗
	try {
		await ElMessageBox.confirm('是否确认发送至招标代理启动招标文件审核流程？', '确认发送', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		});
	} catch {
		// 用户取消
		return;
	}

	sendToAgentSubmitting.value = true;
	try {
		await sendToAgent(id);
		useMessage().success('已发送招标代理');
		await loadData();
	} catch (e: any) {
		useMessage().error(e?.msg || '发送招标代理失败');
	} finally {
		sendToAgentSubmitting.value = false;
	}
};

/** 撤回招标代理 */
const handleRevokeAgent = async () => {
	const id = applyRow.value?.id ?? applyId.value;
	if (!id) {
		useMessage().warning('无法获取申请单ID');
		return;
	}
	revokeAgentSubmitting.value = true;
	try {
		await revokeAgent(id);
		useMessage().success('已撤回招标代理');
		await loadData();
	} catch (e: any) {
		useMessage().error(e?.msg || '撤回招标代理失败');
	} finally {
		revokeAgentSubmitting.value = false;
	}
};

/** 步骤一：保存实施采购途径 */
const handleSaveImplementType = async () => {
	const id = applyRow.value?.id ?? applyId.value;

	if (!id) {
		useMessage().warning('无法获取申请单ID');
		return;
	}
	if (!implementType.value) {
		useMessage().warning('请选择实施采购途径');
		return;
	}
	saveTypeSubmitting.value = true;
	try {
		await saveImplementType(id, implementType.value);
		useMessage().success('保存成功');
		step1Completed.value = true;
		originalImplementType.value = implementType.value;
		emit('saved');
		// 如果是委托代理采购，加载代理列表
		if (implementType.value === IMPLEMENT_TYPE.ENTRUST_AGENT) {
			await loadAgentList();
		}
	} catch (e: any) {
		useMessage().error(e?.msg || '保存失败');
	} finally {
		saveTypeSubmitting.value = false;
	}
};

/** 开始编辑步骤一 */
const startEditStep1 = () => {
	originalImplementType.value = implementType.value;
	isEditingStep1.value = true;
};

/** 取消编辑步骤一 */
const cancelEditStep1 = () => {
	implementType.value = originalImplementType.value;
	isEditingStep1.value = false;
};

/** 重新保存实施采购途径（修改后确认） */
const handleReSaveImplementType = async () => {
	const id = applyRow.value?.id ?? applyId.value;
	if (!id) {
		useMessage().warning('无法获取申请单ID');
		return;
	}
	if (!implementType.value) {
		useMessage().warning('请选择实施采购途径');
		return;
	}
	saveTypeSubmitting.value = true;
	try {
		await saveImplementType(id, implementType.value);
		useMessage().success('修改成功');
		isEditingStep1.value = false;
		originalImplementType.value = implementType.value;
		emit('saved');
		// 如果从委托代理采购改为自行组织采购，清空代理相关状态
		if (implementType.value === IMPLEMENT_TYPE.SELF_ORGANIZED) {
			assignedAgentName.value = '';
			selectedAgentId.value = '';
		}
		// 如果改为委托代理采购，加载代理列表
		if (implementType.value === IMPLEMENT_TYPE.ENTRUST_AGENT) {
			await loadAgentList();
		}
	} catch (e: any) {
		useMessage().error(e?.msg || '修改失败');
	} finally {
		saveTypeSubmitting.value = false;
	}
};

const loadData = async () => {
	const id = applyId.value;
	if (!id) {
		useMessage().warning('缺少申请单ID');
		return;
	}
	try {
		const detailRes = await getObj(id);

		applyRow.value = detailRes?.data ? { ...detailRes.data, id: detailRes.data.id ?? id } : { id };

		const row = applyRow.value;
		if (row?.implementType) {
			implementType.value = row.implementType;
			originalImplementType.value = row.implementType;
			step1Completed.value = true;
		}

		// 加载代理列表并回显已分配代理（委托代理采购时）
		if (step1Completed.value && implementType.value === IMPLEMENT_TYPE.ENTRUST_AGENT) {
			const canLoadAgent =
				row.purchaseMode === PURCHASE_MODE.SCHOOL_UNIFIED ||
				(row.purchaseMode === PURCHASE_MODE.DEPT_SELF && row.purchaseChannel === PURCHASE_CHANNEL.ENTRUST_CENTER);
			if (canLoadAgent) {
				await loadAgentList();
				if (row?.agentId) {
					selectedAgentId.value = row.agentId;
					assignedAgentName.value = row.agentName || '';
				}
			}
		}
	} catch (_) {
		console.log(_);
	}
};

/** 打开弹窗 */
const open = async (row: { id: string | number }) => {
	applyId.value = row?.id ?? null;
	applyRow.value = null;
	implementType.value = IMPLEMENT_TYPE.SELF_ORGANIZED;
	step1Completed.value = false;
	isEditingStep1.value = false;
	agentMode.value = 'designated';
	selectedAgentId.value = '';
	agentList.value = [];
	assignedAgentName.value = '';
	rollingAgentName.value = '';

	await loadData();
};

/** 确定 */
const handleConfirm = async () => {
	const row = applyRow.value;
	if (!row?.id && !applyId.value) return;
	const id = row?.id ?? applyId.value;
	if (!id) return;

	// 步骤一未完成时，先保存步骤一
	if (!step1Completed.value) {
		if (!implementType.value) {
			useMessage().warning('请选择实施采购途径');
			return;
		}
		saveTypeSubmitting.value = true;
		try {
			await saveImplementType(id, implementType.value);
			step1Completed.value = true;
			emit('saved');
		} catch (e: any) {
			useMessage().error(e?.msg || '保存实施采购途径失败');
			return;
		} finally {
			saveTypeSubmitting.value = false;
		}
	}

	useMessage().success('实施采购已保存');
	emit('close');
};

onUnmounted(() => {
	if (rollInterval) {
		clearInterval(rollInterval);
		rollInterval = null;
	}
});

defineExpose({
	open,
	handleConfirm,
});
</script>

<style scoped lang="scss">
.implement-page {
	padding: 0;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
.implement-form {
	flex: 1;
	.mb-2 {
		margin-bottom: 8px;
	}
}

.step-section {
	margin-bottom: 24px;
	padding: 16px;
	background: var(--el-fill-color-lighter);
	border-radius: 8px;
}

.step-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.step-number {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--el-color-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;

	&.completed {
		background: var(--el-color-success);
	}
}

.step-title {
	font-weight: 500;
	font-size: 16px;
	color: var(--el-text-color-primary);
}

.step-content {
	padding-left: 40px;
}

.agent-roller {
	padding: 12px 16px;
	background: var(--el-fill-color-light);
	border-radius: 4px;
	min-height: 40px;
	display: flex;
	align-items: center;

	.rolling {
		font-size: 16px;
		font-weight: 500;
		color: var(--el-color-primary);
		animation: blink 0.1s infinite;
	}

	.assigned {
		font-size: 16px;
		font-weight: 600;
		color: var(--el-color-success);
	}

	.placeholder {
		color: var(--el-text-color-placeholder);
	}
}

@keyframes blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}
</style>
