<template>
  <div class="notice-container">
    <el-card class="notice-card">
      <!-- 顶部滚动通知 -->
      <div class="notice-header">
        <div class="scroll-text" ref="scrollText">
          <i class="el-icon-bell"></i>
          <span>{{ text }}</span>
          <i class="el-icon-bell"></i>
        </div>
      </div>

      <!-- 公告列表 -->
      <div class="notice-content">
        <div class="section-title">
          <i class="el-icon-message"></i>
          <span>近期公告</span>
        </div>

        <el-timeline v-loading="loading">
          <el-timeline-item
            v-for="item in noticeList"
            :key="item.noticeId"
            :timestamp="item.createTime"
            placement="top"
            :type="getTimelineItemType(item.noticeId)"
          >
            <el-card class="notice-item">
              <div class="notice-item-title">
                <i class="el-icon-document"></i>
                <span>{{ item.noticeTitle }}</span>
              </div>
              <div class="notice-item-content">
                {{ item.noticeContent }}
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Notice",
  data() {
    return {
      text: "欢迎访问图书馆公告栏，请及时查看最新公告！",
      noticeList: [],
      loading: true,
    };
  },
  methods: {
    async getRuleList() {
      try {
        const { data: res } = await this.$http.get("user/get_noticelist");
        if (res.status !== 200) {
          return this.$message.error(res.msg);
        }
        this.noticeList = res.data;
        this.$message.success({
          message: res.msg,
          duration: 1000,
        });
      } catch (error) {
        this.$message.error("获取公告列表失败");
      } finally {
        this.loading = false;
      }
    },
    getTimelineItemType(id) {
      const types = ["primary", "success", "warning", "danger"];
      return types[id % types.length];
    },
    initScrollText() {
      const containerWidth = this.$refs.scrollText.offsetWidth;
      const textWidth = this.$refs.scrollText.scrollWidth;
      if (textWidth > containerWidth) {
        this.$refs.scrollText.style.animation = "scroll 15s linear infinite";
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initScrollText();
    });
  },
  created() {
    this.getRuleList();
  },
};
</script>

<style lang="less" scoped>
.notice-container {
  padding: 20px;
  min-height: calc(100vh - 120px);
  background: #f5f7fa;

  .notice-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  .notice-header {
    background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;

    .scroll-text {
      color: white;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      overflow: hidden;

      i {
        margin: 0 10px;
        font-size: 20px;
      }
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f2f5;

    i {
      font-size: 24px;
      color: #1890ff;
      margin-right: 10px;
    }

    span {
      font-size: 20px;
      font-weight: 600;
      color: #303133;
    }
  }

  .notice-item {
    margin-bottom: 20px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .notice-item-title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ebeef5;

      i {
        color: #1890ff;
        margin-right: 8px;
      }

      span {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
      }
    }

    .notice-item-content {
      color: #606266;
      line-height: 1.6;
      font-size: 14px;
      padding: 10px 0;
    }
  }
}

@keyframes scroll {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

// 响应式适配
@media screen and (max-width: 768px) {
  .notice-container {
    padding: 10px;

    .notice-header {
      padding: 10px;

      .scroll-text {
        font-size: 16px;
      }
    }

    .section-title {
      margin-bottom: 20px;

      span {
        font-size: 18px;
      }
    }
  }
}
</style>
