<template>
  <div class="tips" @click="navigateToDetail(currentNotice)">
    <img alt="" src="@/static/images/notice.png">
    <div class="notice-container">
      <transition name="slide-up-down" mode="out-in">
        <div :key="currentNotice && currentNotice.noticeId" class="notice-content">
          {{ currentNotice && currentNotice.noticeTitle ? currentNotice.noticeTitle : '暂无通知' }}
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { getNoticeList } from "@/api/announcement/announcement.js";

export default {
  name: 'Notice',
  data() {
    return {
      noticeList: [],
      currentIndex: 0,
      currentNotice: null,
      timer: null
    };
  },
  mounted() {
    // 组件首次加载时获取数据
    // this.fetchNoticeData();
  },
  destroyed() {
    // 清理定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    // 提供给父组件调用的刷新方法
    refreshData() {
      this.fetchNoticeData();
    },

    // 获取公告数据
    async fetchNoticeData() {

      try {
        const response = await getNoticeList({
          status: '0',
          noticeType: 1,
          pageSize: 999
        });

        // 假设response.data包含公告列表
        this.noticeList = response.rows || [];
        if (this.noticeList.length > 0) {
          this.currentNotice = this.noticeList[0];
          if (this.timer) {
            clearInterval(this.timer);
          }
          // 数据加载完成后启动轮播
          this.startCarousel();
        }
      } catch (error) {
        console.error('获取公告数据失败:', error);
      }
    },

    // 开始轮播
    startCarousel() {
      if (this.noticeList.length <= 1) return;

      this.timer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.noticeList.length;
        this.currentNotice = this.noticeList[this.currentIndex];
      }, 3000); // 5秒轮播一次
    },

    // 跳转到详情页
    navigateToDetail(notice) {
      if (!notice || !notice.noticeId) return;

      uni.navigateTo({
        url: '/pages/announcement/noticeDetail?id=' + notice.noticeId
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.tips {
  display: flex;
  align-items: center;
  padding: 16rpx 28rpx;
  background: #FFF4F4;
  border-radius: 32rpx;
  font-size: 24rpx;
  color: #222222;
  line-height: 28rpx;
  margin-bottom: 32rpx;
  cursor: pointer; // 鼠标指针变为手型
  transition: all 0.3s ease; // 添加过渡效果
  overflow: hidden;

  img {
    width: 66rpx;
    padding-right: 28rpx;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    margin-right: 28rpx;
    flex-shrink: 0;
  }

  .notice-container {
    flex: 1;
    overflow: hidden;
    height: 28rpx;
    position: relative;
  }

  .notice-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // 上下滚动动画
  .slide-up-down-enter-active,
  .slide-up-down-leave-active {
    transition: all 0.5s ease;
  }

  .slide-up-down-enter-from {
    transform: translateY(30rpx);
    opacity: 0;
  }

  .slide-up-down-leave-to {
    transform: translateY(-30rpx);
    opacity: 0;
  }

  // 鼠标悬停效果
  &:hover {
    background: #FFE8E8; // 背景色变深
    transform: scale(1.01); // 轻微放大
  }

  // 点击效果
  &:active {
    transform: scale(0.99); // 轻微缩小
  }
}
</style>