<!-- 首页 -->
<template>
    <el-scrollbar class="vue-box" v-if="sa.isAuth('console-plate')">

        <!-- ------------ 第一栏 - 统计数据 ------------- -->
        <div class="s-row s-row-1">
            <com-welcome></com-welcome>
        </div>

        <!-- ------------ 第二栏 - 图表 ------------- -->
        <div class="s-row s-row-2">
            <el-row :gutter="14">
                <el-col :lg="12" :xs="24" class="bt-box bt-cell-box">
                    <el-card shadow="never" header="数据概览">
                        <com-sta-cell-pre></com-sta-cell-pre>
                    </el-card>
                </el-col>
                <el-col :lg="12" :xs="24" class="bt-box">
                    <el-card shadow="never" header="近七天登录统计">
                        <div style="padding: 1em; height: calc(100% - 2em);">
                            <com-chart-t1></com-chart-t1>
                        </div>
                    </el-card>
                </el-col>

                <el-col :lg="8" :xs="24">
                    <el-card shadow="never" header="登录应用统计">
                        <com-chart-t4></com-chart-t4>
                    </el-card>
                </el-col>
                <el-col :lg="8" :xs="24">
                    <el-card shadow="never" header="近一年登录统计">
                        <com-chart-t2></com-chart-t2>
                    </el-card>
                </el-col>
                <el-col :lg="8" :xs="24">
                    <el-card shadow="never" header="近七天注册统计">
                        <com-chart-t3></com-chart-t3>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </el-scrollbar>
    <!-- 无控制台权限时显示 -->
    <div v-else>
        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #000;">
            <div style="text-align: center;">
                <h1>欢迎进入 Sa-Sso-Pro 后台管理</h1>
                <div style="height: 100px;"></div>
            </div>
        </div>
    </div>
</template>

<script setup name="home">
import ComChartT1 from './com-chart-t1';
import ComChartT2 from './com-chart-t2';
import ComChartT3 from './com-chart-t3';
import ComChartT4 from './com-chart-t4';
import ComStaCellPre from './com-sta-cell-pre';
import ComWelcome from './com-welcome';

</script>

<style scoped lang="scss">
.vue-box{margin: 0; padding: 0; height: 100%;}
:deep(.el-card){border-radius: 0px; border: 1px #ddd solid ; margin-bottom: 14px;}

.s-row{padding: 0 14px; padding-bottom: 0px;}
.s-row-1{padding-top: 14px; }
.s-row-2 :deep(*){
    ///* margin-top: -10px; */
    .el-card .el-card__body{height: 250px;}
    .bt-box .el-card .el-card__body{height: 360px; padding: 0px;}
    /* .s-row-2 .bt-cell-box .el-card .el-card__body{} */
    /* .s-row-2 .bt-cell-box .el-card{overflow: visible;} */
    .bt-cell-box .el-card__header{position: relative; z-index: 10;}
}

.s-row-3 :deep(*){
    .el-card{/* height: 100%; */}
    .el-alert{margin-bottom: 14px;}
}

.echarts-div{height: 100%;}
</style>
