<template>
	<div>
		<el-dialog v-model="exportDialogVisible" v-loading="fullscreenLoading" title="导出" width="500" center align-center
			@close="close" draggable>
			<el-form class="formStyle" :rules="rules" ref="formRef" :model="exportObject">
				<el-form-item prop="timeValue">
					<el-date-picker v-model="exportObject.timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
						start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss"
						value-format="YYYY-MM-DD HH:mm:ss" id="export-time-picker"/>
				</el-form-item>
				<el-form-item prop="spiderType">
					<el-checkbox-group v-model="exportObject.spiderType" class="checkboxStyle">
						<el-checkbox label="DSN数据" value="dsn" id="dsn-checkbox"/>
						<el-checkbox label="ITU数据" value="itu" id="itu-checkbox"/>
						<el-checkbox label="ST数据" value="spaceTrack" id="st-checkbox"/>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="close">取消</el-button>
					<el-button type="primary" @click="handleExport">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { defineProps } from 'vue';
import axios from 'axios'
import { ElLoading, ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
	//表单字段的类型
	timeValue: string
	spiderType: Array<string>
}
const formRef = ref<FormInstance>()
const rules = ref<FormRules<RuleForm>>({
	timeValue: [
		{
			// type: 'date',
			required: true,
			message: '请选择时间段',
			trigger: 'change',
			validator: (rule, value, callback) => {
				// 检查是否为数组且长度为2
				if (!Array.isArray(value) || value.length !== 2) {
					callback(new Error('请选择完整的时间段'));
				} else {
					// 检查日期格式是否有效（可选）
					const isValid = value.every(date => /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(date));
					if (!isValid) {
						callback(new Error('时间段格式不正确'));
					} else {
						callback();
					}
				}
			}
		},
	],
	spiderType: [
		{
			type: 'array',
			required: true,
			message: '请至少选择一种数据类型',
			trigger: 'change',
		},
	]
})
//表单绑定的字段
const exportObject = ref({
	timeValue: [],
	spiderType: []
})
const fullscreenLoading = ref(false)
const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false
	}
})
const emit = defineEmits(['update:dialogVisible'])
const exportDialogVisible = ref(props.dialogVisible)

// 导出方法
// const handleExport = async () => {
// 	// saveToFile('666')
// 	if (!formRef.value) return
// 	await formRef.value.validate(async (valid, fields) => {
// 		console.log('开始校验');
// 		if (valid) {
// 			console.log('校验通过');
// 			const loading = ElLoading.service({
// 				lock: true,
// 				text: 'Loading',
// 				background: 'rgba(0, 0, 0, 0.7)',
// 			})
// 			try {
// 				const res = await axios.post(
// 					'/api/export/downloadFile',
// 					{ times: exportObject.value.timeValue, filters: exportObject.value.spiderType },
// 					{
// 						responseType: 'blob',
// 						headers: {
// 							'Token': localStorage.getItem('Admin-Token') || 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5MjA5NzM4fQ.6hVko0EQTuz7OYjXEafZYLpmkVEyiLhZ8aWHi0Pni_s', // 根据你的 token 存储方式调整
// 						},
// 					}
// 				)

// 				// 获取文件名
// 				// const disposition = res.headers['content-disposition']
// 				// let fileName = 'export.zip'
// 				// if (disposition) {
// 				// 	const match = disposition.match(/filename="?([^"]+)"?/)
// 				// 	if (match) fileName = decodeURIComponent(match[1])
// 				// }
// 				// const blob = new Blob([res.data], { type: 'application/zip' })
// 				// const url = window.URL.createObjectURL(blob)
// 				// const a = document.createElement('a')
// 				// a.href = url
// 				// a.download = fileName
// 				// document.body.appendChild(a)
// 				// a.click()
// 				// document.body.removeChild(a)
// 				// window.URL.revokeObjectURL(url)
// 				loading.close()

// 				// close()
// 				// ElMessage.success('导出成功');
// 			} catch (e) {
// 				console.error('导出失败', e)
// 				close()
// 				ElMessage.error('导出失败');
// 			}
// 		} else {
// 			console.log('校验不通过');
// 		}
// 	})


// }

// const handleExport = async () => {
// 	if (!formRef.value) return
// 	await formRef.value.validate(async (valid, fields) => {
// 		if (valid) {
// 			const loading = ElLoading.service({
// 				lock: true,
// 				text: '正在导出ZIP文件...',
// 				background: 'rgba(0, 0, 0, 0.7)',
// 			})
// 			try {
// 				const res = await axios.post(
// 					'/api/export/downloadFile',
// 					{ times: exportObject.value.timeValue, filters: exportObject.value.spiderType },
// 					{
// 						responseType: 'blob', // 关键：指定接收二进制数据
// 						headers: {
// 							'Token': localStorage.getItem('Admin-Token') || '',
// 						},
// 					}
// 				)

