<!--
 * @Author: Kane
 * @Date: 2023-10-17 10:56:43
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/data/DataUploadView.vue
 * @Description: 上传文件用的组件
 *
 * Copyright (c) ${2023} by Kane, All Rights Reserved.
-->
<template>
    <div class="bi-dataupload-wrapper">
        <div class="query-box-wrapper">
            <el-row :gutter="10">
                <el-col :span="4">
                    <span>报表类型</span>
                </el-col>
                <el-col :span="9">
                    <el-select v-model="ui.selectedReportType">
                        <el-option
                            v-for="item in ui.reportType"
                            :key="item.reportTypeCode"
                            :label="item.reportTypeName"
                            :value="item.reportTypeCode"
                            width="100%"
                        />
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <span>sheet编号</span>
                </el-col>
                <el-col :span="6">
                    <el-input v-model.lazy.number="ui.sheetIndex" />
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="4">
                    <span>起始行</span>
                </el-col>
                <el-col :span="9">
                    <el-input v-model.lazy.number="ui.firstRow" />
                </el-col>
                <el-col :span="11">
                    <span style="text-align:left;color:red;">*从0开始计数</span>
                </el-col>
            </el-row>
        </div>
        <el-upload
            drag
            :action="ui.urlFileUpload"
            name="files"
            :show-file-list="false"
            :data="ui.uploadParameters"
            :on-success="onUploadSuccess"
        >
            <el-icon class="el-icon--upload">
                <upload-filled />
            </el-icon>
            <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
            </div>
        </el-upload>
    </div>
</template>
<script lang="ts">
import { reactive, onBeforeMount } from "vue";
import {
    type BIReportType,
    type ImportBIReportRequest,
    type ImportBIReportResponse,
    type ImportBIReportResponseHandler,
    importBIReport
} from "@/utils/BIReport.js";
import { API_URL } from "@/utils/api/config.js";
import { type FileUploadResponse } from "@/utils/fileUpload.js";
// import { UploadFilled } from "@element-plus/icons-vue";
import { type UploadProps, type UploadFile, type UploadFiles, ElMessage, ElMessageBox } from "element-plus";

interface UI
{
    showUI: boolean,
    selectedReportType: number,
    reportType: BIReportType[],
    sheetIndex: number,
    firstRow: number,
    hasCaption: boolean,
    uploadParameters: any,
    showFileList: boolean,
    urlFileUpload: string,
}

export default {
    name: "BiDataUploadView",
    props: {
        reportType: {
            type: Number,
            require: true,
            default: (): number => 0,
        },
    },
    setup( props )
    {
        const ui: UI = reactive({
            showUI: false,
            selectedReportType: 0,
            reportType: [
                {
                    reportTypeCode: 1,
                    reportTypeName: "坐席车非渗透率",
                },
                {
                    reportTypeCode: 2,
                    reportTypeName: "坐席续保率",
                },
                {
                    reportTypeCode: 3,
                    reportTypeName: "部门车非渗透率",
                },
                {
                    reportTypeCode: 4,
                    reportTypeName: "当月个车续保率跟踪报表【机构】",
                },
                {
                    reportTypeCode: 10,
                    reportTypeName: "TWr坐席清单",
                },],
            sheetIndex: 0,
            firstRow: 1,
            hasCaption: true,
            uploadParameters: {
                "task-name": "1234",
            },
            showFileList: false,
            urlFileUpload: API_URL.URL_UPLOAD_FILE,
        });

        /**
         * 文件上传成功响应函数
         * @param response 响应结果参数
         * @param uploadFile 
         * @param uploadFiles 
         */
        const onUploadSuccess: UploadProps["onSuccess"] = ( response: FileUploadResponse, uploadFile: UploadFile, uploadFiles: UploadFiles ): void =>
        {
            //  先判断成功标志位
            if ( response.success )
            {
                // 成功，发出导入报表请求
                if ( response.fileList.length === 0 )
                {
                    // 上传文件路径有问题，提示一下
                    ElMessageBox.confirm(
                        "上传文件的保存路径有误，请联系开发人员。",
                        "上传文件错误",
                        {
                            confirmButtonText: "确定",
                            type: "warning",
                            center: true,
                        }
                    )
                        .then((): void => {})
                        .catch((): void => {});
                }

                const request: ImportBIReportRequest = {
                    filePath: response.fileList[0],
                    reportType: ui.selectedReportType,
                    firstRow: ui.firstRow,
                    sheetIndex: ui.sheetIndex,
                };

                console.log( "请求参数", request );

                // 发出请求
                importBIReport( request, importResponseHandler );
            }
            else
            {
                // 失败了，提示一下
                ElMessageBox.confirm(
                    response.message,
                    "上传文件错误",
                    {
                        confirmButtonText: "确定",
                        type: "warning",
                        center: true,
                    }
                )
                    .then((): void => {})
                    .catch((): void => {});
            }
        };

        /**
         * handler函数
         * @param response 
         * @param error 
         */
        const importResponseHandler: ImportBIReportResponseHandler = ( response: ImportBIReportResponse, error?: any ): void =>
        {
            if ( response.success )
            {
                ElMessage({
                    type: "success",
                    message: response.message,
                });
            }
            else
            {
                ElMessageBox.confirm(
                    response.message,
                    "导入错误",
                    {
                        confirmButtonText: "确定",
                        type: "warning",
                        center: true,
                    }
                )
                    .then((): void => {})
                    .catch((): void => {});
                console.log( error );
            }
        };

        onBeforeMount((): void =>
        {
            ui.selectedReportType = props.reportType;
        });

        return {
            ui,
            onUploadSuccess,
        };
    },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/public/_public.scss";

.bi-dataupload-wrapper {
    // max-width: 600px;
    width: 100%;
    >*+* {
        margin-top: 10px;
    }
}

.query-box-wrapper {
    @include query-box-wrap;
}
</style>
