<script setup>
import LightCard from "@/components/LightCard.vue";
import {Calendar, CollectionTag, EditPen, Link} from "@element-plus/icons-vue";
import {computed} from "vue"
import Weather from "@/components/Weather.vue";

const today = computed(() => {
    const date = new Date()
    return `${date.getFullYear()} 年 ${date.getMonth()} 月 ${date.getDay()} 日`
})
</script>

<template>
    <div style="display: flex;margin: 20px auto;gap: 20px;max-width: 900px">
        <div style="flex: 1">
            <light-card>
                <div class="edit-topic">
                    <div><el-icon><EditPen/></el-icon> 点击发表主题...</div>
                </div>
            </light-card>
        </div>
        <div style="width: 280px">
            <div style="position: sticky;top: 20px">
                <light-card>
                    <div style="font-weight: bold;">
                        <el-icon><CollectionTag/></el-icon>
                        论坛公告
                    </div>
                    <el-divider style="margin: 10px 0"/>
                    <div style="margin: 10px;font-size: 14px;color: grey">
                        为认真学习宣传贯彻党的二十大精神,深入贯彻习近平强军思想,
                        作为迎接办学70周年系列学术活动之一,国防科技大学将于2022年11月24日至26日在长沙举办“国防科技
                    </div>
                </light-card>
                <light-card style="margin-top: 10px">
                    <div style="font-weight: bold;">
                        <el-icon><Calendar /></el-icon>
                        天气信息
                    </div>
                    <el-divider style="margin: 10px 0"/>
                    <weather/>
                </light-card>
                <light-card style="margin-top: 10px">
                    <div style="display: flex;justify-content: space-between;color: grey;font-size: 14px">
                        <div>当前日期</div>
                        <div>{{today}}</div>
                    </div>
                    <div style="display: flex;justify-content: space-between;color: grey;font-size: 14px">
                        <div>当前IP地址</div>
                        <div><b>127.0.0.1</b></div>
                    </div>
                </light-card>
                <div style="margin-top: 10px;color: grey;font-size: 14px">
                    <el-icon><Link /></el-icon>
                    友情链接
                    <el-divider style="margin: 10px 0"/>
                </div>
                <div style="display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 10px;margin-top: 10px">
                    <div class="friend-link">
                        <el-image style="height: 100%" src="https://element-plus.org/images/js-design-banner.jpg"/>
                    </div>
                    <div class="friend-link">
                        <el-image style="height: 100%" src="https://element-plus.org/images/vform-banner.png"/>
                    </div>
                    <div class="friend-link">
                        <el-image style="height: 100%" src="https://element-plus.org/images/sponsors/jnpfsoft.jpg"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.friend-link {
    border-radius: 5px;
    overflow: hidden;
}

.edit-topic {
    background-color: #ececec;
    border-radius: 5px;
    height: 40px;
    color: grey;
    font-size: 14px;
    line-height: 40px;
    padding: 0 10px;
    margin: 10px;

    :hover {
        cursor: pointer;
    }
}
</style>