// 				// 调用保存方法，传入二进制数据和响应头
// 				saveZipFile(res.data, res.headers)
// 				loading.close()
// 				ElMessage.success('ZIP文件导出成功');
// 			} catch (e) {
// 				console.error('导出失败', e)
// 				loading.close()
// 				ElMessage.error('ZIP文件导出失败，请重试');
// 			}
// 		}
// 	})
// }
// const saveToFile = async (data:any)=> {
//    const options = {
//        suggestedName: "example.txt",
//        types: [
//            {
//                description: 'Text Files',
//                accept: { 'text/plain': ['.txt'] }
//            }
//        ]
//    };
//    try {
//        const fileHandle = await window.showSaveFilePicker(options); // 打开保存对话框
//        const writable = await fileHandle.createWritable(); // 创建可写流
//        await writable.write(data); // 写入数据
//        await writable.close(); // 关闭流
//        console.log("文件保存成功！");
//    } catch (error) {
//        console.error("保存失败：", error);
//    }
// }

const handleExport = async () => {
	if (!formRef.value) return;

	try {
		// 1. 先在用户点击时获取保存文件句柄（关键：在用户手势中执行）
		const fileHandle = await getSaveFileHandle();
		if (!fileHandle) {
			ElMessage.info('已取消保存');
			return;
		}

		// 2. 执行表单验证
		await formRef.value.validate(async (valid, fields) => {
			if (valid) {
				const loading = ElLoading.service({
					lock: true,
					text: '正在导出文件...',
					background: 'rgba(0, 0, 0, 0.7)',
				});

				try {
					// 3. 请求文件数据
					const res = await axios.post(
						'/api/export/downloadFile',
						{ times: exportObject.value.timeValue, filters: exportObject.value.spiderType },
						{
							responseType: 'blob',
							headers: {
								'Token': localStorage.getItem('Admin-Token') || '',
							},
						}
					);

					// 4. 使用之前获取的句柄保存文件
					await saveToSelectedLocation(res.data, fileHandle);
					loading.close();
					ElMessage.success('ZIP文件保存成功');
					close()
				} catch (e) {
					console.error('导出失败', e);
					loading.close();
					ElMessage.error('ZIP文件导出失败,请重试');
				}
			}
		});
	} catch (error) {
		console.error('操作失败', error);
		ElMessage.error('无法打开保存对话框，请使用浏览器默认下载');
	}
};

// 获取用户选择的保存位置
const getSaveFileHandle = async () => {
	// 检查浏览器是否支持
	if (!(window as any).showSaveFilePicker) {
		ElMessage.warning('您的浏览器不支持选择保存位置,请使用最新版Chrome或Edge浏览器');
		return null;
	}

	try {
		// 弹出保存对话框（必须在用户直接交互中调用）
		return await (window as any).showSaveFilePicker({
			suggestedName: 'export.zip',
			types: [{
				description: 'ZIP压缩文件',
				accept: { 'application/zip': ['.zip'] },
			}],
			excludeAcceptAllOption: true
		});
	} catch (error: any) {
		// 用户取消选择时也会触发错误，这里视为正常取消
		if (error.name !== 'AbortError') {
			console.error('获取保存位置失败', error);
		}
		return null;
	}
};

// 保存数据到用户选择的位置
const saveToSelectedLocation = async (blobData: any, fileHandle: any) => {
	if (!(blobData instanceof Blob) || blobData.size === 0) {
		throw new Error('无效的ZIP文件数据');
	}

	// 将blob转换为可写数据
	const arrayBuffer = await blobData.arrayBuffer();

	// 写入到用户选择的文件
	const writable = await fileHandle.createWritable();
	await writable.write(arrayBuffer);
	await writable.close();
};

// 关闭弹窗的方法
const close = () => {
	formRef.value?.clearValidate()
	exportDialogVisible.value = false
}
// 监听父组件传过来的值
watch(() => props.dialogVisible,
	(newVal) => {
		exportDialogVisible.value = newVal
	}
)
// 监听组件内的值并向父组件更新
watch(() => exportDialogVisible.value,
	(newVal) => {
		emit('update:dialogVisible', newVal)
	}
)



</script>

<style lang="scss" scoped>
.formStyle {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.checkboxStyle {
	display: flex;
	gap: 30px;
	/* 复选框之间的间距 */
}
</style>