<template>
  <view v-if="hasBannerList">
    <swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
      :duration="duration" :indicator-dots="false" :vertical="true">
      <swiper-item v-for="item in bannerList" :key="item.entityName">
        <view class="swiper-item" @click="clickItem(item)">
          <text class="text-[#181B25] text-[12px] font-[600]">
            {{ item.entityName }}
          </text>
          <view class="notice-footer">
            <text class="text-[#181B25] text-[10px] font-[500]">
              发布时间：{{ item.effectiveStartTime }}
            </text>
            <text class="text-[#181B25] text-[10px] font-[500] underline-text">
              详情
            </text>
          </view>
        </view>
      </swiper-item>
    </swiper>

  </view>

  <view v-else-if="props.tipsMessage">
    <view class="noMessage">
      <text class="noMessage-text text-[#181B25] text-[12px] font-[600]">
        {{ props.tipsMessage }}
      </text>
    </view>
  </view>

</template>

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

const props = defineProps({
  tipsMessage: {
    type: String,
    default: "随时吩咐，懂你的旅游搭子",
  },
});

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

const currentIndex = ref(0);
const bannerList = ref([]);
const hasBannerList = computed(() => Array.isArray(bannerList.value) && bannerList.value.length > 0);

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

const getTimeNoticeListData = async () => {
  const res = await getTimeNoticeList();
  if (res && res.code === 0) {
    bannerList.value = Array.isArray(res.data) ? res.data : [];
  }
}

onMounted(() => {
  getTimeNoticeListData();
  uni.$on(NOTICE_EVENT_LOGIN_SUCCESS, () => {
    getTimeNoticeListData();
  });
});

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

</script>

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

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  height: 48px;
  padding: 7px 8px;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.96);
}

.notice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.underline-text {
  text-decoration: underline;
  text-decoration-color: #35F37F;
  color: #99A0AE;
}

.noMessage {
  display: flex;
  align-items: center;
  margin-top: 8px;
  height: 48px;
  padding: 7px 8px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.96);
  width: 100%;
  box-sizing: border-box;
}

.noMessage-text {
  color: #0B5C2D;
  line-height: 16px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all;
}
</style>
