<!--
 * @Author: Kane
 * @Date: 2023-11-10 17:48:01
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/data/bi/DepartmentRenewalRateView.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
            :data="tableData"
            style="width:100%;"
            border
            stripe
        >
            <el-table-column
                label="部门"
                align="center"
                width="250px"
            >
                <template #default="dept">
                    <span>{{ dept.row.责任部门 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="机构目标值"
                align="center"
            >
                <template #default="dept">
                    <span>{{ dept.row.机构目标值.toFixed(2) + "%" }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="到期数全月"
                align="center"
            >
                <template #default="dept">
                    <span>{{ dept.row.到期数全月 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="序时到期数占比"
                align="center"
            >
                <template #default="dept">
                    <span>{{ dept.row.序时到期数占比.toFixed(2) + "%" }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="个车续保率序时"
                align="center"
            >
                <template #default="dept">
                    <span>{{ dept.row.个车续保率序时.toFixed(2) + "%" }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="个车续保率全月"
                align="center"
            >
                <template #default="dept">
                    <span>{{ dept.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="4" />
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import { reactive, computed, onBeforeMount } from "vue";
import {
    type BIDepartmentRenewalRateRecord,
    type QueryBIDepartmentRenewalRateResponse,
    type QueryBIDepartmentRenewalRateDataHandler,
    queryDepartmentRenewalRateData
} from "@/utils/BIReport.js";
import { ElMessageBox, ElMessage } from "element-plus";
import DataUploadView from "@/views/data/DataUploadView.vue";

interface UI
{
    showUI: boolean;
    showUploadDialog: boolean;
    tablePageSize: number;
    tableCurrentPageIndex: number;
    BIDepartmentRenewalRateData: BIDepartmentRenewalRateRecord[];
}

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

        // on
        const onCurrentPageIndexChange = ( pageIndex: number ): void =>
        {
            ui.tableCurrentPageIndex = pageIndex;
        };

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

        // 计算变量
        const tableData = computed((): BIDepartmentRenewalRateRecord[] =>
        {
            const tableCount = ui.BIDepartmentRenewalRateData.length;
            const startIndex = ui.tablePageSize * ( ui.tableCurrentPageIndex - 1 ) < tableCount ? ui.tablePageSize * ( ui.tableCurrentPageIndex - 1 ) : ( tableCount - ui.tablePageSize );
            const endIndex = ui.tablePageSize * ui.tableCurrentPageIndex < tableCount ? ui.tablePageSize * ui.tableCurrentPageIndex : tableCount;

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

        // handler
        const handler: QueryBIDepartmentRenewalRateDataHandler = ( response: QueryBIDepartmentRenewalRateResponse, error: any ): void =>
        {
            if ( response.success )
            {
                ui.BIDepartmentRenewalRateData = 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 showUploadFileDialog = (): void =>
        {
            ui.showUploadDialog = true;
        };

        onBeforeMount((): void =>
        {
            refresh();
        });

        const refresh = (): void =>
        {
            queryDepartmentRenewalRateData( handler );
        };

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

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

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