<template>
    <div class="page-header" style="height: 220px;">
        <div class="headerTitle">
            通知公告
            <div class="rightBtn">查看详情></div>
        </div>
        <div class="page-content" v-if="noticeList && noticeList.length > 0">
            <div class="itemInfo" v-for="item in noticeList" :key="item.id">
                <div>
                    <el-tag type="primary" v-if="showTag(item.createTime)">新</el-tag> 
                    
                    <span style="font-size: 15px;color: darkgrey;margin-left: 10px;">{{ moment(item.createTime).format('MM年DD月') }}</span>
                </div>
                <div class="itemText2" @click="goNoticeDetail(item.noticeId)">{{ item.noticeTitle }}</div>
            </div>
        </div>
        <el-empty v-else :image-size="50" />
    </div>
  </template>
  <script setup>
    import { onMounted, ref } from 'vue';
    import { getPageListData } from '@/api/main/system/system';
    import moment from 'moment';

    const noticeList = ref([])

    const showTag = (time) => {
        return moment(time).diff(moment(), 'days') < 7
    }

    const getNotices = () => {
        getPageListData('/system/notice', {
            pageNum: 1,
            pageSize: 2,
        }).then((res) => {
            if (res.data) {
                noticeList.value = res.data

            }
        })
    }

    const goNoticeDetail = (id) => {
        console.log(id)
    }

    onMounted(() => {
        getNotices()
    })
  </script>
  
  <style scoped lang="scss">
    .page-header {
        background-color: #ffffff;
        margin: 15px;
        padding: 15px;
        border-radius: 10px;
        margin-left: 0px;
        .headerTitle{
            font-size: 22px;
            line-height: 30px;
            margin-bottom: 15px;
            position: relative;
            .rightBtn{
                position: absolute;
                right: 15px;
                top: 0px;
                font-size: 16px;
            }
        }
        .page-content{
            .itemInfo{
                margin-bottom: 15px;
                .itemText2{
                    line-height: 22px;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                }
            }
        }

    }

  </style>