<!-- 单元格数据预览 -->
<template>
    <el-row :gutter="0">
        <el-col :lg="12" :sm="12" :xs="24">
            <div class="sa-wnk" @click="appStore.showMenuById('console-plate')">
                <img src="../../assets/icon/reg-d.png" style="transform: scale(0.9, 0.9);" alt="img">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">今日注册</p>
                    <p class="sa-wnk-value">系统今日新增注册 <b>{{ state.sta.sys_user_today_count }}</b> 用户</p>
                </div>
                <p class="xq-btn"><i class="el-icon-arrow-right"></i></p>
            </div>
        </el-col>
        <el-col :lg="12" :sm="12" :xs="24">
            <div class="sa-wnk" @click="appStore.showMenuById('sys-user-list')">
                <img src="../../assets/icon/icon-user.png" alt="img">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">总计用户</p>
                    <p class="sa-wnk-value">系统总计已注册 <b>{{ state.sta.sys_user_count }}</b> 用户</p>
                </div>
                <p class="xq-btn"><i class="el-icon-arrow-right"></i></p>
            </div>
        </el-col>
        <el-col :lg="12" :sm="12" :xs="24">
            <div class="sa-wnk" @click="appStore.showMenuById('console-plate')">
                <img src="../../assets/icon/qiandao.png" alt="img">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">今日登录</p>
                    <p class="sa-wnk-value">用户今日累计登录 <b>{{ state.sta.sys_login_log_today_count }}</b> 次</p>
                </div>
                <p class="xq-btn"><i class="el-icon-arrow-right"></i></p>
            </div>
        </el-col>
        <el-col :lg="12" :sm="12" :xs="24">
            <div class="sa-wnk" @click="appStore.showMenuById('sys-login-log')">
                <img src="../../assets/icon/gly.png" alt="img">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">总计登录</p>
                    <p class="sa-wnk-value">用户总计已登录 <b>{{ state.sta.sys_login_log_count }}</b> 次</p>
                </div>
                <p class="xq-btn"><i class="el-icon-arrow-right"></i></p>
            </div>
        </el-col>
        <el-col :lg="12" :sm="12" :xs="24">
            <div class="sa-wnk" @click="appStore.showMenuById('sys-client-list')">
                <img src="../../assets/icon/sys-gzh.png" alt="img">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">应用总计</p>
                    <p class="sa-wnk-value">您已累计创建 <b>{{ state.sta.sys_client_count }}</b> 个应用</p>
                </div>
                <p class="xq-btn"><i class="el-icon-arrow-right"></i></p>
            </div>
        </el-col>
        <el-col :lg="12" :sm="12" :xs="24">
            <div class="sa-wnk" @click="appStore.showMenuById('apilog-list')">
                <img src="../../assets/icon/dyc.png" alt="img">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">接口总计</p>
                    <p class="sa-wnk-value">系统累计接受 <b>{{ state.sta.sp_apilog_count }}</b> 次请求</p>
                </div>
                <p class="xq-btn"><i class="el-icon-arrow-right"></i></p>
            </div>
        </el-col>
    </el-row>
</template>

<script setup name="com-sta-cell-pre">
import {onMounted, reactive} from "vue";
import {useAppStore} from "../../store/app";
const appStore = useAppStore();

// ------------------ 数据 ------------------
const state = reactive({
    sta: {  // 统计数据 
        sys_user_count: 0,				// 用户数量 
        sys_user_today_count: 0,		// 今日注册数量 
        sys_login_log_count: 0,			// 登录次数 
        sys_login_log_today_count: 0,	// 今日登录次数 
        sys_client_count: 0,			// 应用数量 
        sp_apilog_count: 0,				// 系统总数 
    }
});

onMounted(function (){
    // 刷新第一行数据
    sa.ajax('/StaData/getStaData', function(res){
        setStaDataValue(res.data);
    });
})

// ------------------ 函数 ------------------
// 数值跳动，参数：对象、属性、结束值、所用时间 
const slowMotion = function(obj, prop, endValue, time) {
    let timeNow = 0;
    let fn = function() {
        // 如果已经接近 or 时间已到，则立即结束 
        var jdz = Math.abs(obj[prop] - endValue);
        if(jdz < 2 || timeNow >= time) {
            // console.log('到点了');
            obj[prop] = endValue;
        } else {
            if(jdz < 100) {
                obj[prop] += 1;
            } else {
                obj[prop] += parseInt((endValue - obj[prop]) / 10);		 // 平均一下 
            }
            timeNow += 30;
            setTimeout(fn, 30);
        }
    }
    fn();
};
    
// 设置统计数据的数值 
const setStaDataValue = function(staData) {
    for (let key in staData) {
        slowMotion(state.sta, key, staData[key], 3000);
    }
};


</script>

<style scoped>
	/* 第一行 */
	.sa-wnk{background-color: #FFF; border: 0px #ddd solid; box-shadow: 0 0 1px #999; margin-bottom: 0px; height: 120px; }
	.sa-wnk{cursor: pointer; transition: all 0.3s; overflow: hidden; /* position: relative; */}
	.sa-wnk:hover{box-shadow: 0 0 5px #ccc; position: relative;}
	.sa-wnk img{float: left; line-height: 120px; margin: 35px 0px 0 30px; width: 45px; height: 45px; vertical-align: middle;}
	.sa-wnk .sa-wnk-tv{float: left; margin-left: 10px; max-width: calc(100% - 100px);}
	.sa-wnk-title{margin-top: 34px; font-size: 16px;}
	.sa-wnk-value{margin-top: 0px; color: #888;}
	.sa-wnk-value b{font-size: 24px; color: #333; font-weight: 400;}
	.xq-btn{position: absolute; top: 50px; right: 10px; color: #999; display: none;}
	.sa-wnk:hover .xq-btn{display: block;}
</style>
