<template>
  <div class="user-news">
    <div class="user-news-header">
      <div>通知</div>
      <el-button type="text" @click="handleReadClick" v-if="newsList.length"
        >全部已读</el-button
      >
    </div>
    <div class="user-news-main">
      <template v-if="newsList.length">
        <div
          class="user-news-main-item"
          v-for="news in newsList"
          :key="news.value"
        >
          <div class="user-news-main-item-label">{{ news.label }}</div>
          <div class="user-news-main-item-value">{{ news.value }}</div>
          <div class="user-news-main-item-time">{{ news.time }}</div>
        </div>
      </template>
      <el-empty v-else description="暂无通知"></el-empty>
    </div>
    <div class="user-news-footer text-center" v-if="newsList.length">
      <el-button type="text">前往通知中心</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

const NEWS_LIST = [
  {
    label: "关于版本发布的通知",
    value:
      "vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，正式发布时间：2021年02月28日！",
    time: "2020-12-08",
  },
  {
    label: "关于学习交流的通知",
    value: "QQ群号码 665452019，欢迎小伙伴入群学习交流探讨！",
    time: "2020-12-08",
  },
];

export default defineComponent({
  name: "UserNews",

  setup() {
    const newsList = ref(NEWS_LIST);

    const handleReadClick = () => {
      newsList.value = [];
    };

    return {
      newsList,
      handleReadClick,
    };
  },
});
</script>

<style lang="scss" scoped>
.user-news {
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 32px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ebeef5;
  }

  &-main {
    &-item {
      line-height: 24px;
      color: #999;
      &-label {
        margin-top: 10px;
        color: #606266;
      }
      &-value {
        font-size: 13px;
      }
    }
  }
  &-footer {
    margin-top: 12px;
    padding-top: 5px;
    border-top: 1px solid #ebeef5;
  }
  .text-center {
    text-align: center;
  }
}
</style>
