<!-- 公告页面 -->
<script setup>
import { ref } from "vue";
import { useWsStore } from "../store";
import IconBack from "../assets/menu_icon/IconBack.vue";
const emit = defineEmits(["home"]);

// load 公告
const store = useWsStore();
const vertical_content = ref(
  (store.data3.deliveryNotification || [])
    .map((item) => item.deliveryContent || "")
    .join("")
    .replaceAll(/<br(\s?)\/>/g, "") || "暂无公告"
);
const horizontal_content = ref(
  (store.data2.deliveryMsg || [])
    .map((item) => item.deliveryContent || "")
    .join("\t") || "暂无公告"
);
store.$subscribe((mutation, state) => {
  vertical_content.value =
    (state.data3.deliveryNotification || [])
      .map((item) => item.deliveryContent || "")
      .join("")
      .replaceAll(/<br(\s?)\/>/g, "") || "暂无公告";
  horizontal_content.value =
    (state.data2.deliveryMsg || [])
      .map((item) => item.deliveryContent || "")
      .join("\t") || "暂无公告";
});

// handlers
const handleClose = () => {
  emit("home");
};
</script>

<template>
  <div class="announcement-page">
    <h1 class="announcement-title">公告栏</h1>
    <main class="announcement-content">
      <ScrollText :vertical="true" :duration="10" :pause-on-hover="true">
        <div v-html="vertical_content"></div>
      </ScrollText>
    </main>
    <div class="announcement-footer">
      <button
        id="return-btn"
        style="
          position: fixed;
          right: 32px;
          top: 56px;
          appearance: none;
          background: transparent;
          border: none;
          cursor: pointer;
        "
        @click="handleClose"
      >
        <IconBack color="#f00"/>
      </button>
      <ScrollText> {{ horizontal_content }} </ScrollText>
    </div>
  </div>
</template>

<style>
#return-btn:hover #back-btn__inner #back-btn {
  fill: #F008 !important;
}
</style>

<style scoped>
.announcement-page {
  flex: 1;
  height: 100%;
  width: 100%;
  background: url(../assets/line.png) 0 0 / 100% 100% no-repeat,  #000;
  display: flex;
  flex-direction: column;
  color: #f00;
}

.announcement-title {
  color: #fff;
  font-size: 72px;
  line-height: 144px;
  font-weight: 500;
  letter-spacing: 2px;
  text-align: center;
}

.announcement-content {
  /* background: #ccc3; */
  flex: 1;
  padding: 8px 80px;
  font-size: 72px;
  font-family: serif;
  overflow: hidden;
  user-select: none;
  margin-bottom: 32px;
}

.announcement-footer {
  height: 144px;
  /* background: #ccc1; */
  font-size: 64px;
  padding: 0 80px;
  line-height: 128px;
  font-family: sans-serif;
  position: relative;
  user-select: none;
}
</style>
