<!--
 * @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">
        <el-tabs>
            <el-tab-pane label="坐席车非渗透率">
                <TelsalerAttachingRateView />
            </el-tab-pane>
            <el-tab-pane label="坐席续保率">
                <TelsalerRenewalRateView />
            </el-tab-pane>
            <el-tab-pane label="机构渗透率">
                <DepartmentAttachingRateView />
            </el-tab-pane>
            <el-tab-pane label="机构续保率">
                <DepartmentRenewalRateView />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox, type UploadFile, type UploadFiles, type UploadProps, type UploadUserFile } from "element-plus";
import TelsalerAttachingRateView from "@/views/data/bi/TelsalerAttachingRateView.vue";
import TelsalerRenewalRateView from "@/views/data/bi/TelsalerRenewalRateView.vue";
import DepartmentRenewalRateView from "@/views/data/bi/DepartmentRenewalRateView.vue";
import DepartmentAttachingRateView from "@/views/data/bi/DepartmentAttachingRateView.vue";

export default {
    name: "DataManagement",
    components: { TelsalerAttachingRateView, TelsalerRenewalRateView, DepartmentRenewalRateView, DepartmentAttachingRateView, },
    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>
