<!--
 * @Author: Kane
 * @Date: 2023-10-17 23:31:19
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/data/bi/TelsalerRenewalRateView.vue
 * @Description:
 *
 * Copyright (c) ${2023} by Kane, All Rights Reserved.
-->
<template>
    <div class="wrapper">
        <el-row :gutter="10">
            <el-col :span="24">
                <el-button
                    type="warning"
                    icon="Upload"
                    @click="showUploadFileDialog"
                >
                    上传
                </el-button>
                <el-button
                    type="primary"
                    icon="refresh"
                    @click="refresh"
                >
                    刷新
                </el-button>
            </el-col>
        </el-row>
        <el-table
            border
            stripe
            style="width:100%;"
            :data="tableData"
        >
            <el-table-column
                label="部门"
                align="center"
            >
                <template #default="telsaler">
                    <span>{{ telsaler.row.责任部门 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="责任人"
                align="center"
            >
                <template #default="telsaler">
                    <span>{{ telsaler.row.责任人 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="到期数-全月"
                align="center"
            >
                <template #default="telsaler">
                    <span>{{ telsaler.row.到期数全月 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="个车续保率（序时）(%)"
                align="center"
            >
                <template #default="telsaler">
                    <span>{{ telsaler.row.个车续保率序时.toFixed(2) + "%" }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="个车续保率（全月）(%)"
                align="center"
            >
                <template #default="telsaler">
                    <span>{{ telsaler.row.个车续保率全月.toFixed(2) + "%" }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination_wrapper">
            <el-pagination
                v-model="ui.tableCurrentPageIndex"
                class="pull_left"
                size="small"
                background
                :page-size="ui.tablePageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="0"
                @current-change="onCurrentPageIndexChange"
                @size-change="onTablePageSizeChange"
            />
        </div>
        <div
            class="upload-dialog-wrapper"
        >
            <el-dialog
                v-model="ui.showUploadDialog"
                title="上传报表"
                width="600px"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :show-close="true"
            >
                <DataUploadView :report-type="2" />
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import { reactive, computed, onBeforeMount } from "vue";
import DataUploadView from "@/views/data/DataUploadView.vue";
import {
    type QueryBITelsalerRenewalRateDataHandler,
    type BITelsalerRenewalRateRecord,
    type QueryBITelsalerRenewalRateReportResponse,
    queryBITelsalerRenewalData
} from "@/utils/BIReport.js";
import { ElMessageBox, ElMessage } from "element-plus";

interface UI
{
    showUI: boolean,
    showUploadDialog: boolean,
    tableCurrentPageIndex: number,
    tablePageSize: number,
    BITelsalerRenewalRateData: BITelsalerRenewalRateRecord[],
}

export default {
    name: "TelsalerAttachingRateView",
    components: { DataUploadView, },
    setup()
    {
        const ui: UI = reactive({
            showUI: true,
            showUploadDialog: false,
            tableCurrentPageIndex: 1,
            tablePageSize: 10,
            BITelsalerRenewalRateData: [],
        });

        const showUploadFileDialog = (): void =>
        {
            ui.showUploadDialog = true;
        };

        const onCurrentPageIndexChange = ( index: number ): void =>
        {
            ui.tableCurrentPageIndex = index;
        };

        const onTablePageSizeChange = ( pageSize: number ): void =>
        {
            ui.tablePageSize = pageSize;
        };

        const tableData = computed((): BITelsalerRenewalRateRecord[] =>
        {
            const tableCount = ui.BITelsalerRenewalRateData.length;
            const startIndex = ui.tablePageSize * ( ui.tableCurrentPageIndex - 1 ) > tableCount ? tableCount - ui.tablePageSize : ui.tablePageSize * ( ui.tableCurrentPageIndex - 1 );
            const endIndex = ui.tablePageSize * ui.tableCurrentPageIndex;

            return ui.BITelsalerRenewalRateData.slice( startIndex, endIndex );
        });

        const tableCount = computed((): number =>
        {
            return ui.BITelsalerRenewalRateData.length;
        });

        // handler
        const queryBITelsalerRenewalRateDataHander: QueryBITelsalerRenewalRateDataHandler = ( response: QueryBITelsalerRenewalRateReportResponse, error: any ): void =>
        {
            // 判断调用成功标志位
            if ( response.success )
            {
                ui.BITelsalerRenewalRateData = response.records;

                ElMessage({
                    message: "更新成功",
                    type: "success",
                });
            }
            else
            {
                // 错误处理
                ElMessageBox.confirm(
                    response.message,
                    "请求BI坐席续保率数据错误",
                    {
                        confirmButtonText: "确定",
                        type: "warning",
                        center: true,
                    }
                )
                    .then((): void => {})
                    .catch((): void => {});

                if ( error !== null )
                {
                    console.log( error );
                }
            }
        };

        onBeforeMount((): void =>
        {
            queryBITelsalerRenewalData( queryBITelsalerRenewalRateDataHander );
        });

        const refresh = (): void =>
        {
            queryBITelsalerRenewalData( queryBITelsalerRenewalRateDataHander );
        };

        return {
            ui,
            showUploadFileDialog,
            onCurrentPageIndexChange,
            onTablePageSizeChange,
            // 计算变量
            tableData,
            tableCount,
            // 函数
            refresh,
        };
    },
};
</script>
<style lang="scss" scoped>
.wrapper {
    margin: 0px 10px 10px 10px;

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

.pagination_wrapper {
    display: flex;
    justify-content: flex-end;
}
</style>
