<!--
 * @Author: Kane
 * @Date: 2023-09-25 09:48:25
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/data/DataManagement.vue
 * @Description: 数据管理view
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div class="data_management_wrapper">
        <div class="telsaler-dataupload-wrapper">
            <el-upload
                v-model="ui.fileList"
                drag
                action="http://localhost:8080/desktop_archievement_backend/file/file-upload.do"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleUploadSuccess"
                :before-remove="beforeRemove"
                :limit="1"
                :on-exceed="handleExceed"
                :data="ui.uploadData"
                name="files"
            >
                <el-button type="primary">
                    上传
                </el-button>
                <template #tip>
                    <div class="el-upload__tip">
                        文件不能大于100MB。
                    </div>
                </template>
            </el-upload>
        </div>
    </div>
</template>
<script lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox, type UploadFile, type UploadFiles, type UploadProps, type UploadUserFile } from "element-plus";

export default {
    name: "DataManagement",
    setup()
    {
        const ui = reactive({
            showUI: false,
            fileList: ref<UploadUserFile[]>([]),
            uploadData: {
                "task-name": "1234",
            },
        });

        const handleRemove: UploadProps["onRemove"] = ( file, uploadFile ) =>
        {
            console.log( file, uploadFile );
        };

        const handlePreview: UploadProps["onPreview"] = ( uploadFile ) =>
        {
            console.log( uploadFile );
        };

        const handleExceed: UploadProps["onExceed"] = ( files, uploadFiles ) =>
        {
            ElMessage.warning( "一次只能上传三个文件！" );
        };

        const beforeRemove: UploadProps["beforeRemove"] = async ( uploadFile, uploadFiles ) =>
        {
            return await ElMessageBox.confirm(
                `放弃上传${uploadFile.name}`
            )
                .then(() => true, () => false );
        };

        const handleUploadSuccess = ( response: any, uploadFile: UploadFile, uploadFiles: UploadFiles ): void =>
        {
            console.log( response );
        };

        return {
            ui,
            handleRemove,
            handlePreview,
            handleExceed,
            beforeRemove,
            handleUploadSuccess,
        };
    },
};
</script>
<style lang="scss">
.data_management_wrapper {
    margin: 10px;

    min-width: 800px;

    >*+* {
        margin-top: 10px;
    }
}
</style>
