<!--
 * @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-col>
        </el-row>
        <el-table
            border
            stripe
            style="width:100%;"
        >
            <el-table-column
                type="selection"
                align="center"
            />
            <el-table-column
                label="部门"
                align="center"
                width="200"
            />
            <el-table-column
                label="名称"
                align="center"
                width="200"
            />
            <el-table-column
                label="车险保费（万）"
                align="center"
            />
            <el-table-column
                label="非车险保费（万）"
                align="center"
            />
            <el-table-column
                label="当月保费渗透率"
                align="center"
            />
            <el-table-column
                label="渗透率环比上月"
                align="center"
            />
        </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"
            >
                <BiDataUploadView />
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import { reactive } from "vue";
import BiDataUploadView from "@/views/data/bi/BiDataUploadView.vue";

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

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

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

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

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

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

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