<template>
	<div class="index">
		<el-dialog v-model="dialogTableVisible" title="批量导入" width="600" @closed="close">
			<div style="display: flex; flex-direction: column">
				<el-button @click="downloadTemplate" style="width: 120px">下载标准模版</el-button>
				<div v-if="errorMsg" class="error-message">{{ errorMsg }}</div>
			</div>
			<!-- :auto-upload="false"
				:on-change="handleFileChange" -->
			<el-upload
				ref="uploadRef"
				class="upload"
				drag
				:action="baseUrl + '/jnh/accounts/import'"
				accept=".xlsx,.xls"
				:headers="uploadHeader"
				:on-success="handleSuccess"
			>
				<div class="upload_text">点击或拖拽文件至此处导入</div>
				<div class="upload_tips">支持格式.xlsx/.xls，文件大小≤10MB</div>
			</el-upload>

			<template #footer>
				<div class="dialog-footer">
					<el-button @click="close">取消</el-button>
					<el-button type="primary" @click="submit()"> 确认 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, reactive, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getUploadUrl } from '/@/api/jnh';
import { Session } from '/@/utils/storage';

const baseUrl = ref(import.meta.env.VITE_API_UR);
const emit = defineEmits(['close']);
const rules = reactive({
	name: [{ required: true, message: '必须填写姓名', trigger: 'blur' }],
	mobile: [{ required: true, message: '必须填写手机号码', trigger: 'blur' }],
});

const form = ref({});
const dialogTableVisible = ref(false);
const uploadRef = ref(null);
const selectedFile = ref(null);

const uploadHeader = ref({
	'auth-token': `${Session.get('token')}`,
});

function open(data) {
	dialogTableVisible.value = true;
	if (data) {
		form.value = data;
	}
}

function close() {
	// 清除上传组件中的文件
	if (uploadRef.value) {
		uploadRef.value.clearFiles();
	}
	// 重置相关变量
	selectedFile.value = null;
	errorMsg.value = '';
	dialogTableVisible.value = false;
	emit('close');
}

// 处理文件选择
function handleFileChange(file, fileList) {
	selectedFile.value = file;
	// 清除之前的错误信息
	errorMsg.value = '';
}

// 确认上传
function submit() {
	// if (!selectedFile.value) {
	// 	errorMsg.value = '请选择要上传的文件';
	// 	return;
	// }
	close();
	// // 手动触发上传
	// if (uploadRef.value) {
	// 	uploadRef.value.submit();
	// }
}

function downloadTemplate() {
	window.open('https://cankao.obs.cn-east-3.myhuaweicloud.com/%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx');
}

const errorMsg = ref('');
function handleSuccess(res) {
	console.log('🚀 ~ handleSuccess ~ res:', res);
	if (res.code === 200) {
		ElMessage.success('导入成功');
		errorMsg.value = res.data;
		// 关闭对话框
		// dialogTableVisible.value = false;
		emit('close');
	} else {
		errorMsg.value = res.msg || '导入失败';
	}
}

// 页面加载时
onMounted(() => {
	NextLoading.done();
	baseUrl.value = import.meta.env.VITE_API_URL;
});

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

<style scoped lang="scss">
.upload {
	margin-top: 20px;
}

.upload_text {
	font-size: 14px;
	color: #303133;
}

.upload_tips {
	font-size: 12px;
	color: #606266;
	margin-top: 10px;
}

.error-message {
	color: red;
	margin-top: 10px;
	white-space: pre-line;
	font-size: 14px;
}
</style>
