<template>
  <div v-if="hasBannerList">
    <van-swipe class="h-[50px] mt-[8px]" loop vertical :show-indicators="false">
      <van-swipe-item v-for="item in bannerList" :key="item.entityName">
        <div class="swiper-item bg-white flex flex-col items-start justify-between px-[12px]" @click="clickItem(item)">
          <span class="text-[#0CCD58] text-[12px] text-[600]">
            {{ item.entityName }}
          </span>
          <div class="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-text">
              {{ t("home.notice.detail") }}
            </span>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>

  <div v-else-if="tipsMessage">
    <div class="noMessage">
      <span class="noMessage-text text-[#0CCD58] text-[12px] text-[600]">
        {{ 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>

<style lang="scss" scoped>
.swiper-item {
  display: block;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  border: 1px solid #C7D2FE;
}

.underline-text {
  text-decoration: underline;
  text-decoration-color: #0CCD58;
}

.noMessage {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 12px;
  background: #EBEFFF;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  border: 1px solid #C7D2FE;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

.noMessage-text {
  line-height: 18px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all;
}
</style>
