<template>

  <view >
    <swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
      :duration="duration" :indicator-dots="false">
      <swiper-item v-for="item in bannerList" :key="item.entityName">
        <view class="swiper-item flex flex-col flex-items-start flex-justify-between px-10" @click="clickItem(item)">
          <text class="font-size-12 font-600 color-B45309">
            {{ item.entityName }}
          </text>
          <view class="flex flex-row flex-justify-between">
            <text class="font-size-10 font-500 color-D97706">
              发布时间：{{ item.effectiveStartTime }}
            </text>
            <text class="font-size-10 font-500 color-B45309 underline-text">
              详情
            </text>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <yo-indicator-dot :current-index="currentIndex" :length="bannerList.length" duration="0.5" default-width="4px"
      active-width="16px" dot-height="4px" shape="circle" default-color="rgba(255,255,255,0.5)"
      active-color="rgba(255,255,255,1)" />
    
  </view>

</template>

<script setup>
import { onMounted, ref } from "vue";
import { getTimeNoticeList } from "@/request/api/MainPageDataApi";

const autoplay = ref(true);
const interval = ref(7000);
const duration = ref(500);

const currentIndex = ref(0);
// const bannerList = ref([]);
const bannerList = ref([
  {
    entityName: "小七欢迎你～",
    effectiveStartTime: "2025年7月12日 09:30",
  },
  {
    entityName: "小8欢迎你～",
    effectiveStartTime: "2025年7月13日 09:30",
  },
  {
    entityName: "小9欢迎你～",
    effectiveStartTime: "2025年7月15日 09:30",
  },
]);


const onSwiperChange = (e) => {
  currentIndex.value = e.detail.current;
};

const getTimeNoticeListData = async () => {
  const res = await getTimeNoticeList();
  if (res && res.code === 0) {
    bannerList.value = res.data;
  }
}

onMounted(() => {
  getTimeNoticeListData();
});

const clickItem = (item) => {
  uni.navigateTo({
    url: `/pages/ChatMain/NoticeMessage/detail?noticeData=${encodeURIComponent(JSON.stringify(item))}`
  });
}

</script>

<style lang="scss" scoped>
.swiper {
  height: 50px;
  margin-top: 8px;
}

.swiper-item {
  display: block;
  height: 46px;
  background: #fffbeb;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  border: 2px solid #fef3c7;
}

.underline-text {
  text-decoration: underline;
  text-decoration-color: #b45309;
}

</style>