<template>
    <div class="home-page">
        <div class="background-box">
            <div class="left-content">
                <div class="message-box swing_skew_1">
                    <el-carousel height="32px" direction="vertical" indicator-position="none" autoplay>
                        <el-carousel-item v-for="(item, index) in messages" :key="'message-' + index">
                            <p class="text-row-1" style="line-height: 32px;" :class="{'is-link': item.link}" @click="() => {item.link && router.push(item.link)}">【{{ item.type }}】 {{ item.content }}</p>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="header-box swing_skew_1">
                    <div class="header-item">
                        <span class="main-color f20" style="font-weight: 600;">{{ userInfo.name }}</span>
                        <span class="text2-color f14">{{ userInfo.permissions }}</span>
                    </div>
                    <div class="header-item">
                        <el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;">
                            <Calendar />
                        </el-icon>
                        <div>
                            <p class="text1-color f14">待办任务</p>
                            <p class="main-color f20">{{ total }}</p>
                        </div>
                    </div>
                </div>
                <div class="echart-box">
                    <div class="echart-item swing_skew_2">
                        <NumberChart />
                    </div>
                    <div class="echart-item swing_skew_2">
                        <NumberPieChart />
                    </div>
                    <div class="echart-item swing_skew_1">
                        <TimeChart />
                    </div>
                    <div class="echart-item swing_skew_1">
                        <TimeBarChart />
                    </div>
                </div>
            </div>
            <div class="right-content">
                <div class="week-calendar">
                    <WeekCalendar />
                </div>
                <div class="system-logs move_2">
                    <div class="title">
                        <span>系统日志</span>
                        <span class="f14" style="cursor: pointer;" @click="router.push('./logs-manage/logs-manage')">更多</span>
                    </div>
                    <div class="content move_2">
                        <SystemLogs />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useLoginStore } from '@/stores/user-info-store'
import NumberChart from "./number-chart.vue";
import NumberPieChart from "./number-pie-chart.vue";
import TimeChart from "./time-chart.vue";
import TimeBarChart from "./time-bar-chart.vue";
import WeekCalendar from "./week-calendar.vue";
import SystemLogs from "@/components/system-logs.vue";

const router = useRouter()
const userInfo = useLoginStore().getlogin()

const messages = ref([] as any)
const total = ref(0) // 日历添加的记录提醒统计

messages.value.push({type: '通知', content: '测试测试测试测试测试测试测试测试测试测试', link: '/system-manage/system-home'})
messages.value.push({type: '公告', content: '公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试'})
</script>

<style lang='scss' scoped>
.home-page {
    width: 100%;
    height: 100%;
    padding: 15px;

    .background-box {
        width: 100%;
        height: 100%;
        background: white;
        padding: 20px 35px;
        display: flex;
        justify-content: space-between;
    }

    .left-content {
        width: calc(100% - 350px);
        height: 100%;
        .message-box {
            height: 34px;
            background: #f8f8f8;
            color: $text-color;
            padding: 0 30px;
            border: 1px solid $border1-color;
            margin-bottom: 20px;
            .is-link {
                cursor: pointer;
                color: $main-color;
            }
        }
        .header-box {
            width: 100%;
            height: 90px;
            display: flex;
            justify-content: space-between;

            .header-item {
                width: calc(60% - 20px);
                height: 100%;
                border: 1px solid $border-color;
                border-radius: 5px;
                box-shadow: 1px 1px 5px $border2-color;
                padding: 0 90px;
                line-height: 1.5;
                display: flex;
                flex-direction: column;
                justify-content: center;

                &~.header-item {
                    width: 40%;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                }
            }
        }

        .echart-box {
            width: 100%;
            height: calc(100% - 164px);
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .echart-item {
                width: calc(60% - 20px);
                height: calc(50% - 10px);
                border: 1px solid $border-color;
                border-radius: 5px;
                padding: 20px;
                box-shadow: 1px 1px 5px $border2-color;
                
                &:nth-child(even) {
                    width: 40%;
                }
                &:nth-child(n + 3) {
                    margin-top: 20px;
                }
            }
        }
    }

    .right-content {
        width: 330px;
        height: 100%;
        .week-calendar {
            width: 100%;
            height: 50%;
        }
        .system-logs {
            width: 100%;
            height: calc(50% - 20px);
            margin-top: 20px;
            overflow: hidden;

            .title {
                width: 100%;
                height: 40px;
                padding: 0 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .content {
                width: 100%;
                height: calc(100% - 50px);
                margin-top: 10px;
                border: 1px solid $border-color;
                padding: 30px;
                overflow-x: hidden;
                overflow-y: auto;
            }
        }
    }
}</style>
