<!-- 第一行：欢迎页-->
<template>
    <el-card shadow="never">
        <div class="sa-wnk">
            <img :src="sa.$sys.getCurrUser().avatar" alt="img">
            <div class="sa-wnk-tv">
                <p class="sa-wnk-title">
                    <span v-if="state.time < 3">深夜好 {{ state.name }}，早点休息吧，对自己要温柔呦！</span>
                    <span v-else-if="state.time < 6">凌晨好 {{ state.name }}，愿你眼里有光，心中有爱！</span>
                    <span v-else-if="state.time < 8">早上好 {{ state.name }}，道路还远，给生活一个微笑！</span>
                    <span v-else-if="state.time < 11">上午好 {{ state.name }}，又是元气满满的一天！</span>
                    <span v-else-if="state.time < 13">中午好 {{ state.name }}，满怀希望就会所向披靡！</span>
                    <span v-else-if="state.time < 17">下午好 {{ state.name }}，冲杯咖啡，犒劳一下自己吧！</span>
                    <span v-else-if="state.time < 19">傍晚好 {{ state.name }}，但因热爱，愿迎万难！</span>
                    <span v-else-if="state.time <= 24">晚上好 {{ state.name }}，知足且坚定 温柔且上进！</span>
                </p>
                <p class="sa-wnk-value">
                    我的账号角色：{{ sa.$sys.getCurrUser().roleName }} &nbsp;
                    |&nbsp; 
                    <span v-if="state.wenan !== null">{{ state.wenan }}</span>
                    <iframe v-else scrolling="no" style="vertical-align: middle; position: relative;top: 2px;" 
                            src="https://yiketianqi.com/api.php?style=tc&skin=pitaya&color=888888" frameborder="0" width="350" height="24" allowtransparency="true">
                    </iframe>
                </p>
            </div>
            <div class="fd-info-box">
                <p>最近登录IP：&nbsp;&nbsp;&nbsp;{{ sa.$sys.getCurrUser().loginIp }}</p>
                <p>最近登录时间：{{ sa.$sys.getCurrUser().loginTime }}</p>
            </div>
        </div>
    </el-card>
	
</template>

<script setup name="com-welcome">
import {onMounted, reactive} from "vue";

// ------------------ 数据 ------------------
const state = reactive({
    time: new Date().getHours(),    // 当前时间
    name: sa.$sys.getCurrUser().name, // 当前登录人 
    wenan: '',  // 当前显示的文案
    wenanList: [ // 文案列表 
        '万物需要阳光，生活需要方向，新的一天，用最美的姿态，遇见最好的自己。',
        '时间不一定能证明很多东西，但是一定能看透很多东西。坚信自己的选择，不动摇，使劲跑，明天会更好。',
        '你无需告诉每个人，那一个个艰难的日子是如何熬过来的，但总有一天你要向这个世界大声呐喊：我成功的走过了人生中灰暗的时光。',
        '生活从来不会刻意亏欠谁 它给你一块阴影 必会在不远处撒下阳光',
        '哪有什么天才！坚持做你喜欢的事情，这本身就是一种天赋。',
        '熬得住就出众，熬不住就出局，只有咬牙死犟，才能乘风破浪。我才不要弯道超车，我要甩的他们连尾灯都看不见。',
        '哪有什么天才！坚持做你喜欢的事情，这本身就是一种天赋。',
        '生活总是让我们遍体鳞伤，但到后来，那些受伤的地方，一定会变成我们最强壮的地方。',
        '如果生活抛给你一个柠檬，你可以把它榨成汁，然后再加点糖。快乐是自己给的！',
        '在所谓的人世间摸爬滚打至今，我唯一愿意视为真理的就只有这一句话：一切都会过去的。'
    ]
})

onMounted(function (){
    // 随机一个文案 (一半的几率显示天气)
    let index = sa.randomNum(0, (state.wenanList.length - 1) * 2);
    if(index <= state.wenanList.length - 1) {
        state.wenan = state.wenanList[index];
    } else {
        state.wenan = null;
    }
})

</script>

<style scoped>
	/* .welcome-box{min-height: 100px; background-color: #FFF; margin-bottom: 1em;} */
	/* 第一行 */
	.sa-wnk{transition: all 0.3s; overflow: hidden; border: 0px #aaa solid; padding: 5px 0; position: relative;}
	.sa-wnk img{float: left; margin: 5px 0px 0 5px; width: 65px; height: 65px; border-radius: 50%; vertical-align: middle;}
	.sa-wnk .sa-wnk-tv{float: left; margin-left: 20px; max-width: calc(100% - 120px);}
	.sa-wnk-title{margin-top: 10px; font-size: 20px; font-weight: 400; color: #223;}
	.sa-wnk-value{margin-top: 10px; color: #888;}
	.sa-wnk-value b{font-size: 24px; color: #333; font-weight: 400;}
	
	.fd-info-box{float: right; position: absolute; right: 0px; top: calc(50% - 26px); padding: 10px 14px; border-radius: 3px;}
	/* .fd-info-box{border: 1px #a3d3ff solid; background-color: #e8f4ff; color: #1890ff;} */
	.fd-info-box{border: 1px #a3d3ff solid; background-color: #ecf5ff; color: #1890ff; font-size: 12px;}
	
	@media (max-width: 1000px) {.fd-info-box{display: none!important}} 
</style>
