<!--
 * @Author: Kane
 * @Date: 2023-10-17 14:41:39
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/data/bi/TelsalerAttachingRateView.vue
 * @Description: BI坐席车非渗透率数据管理界面
 *
 * Copyright (c) ${2023} by Kane, All Rights Reserved.
-->
<template>
    <div class="wrapper">
        <el-row :gutter="10">
            <el-col :span="8">
                <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"
                width="300"
            >
                <template #default="telsaler">
                    <span>{{ telsaler.row.departmentName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="名称"
                align="center"
                width="200"
            >
                <template #default="telsaler">
                    <span>{{ telsaler.row.telsalerName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="车险保费"
                align="center"
            >
                <template #default="telsaler">
                    <span>{{ Math.trunc( telsaler.row.motoPremium * 10000) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="非车险保费"
                align="center"
            >
                <template #default="telsaler">
                    <span>{{ Math.trunc( telsaler.row.nomotoPremium * 10000) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="当月保费渗透率"
                align="center"
            >
                <template #default="telsaler">
                    <span>{{ telsaler.row.attachingRate.toFixed(2) + "%" }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="渗透率环比上月"
                align="center"
            >
                <template #default="telsaler">
                    <span>{{ telsaler.row.attachingRateChange.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="tableCount"
                @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="1" />
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import { reactive, onBeforeMount, computed } from "vue";
import {
    type BITelsalerAttachingRateRecord,
    type QueryBITelsalerAttachingRateReportResponse,
    type QueryBITelsalerAttachingRateDataHandler,
    queryBITelsalerAttachingRateData
} from "@/utils/BIReport.js";
import DataUploadView from "@/views/data/DataUploadView.vue";
import { ElMessageBox, ElMessage } from "element-plus";

interface UI
{
    showUI: boolean,
    showUploadDialog: boolean,
    tableCurrentPageIndex: number,
    tablePageSize: number,
    BITelsalerAttachingRateData: BITelsalerAttachingRateRecord[],
}

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

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

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

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

        /** 请求处理handler ********/
        const queryBITelsalerAttachingRateDataHandler: QueryBITelsalerAttachingRateDataHandler = ( response: QueryBITelsalerAttachingRateReportResponse, error: any ): void =>
        {
            // 判断调用成功标志位
            if ( response.success )
            {
                ui.BITelsalerAttachingRateData = 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 );
                }
            }
        };

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

        const tableData = computed((): BITelsalerAttachingRateRecord[] =>
        {
            const tableCount = ui.BITelsalerAttachingRateData.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.BITelsalerAttachingRateData.slice( startIndex, endIndex );
        });

        onBeforeMount((): void =>
        {
            queryBITelsalerAttachingRateData( queryBITelsalerAttachingRateDataHandler );
        });

        const refresh = (): void =>
        {
            console.log( import.meta.env.VITE_TEST );
            queryBITelsalerAttachingRateData( queryBITelsalerAttachingRateDataHandler );
        };

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

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

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