<template>
	<div class="product-export-dialog">
		<el-dialog title="导出数据报表" v-model="isShowDialog" width="450px" align-center>
			<div class="export-content">
				<div class="export-icon">
					<el-icon class="icon-download"><Download /></el-icon>
				</div>
				<p class="export-text">确定要导出数据数据报表吗？</p>
				<p class="export-tip">导出的文件将包含所有数据信息</p>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="isShowDialog = false">取消</el-button>
					<el-button type="primary" @click="handleExport" :loading="loading">
						<el-icon><Download /></el-icon>
						导出
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Download } from '@element-plus/icons-vue';
import { exportReport } from '/@/api/customerService/report';

const isShowDialog = ref(false);
const loading = ref(false);
const exportName = ref(''); // 用于存储产品名称筛选参数

// 打开对话框，支持传入筛选参数
const openDialog = (name?: string) => {
	isShowDialog.value = true;
	exportName.value = name || '';
};

// 处理导出
const handleExport = async () => {
	try {
		loading.value = true;

		// 构建请求参数
		const params: any = {};
		if (exportName.value) {
			params.name = exportName.value;
		}

		// 调用导出接口
		const response = await exportReport(params);

		console.log('导出响应:', response);

		// 根据API文档，成功响应是200状态码，返回JSON数据
		// 但实际后端可能直接返回文件流，所以需要处理两种情况

		if (response instanceof Blob) {
			// 情况1：后端直接返回文件流（你的实际情况）
			handleFileDownload(response, 'products_export.zip');
		} else if (response.data && response.data instanceof Blob) {
			// 情况2：文件流在data字段中
			handleFileDownload(response.data, 'products_export.zip');
		} else if (response.data && response.data.downloadUrl) {
			// 情况3：返回下载链接（符合API文档规范）
			window.open(response.data.downloadUrl, '_blank');
			ElMessage.success('导出任务已提交，请在新窗口下载文件');
		} else {
			// 情况4：返回任务ID或其他信息
			ElMessage.success('导出任务已提交，请稍后查看下载列表');
		}

		isShowDialog.value = false;
	} catch (error: any) {
		console.error('导出失败：', error);
		// 错误已由请求拦截器统一处理
	} finally {
		loading.value = false;
	}
};

// 处理文件下载
const handleFileDownload = (blob: Blob, filename: string) => {
	const url = window.URL.createObjectURL(blob);
	const link = document.createElement('a');
	link.href = url;

	// 如果有筛选条件，在文件名中体现
	if (exportName.value) {
		filename = `products_${exportName.value}_${new Date().getTime()}.zip`;
	} else {
		filename = `products_${new Date().getTime()}.zip`;
	}

	link.download = filename;
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
	window.URL.revokeObjectURL(url);

	ElMessage.success('导出成功！文件已开始下载');
};

// 暴露方法给父组件使用
defineExpose({
	openDialog,
});
</script>

<style lang="scss" scoped>
.export-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 0;

	.export-icon {
		margin-bottom: 16px;
		.icon-download {
			font-size: 48px;
			color: #409eff;
		}
	}

	.export-text {
		margin: 0 0 12px 0;
		font-size: 16px;
		font-weight: 500;
		color: #303133;
	}

	.export-tip {
		margin: 0;
		font-size: 13px;
		color: #909399;
	}
}

.dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
</style>
