<template>
  <div v-loading="state.loading" class="layout-navbars-breadcrumb-user-news">
    <div class="head-box">
      <div class="head-box-title">通知公告</div>
      <div class="head-box-btn" @click="readAll">全部已读</div>
    </div>
    <div v-loading="state.loading" class="content-box">
      <template v-if="newsList.length > 0">
        <div v-for="(v, k) in newsList" :key="k" class="content-box-item" @click="onNewsClick(k)">
          <div class="item-conten">
            <div class="content-box-title">
              <div class="content-box-type-and-notification">
                <span class="content-box-type">{{ v.type }}</span>
                <span class="content-box-title-right">更新提醒</span>
              </div>
              <!-- 已读/未读 -->
              <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">已读</span>
              <span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
            </div>
            <div class="content-box-msg">{{ v.message }}</div>
          </div>
        </div>
      </template>
      <el-empty v-else :description="'消息为空'"></el-empty>
    </div>
  </div>
</template>

<script setup name="layoutBreadcrumbUserNews">
import { storeToRefs, setActivePinia } from 'pinia';
import { createPinia } from 'pinia';
import useNoticeStore from '@/store/modules/notice';

const pinia = createPinia();
setActivePinia(pinia);
const mockNotices = [
  { id: 1, type: '系统消息', message: '系统将于12月11日02时进行更新维护，给大家带来不便，敬请谅解！', read: false },
  { id: 2, type: '系统消息', message: '系统将于12月10日02时进行更新维护，给大家带来不便，敬请谅解！', read: false },
];

const noticeStore = storeToRefs(useNoticeStore());
const { readAll } = useNoticeStore();

// 定义变量内容
const state = reactive({
  loading: false
});
const newsList = ref(mockNotices);

/**
 * 初始化数据
 * @returns
 */
// const getTableData = async () => {
//   state.loading = true;
//   newsList.value = noticeStore.state.value.notices;
//   state.loading = false;
// };

//点击消息，写入已读
const onNewsClick = (item) => {
  newsList.value[item].read = true;
  //并且写入pinia
  noticeStore.state.value.notices = newsList.value;
};

onMounted(() => {
  nextTick(() => {
    // getTableData();
  });
});
</script>

<style scoped lang="scss">
.layout-navbars-breadcrumb-user-news {
  .head-box {
    display: flex;
    border-bottom: 1px solid var(--el-border-color-lighter);
    box-sizing: border-box;
    color: var(--el-text-color-primary);
    justify-content: space-between;
    height: 35px;
    align-items: center;
    .head-box-btn {
      color: var(--el-color-primary);
      font-size: 13px;
      cursor: pointer;
      opacity: 0.8;
      &:hover {
        opacity: 1;
      }
    }
  }
  .content-box {
    height: 300px;
    overflow: auto;
    font-size: 13px;
    .content-box-item {
      padding-top: 12px;
      display: flex;
      &:last-of-type {
        padding-bottom: 12px;
      }
      .content-box-msg {
        color: var(--el-text-color-secondary);
        margin-top: 5px;
        margin-bottom: 5px;
      }
      .content-box-time {
        color: var(--el-text-color-secondary);
      }
      .item-conten {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
      .content-box-title {
        display: flex;
        //width: 200px;
        //margin: 10px auto;
        justify-content: space-between;
        align-items: center;
      }
      .content-box-type-and-notification {
        display: flex;
        align-items: center;
      }
      .notification-text {
        font-size: 10px; /* 根据需要调整字体大小 */
        color: #606266; /* 根据需要调整字体颜色 */
      }
      .content-box-type {
        font-size: 10px;
        //font-weight: bold;
        color: white;
        padding: 5px;
        background-color: #e6a23c;
        border-radius: 5px;
        margin-right: 8px;
      }
      .el-tag--mini {
        padding: 3px 6px;
        font-size: 10px;
      }
    }
  }
  .foot-box {
    height: 35px;
    color: var(--el-color-primary);
    font-size: 13px;
    cursor: pointer;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--el-border-color-lighter);
    &:hover {
      opacity: 1;
    }
  }
  :deep(.el-empty__description p) {
    font-size: 13px;
  }
}
</style>
