<template>
	<div class="system-menu-container">
		<el-dialog v-model="state.isShowDialog" width="569px" center>
			<template #header>
				<div style="font-size: large" v-drag="['.app-container .el-dialog', '.app-container .el-dialog__header']">{{ title }}</div>
			</template>
			<div>
				<el-upload :on-remove="(a: any) => handFileRemove(a)" class="upload-demo" drag :http-request="(event: any) => handUpload(event)" multiple>
					<svg
						t="1711095694315"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="5394"
						width="42"
						height="42"
					>
						<path
							d="M821.76 479.488c0 0-6.272-206.4-174.4-247.424S398.208 368.192 396.544 373.248C394.88 378.304 386.624 376 386.624 376c-13.44-12.736-72.704-41.984-134.976-4.48-62.208 37.504-39.68 108.736-39.68 108.736S119.744 472.768 72.448 615.168c-47.232 142.528 118.464 182.912 118.464 182.912l278.144 0 0-151.616-55.68 0L408.512 646.464 404.736 646.464l0-0.256c-3.2 0-5.76-2.56-5.76-5.824 0-1.92 1.024-3.584 2.56-4.672l113.984-119.872c1.6-1.792 3.84-3.008 6.464-3.008 2.688 0 5.056 1.344 6.656 3.328l113.152 118.912c0.192 0.128 0.384 0.32 0.576 0.512l1.088 1.152-0.384 0c0.576 1.024 0.96 1.92 0.96 3.136 0 3.584-2.88 6.528-6.528 6.528-0.128 0-0.128-0.128-0.256-0.128l0 0.256L575.936 646.528l0 151.616 252.48 0c0 0 120.384-30.144 131.008-154.432C970.176 519.424 821.76 479.488 821.76 479.488z"
							fill="#8F9EB2"
							p-id="5395"
						></path>
					</svg>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				</el-upload>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit" :loading="state.loading">上 传</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, unref, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import { uploadFile, getFileUrl, delFile } from '@/utils/util';

const props = defineProps({
	title: {
		type: String,
		default: () => '',
	},
	currentId: {
		type: Number,
		default: () => 0,
	},
});

const { proxy } = getCurrentInstance() as any;
const ruleFormRef = ref<HTMLElement | null>(null);
const state = reactive({
	// 是否显示弹出层
	isShowDialog: false,
	loading: false,
	uploadFileArr: [],
	// 表单参数对象
	ruleForm: {},
	// 类型数据配置参数
	methodOptions: [],
	// 表单校验
	ruleRules: {
		path: [{ required: true, message: 'API路径不能为空', trigger: 'blur' }],
		apiGroup: [{ required: true, message: 'API分组不能为空', trigger: 'blur' }],
		method: [{ required: true, message: 'API方法不能为空', trigger: 'blur' }],
	},
});

const handUpload = (e: any) => {
	state.uploadFileArr.push(e.file);
};

const handFileRemove = (a: any) => {
	// 删除的文件
	const fileObj = Reflect.get(a, 'raw');
	state.uploadFileArr = state.uploadFileArr.filter((item) => item.uid != fileObj.uid);
};

// 打开弹窗
const openDialog = (row: any) => {
	state.isShowDialog = true;
	state.loading = false;
};

// 关闭弹窗
const closeDialog = (row?: object) => {
	proxy.mittBus.emit('onEditApiModule', row);
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	state.isShowDialog = false;
};

// 保存
const onSubmit = () => {
	const uploadPromises = state.uploadFileArr.map((file) => {
		const type = file.type.split('/')[1];
		const name = new Date().getTime() + '.' + type;
		const params = {
			isPublic: 0,
			isCatalogue: 0,
			parentId: props.currentId,
		};
		return uploadFile(file, name, params);
	});
	Promise.all(uploadPromises).then((results) => {
		// 所有上传操作完成后的处理逻辑
		if (results.length == state.uploadFileArr.length) {
			ElMessage.success('上传成功');
			closeDialog(); // 关闭弹窗
		}
	});
};

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