<!--
 * @Author: Kane
 * @Date: 2023-10-17 14:53:17
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/data/bi/DepartmentAttachingRateView.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
            width="100%"
            stripe
            border
            :data="tableData"
        >
            <el-table-column
                label="部门"
                align="center"
            >
                <template #default="department">
                    <span>{{ department.row.departmentName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="车险保费(万)"
                align="center"
            >
                <template #default="department">
                    <span>{{ department.row.motoPremium.toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="非车险保费(万)"
                align="center"
            >
                <template #default="department">
                    <span>{{ department.row.nomotoPremium.toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="渗透率"
                align="center"
            >
                <template #default="department">
                    <span>{{ department.row.attachingRate.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="3" />
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import { reactive, computed, onBeforeMount } from "vue";
import {
    type BIDepartmentAttachingRateRecord,
    type QueryBIDepartmentAttachingRateResponse,
    type QueryBIDepartmentAttachingRateDataHandler,
    queryDepartmentAttachingRateData
} from "@/utils/BIReport.js";
import { ElMessage, ElMessageBox } from "element-plus";
import DataUploadView from "@/views/data/DataUploadView.vue";

interface UI
{
    showUI: boolean,
    showUploadDialog: boolean,
    tablePageSize: number,
    tableCurrentPageIndex: number,
    BIDepartmentAttachingRateData: BIDepartmentAttachingRateRecord[],
}

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

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

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

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

        const handler: QueryBIDepartmentAttachingRateDataHandler = ( response: QueryBIDepartmentAttachingRateResponse, error: any ): void =>
        {
            // 判断一下标志位
            if ( response.success )
            {
                // 请求成功
                ElMessage({
                    message: "更新成功",
                    type: "success",
                });

                ui.BIDepartmentAttachingRateData = response.records;
            }
            else
            {
                // 请求失败
                ElMessageBox.confirm(
                    response.message,
                    "请求机构渗透率数据失败",
                    {
                        confirmButtonText: "确定",
                        type: "warning",
                        center: true,
                    }
                )
                    .then((): void => {})
                    .catch((): void => {});

                if ( error !== null )
                {
                    console.log( "请求机构渗透率数据失败", error );
                }
            }
        };

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

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

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

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

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

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