<!-- 第一行统计数据（已废弃） -->
<template>
    <el-row :gutter="14">
        <el-col :lg="4" :sm="8" :xs="24">
            <div class="sa-wnk" @click="sa_admin.showMenuById('sys-user-list')">
                <img src="../../assets/icon/icon-user.png">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">总计用户</p>
                    <p class="sa-wnk-value">{{ sta.sys_user_count }}</p>
                </div>
            </div>
        </el-col>
        <el-col :lg="4" :sm="8" :xs="24">
            <div class="sa-wnk" @click="sa_admin.showMenuById('sys-user-list')">
                <img src="../../assets/icon/reg-d.png" style="transform: scale(0.9, 0.9);">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">今日注册</p>
                    <p class="sa-wnk-value">{{ sta.sys_user_today_count }}</p>
                </div>
            </div>
        </el-col>
        <el-col :lg="4" :sm="8" :xs="24">
            <div class="sa-wnk" @click="sa_admin.showMenuById('sys-login-log')">
                <img src="../../assets/icon/qiandao.png">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">总计登录</p>
                    <p class="sa-wnk-value">{{ sta.sys_login_log_count }}</p>
                </div>
            </div>
        </el-col>
        <el-col :lg="4" :sm="8" :xs="24">
            <div class="sa-wnk" @click="sa_admin.showMenuById('sys-login-log')">
                <img src="../../assets/icon/sys-gzh.png">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">今日登录</p>
                    <p class="sa-wnk-value">{{ sta.sys_login_log_today_count }}</p>
                </div>
            </div>
        </el-col>
        <el-col :lg="4" :sm="8" :xs="24">
            <div class="sa-wnk" @click="sa_admin.showMenuById('role-list')">
                <img src="../../assets/icon/icon-user.png">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">角色总计</p>
                    <p class="sa-wnk-value">{{ sta.sp_role_count }}</p>
                </div>
            </div>
        </el-col>
        <el-col :lg="4" :sm="8" :xs="24">
            <div class="sa-wnk" @click="sa_admin.showMenuById('admin-list')">
                <img src="../../assets/icon/gly.png">
                <div class="sa-wnk-tv">
                    <p class="sa-wnk-title">管理员总计</p>
                    <p class="sa-wnk-value">{{ sta.sp_admin_count }}</p>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script setup name="com-sta-data">

import {onMounted, reactive} from "vue";

const state = reactive({
    sta: {
        sys_user_count: 0,				// 用户数量 
        sys_user_today_count: 0,		// 今日注册数量 
        sys_login_log_count: 0,			// 登录次数 
        sys_login_log_today_count: 0,	// 今日登录次数 
        sp_role_count: 0,					// 角色数量
        sp_admin_count: 0,				// 管理员数量 
    },
})

// 数值跳动 
// 对象、属性、结束值、所用时间 
const slowMotion = function(obj, prop, endValue, time) {
    let timeNow = 0;
    const 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);
    }
};


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

</script>

<style scoped>
	/* 第一行 */
	.sa-wnk{background-color: #FFF; border: 1px #ddd solid; margin-bottom: 14px; min-height: 100px; 
		cursor: pointer; transition: all 0.3s; overflow: hidden;}
	.sa-wnk:hover{box-shadow: 0 0 20px #999;}
	.sa-wnk img{float: left; line-height: 100px; margin: 25px 0px 0 20px; width: 50px; height: 50px; vertical-align: middle;}
	.sa-wnk .sa-wnk-tv{float: left; margin-left: 10px; max-width: calc(100% - 100px);}
	.sa-wnk-title{margin-top: 25px; font-size: 16px;}
	.sa-wnk-value{margin-top: 4px; font-size: 24px; padding-bottom: 20px;}
</style>
