<template>
	<el-dialog v-model="visible" title="招标文件审批详情" width="90%" top="5vh" destroy-on-close append-to-body>
		<template #header>
			<div class="dialog-header">
				<span class="dialog-title">
					<el-icon><DocumentChecked /></el-icon>
					招标文件审批详情 - {{ applyData.purchaseNo || applyId }}
				</span>
			</div>
		</template>

		<el-row :gutter="24">
			<el-col :span="16">
				<el-card shadow="never" class="info-card">
					<template #header>
						<div class="card-header">
							<span class="card-title">采购申请信息</span>
						</div>
					</template>
					<el-descriptions :column="1" border size="small">
						<el-descriptions-item label="采购编号">{{ applyData.purchaseNo || '-' }}</el-descriptions-item>
						<el-descriptions-item label="项目名称">{{ applyData.projectName || '-' }}</el-descriptions-item>
						<el-descriptions-item label="采购金额">{{
							applyData.budget ? Number(applyData.budget).toLocaleString() + ' 元' : '-'
						}}</el-descriptions-item>
						<el-descriptions-item label="招标代理">{{ applyData.agentName || '-' }}</el-descriptions-item>
						<el-descriptions-item label="审批状态">
							<el-tag v-if="applyData.fileFlowStatus === '0'" type="primary">运行中</el-tag>
							<el-tag v-else-if="applyData.fileFlowStatus === '1'" type="success">完成</el-tag>
							<el-tag v-else-if="applyData.fileFlowStatus === '2'" type="danger">作废</el-tag>
							<el-tag v-else-if="applyData.fileFlowStatus === '3'" type="info">终止</el-tag>
							<el-tag v-else type="warning">未发起</el-tag>
						</el-descriptions-item>
					</el-descriptions>
				</el-card>

				<el-card shadow="never" class="file-card">
					<template #header>
						<div class="card-header">
							<span class="card-title">招标文件</span>
						</div>
					</template>
					<el-table :data="docList" border stripe size="small" v-if="docList.length > 0" max-height="300">
						<!--						<el-table-column type="index" label="序号" width="50" />-->
						<el-table-column prop="version" label="版本" width="60" align="center">
							<template #default="scope">
								<el-tag v-if="scope.row.isCurrent === '1'" type="success" size="small">{{ scope.row.version || '-' }}</el-tag>
								<span v-else>{{ scope.row.version || '-' }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="fileName" label="文件名称" show-overflow-tooltip />
						<el-table-column prop="uploadUserName" label="上传人" width="100" />
						<el-table-column prop="createTime" label="上传时间" width="150" />
						<el-table-column prop="comment" label="批注" width="150" show-overflow-tooltip />
						<el-table-column label="操作" width="120" align="center" fixed="right">
							<template #default="scope">
								<el-button type="primary" link size="small" icon="View" @click="handlePreview(scope.row)">预览</el-button>
								<el-button type="success" link size="small" icon="Download" @click="handleDownload(scope.row)">下载</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-empty v-else description="暂无招标文件" :image-size="60" />
				</el-card>
			</el-col>

			<el-col :span="8">
				<el-card shadow="never" class="flow-card">
					<template #header>
						<div class="card-header">
							<span class="card-title">审批流程</span>
						</div>
					</template>
					<template v-if="applyData.fileFlowInstId">
						<FlowCommentTimeline :key="String(applyData.fileFlowInstId) + 'doc'" :curr-job="fileFlowJob" />
					</template>
					<el-empty v-else description="暂未发起审批流程" :image-size="80" />
				</el-card>
			</el-col>
		</el-row>

		<template #footer>
			<el-button @click="visible = false">关闭</el-button>
		</template>

		<el-dialog v-model="previewVisible" :title="previewTitle" width="80%" top="5vh" destroy-on-close append-to-body>
			<div class="preview-container">
				<iframe v-if="previewUrl" :src="previewUrl" class="preview-iframe" />
			</div>
		</el-dialog>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { DocumentChecked } from '@element-plus/icons-vue';
import { useMessage } from '/@/hooks/message';
import { getObj, getDocList, previewFileById, downloadFileById } from '/@/api/purchase/purchasingrequisition';
import { getFlowPurchaseDetail } from '/@/api/purchase/bidfile';

const FlowCommentTimeline = defineAsyncComponent(() => import('/@/views/jsonflow/comment/timeline.vue'));

interface DocItem {
	id: string;
	fileName: string;
	fileUrl: string;
	createTime?: string;
	version?: string;
	isCurrent?: string;
	uploadUserName?: string;
	comment?: string;
}

const visible = ref(false);
const applyId = ref('');
const applyData = ref<any>({});
const docList = ref<DocItem[]>([]);
const previewVisible = ref(false);
const previewTitle = ref('');
const previewUrl = ref('');

const fileFlowJob = computed(() => {
	if (!applyData.value.fileFlowInstId) return null;
	return {
		id: applyData.value.id,
		flowInstId: applyData.value.fileFlowInstId,
	};
});

const open = async (id: string, row?: any) => {
	applyId.value = id || '';
	visible.value = true;
	docList.value = [];
	applyData.value = row || {};

	// 使用专门的招标文件审批详情接口获取数据，确保包含 agentName
	if (!row || !row.fileFlowInstId || !row.agentName) {
		try {
			const res = await getFlowPurchaseDetail(id);
			if (res?.code === 0 && res?.data) {
				// 合并数据，确保 agentName 等字段正确返回
				applyData.value = { ...applyData.value, ...res.data };
			}
		} catch (e) {
			console.error('获取采购申请详情失败', e);
			useMessage().error('获取采购申请详情失败');
			return;
		}
	}

	// 加载招标文件列表
	if (applyData.value.id) {
		try {
			const docsRes = await getDocList(applyData.value.id);
			const docs = docsRes?.data || [];
			if (Array.isArray(docs) && docs.length > 0) {
				docList.value = docs.map((d: any) => ({
					id: d.id || d.fileId,
					fileName: d.fileName || d.fileTitle || '招标文件',
					fileUrl: d.fileUrl,
					createTime: d.createTime,
					version: d.version,
					isCurrent: d.isCurrent,
					uploadUserName: d.uploadUserName,
					comment: d.comment,
				}));
			}
		} catch (e) {
			console.error('获取招标文件列表失败', e);
		}
	}
};

const handlePreview = async (row: DocItem) => {
	if (!row.id) {
		useMessage().warning('文件ID不存在');
		return;
	}
	try {
		const blob = await previewFileById(row.id);
		previewUrl.value = window.URL.createObjectURL(blob);
		previewTitle.value = row.fileName || '文件预览';
		previewVisible.value = true;
	} catch (e) {
		console.error('预览失败', e);
		useMessage().error('预览失败');
	}
};

const handleDownload = async (row: DocItem) => {
	if (!row.id) {
		useMessage().warning('文件ID不存在');
		return;
	}
	try {
		const blob = await downloadFileById(row.id);
		const url = window.URL.createObjectURL(blob);
		const link = document.createElement('a');
		link.href = url;
		link.download = row.fileName || '招标文件.pdf';
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
		window.URL.revokeObjectURL(url);
	} catch (e) {
		console.error('下载失败', e);
		useMessage().error('下载失败');
	}
};

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

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

<style scoped lang="scss">
.dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.dialog-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
}

.info-card,
.file-card,
.flow-card {
	margin-bottom: 16px;
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card-title {
	font-size: 14px;
	font-weight: 500;
}

.preview-container {
	width: 100%;
	height: 75vh;
}

.preview-iframe {
	width: 100%;
	height: 100%;
	border: none;
}

:deep(.el-card__header) {
	padding: 12px 16px;
}

:deep(.el-card__body) {
	padding: 12px 16px;
}
</style>
