<template>
  <div v-if="hasBannerList">
    <van-swipe class="h-[50px] mt-[8px] rounded-[12px] bg-white px-[12px]" loop vertical :autoplay="autoplay"
      :show-indicators="false">
      <van-swipe-item v-for="item in bannerList" :key="item.entityName">
        <div class="h-full  flex flex-col items-start justify-center" @click="clickItem(item)">
          <span class="text-[#0CCD58] text-[12px] text-[600]">
            {{ item.entityName }}
          </span>
          <div class="w-full flex flex-row justify-between">
            <span class="text-[#0CCD58] text-[10px] text-[500]">
              {{ t("home.notice.publishedAt") }}{{ item.effectiveStartTime }}
            </span>
            <span class="text-[#0CCD58] text-[10px] text-[500] underline decoration-[#0CCD58]">
              {{ t("home.notice.detail") }}
            </span>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>

  <div v-else-if="tipsMessage">
    <div
      class="mt-[8px] inline-flex box-border w-fit max-w-full rounded-[8px] border border-[#C7D2FE] bg-[#EBEFFF] px-[12px] py-[4px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)]">
      <span
        class="text-[#0CCD58] text-[12px] text-[600] leading-[18px] whitespace-normal [overflow-wrap:break-word] break-all">
        {{ tipsMessage }}
      </span>
    </div>
  </div>

</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useRouter } from 'vue-router'
import { useI18n } from "vue-i18n";
import { getTimeNoticeList } from "@/api/home";
import { NOTICE_EVENT_LOGIN_SUCCESS } from "@/constants/constant";
import { emitter } from '@/utils/events'

const props = defineProps({
  tipsMessage: {
    type: String,
    default: "",
  },
});

const router = useRouter()

const { t } = useI18n();
const tipsMessage = computed(() => props.tipsMessage || t("home.notice.defaultTip"));

const autoplay = ref(3000);

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

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

onMounted(() => {
  getTimeNoticeListData();

  emitter.on(NOTICE_EVENT_LOGIN_SUCCESS, () => {
    getTimeNoticeListData();
  });
});

const clickItem = (item) => {
  router.push({
    path: '/notice',
    query: {
      noticeData: encodeURIComponent(JSON.stringify(item))
    }
  });
}

</script>
