<template>
  <div class="content_body">
    <van-notice-bar
      ref="notice"
      scrollable
      color="#FFEC5C"
      background="#293036"
    >
      <template #left-icon>
        <h-img
          width=".5rem"
          style="padding-right: 0.2rem"
          src="home/icon_lb.png"
        />
      </template>
      <div class="notice">
        <span
          :class="{ text: item.url }"
          v-for="(item, index) in data"
          :key="index"
        >
          {{ item.txt }}
          <span v-if="item.url" @click.stop="openLink(item)"
            >Participar >></span
          >
        </span>
      </div>
    </van-notice-bar>
  </div>
</template>
<script setup lang="ts">
import { noticeStore } from "@/stores/modules/notice";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const notice = ref();
const userNotice = noticeStore();
const data = computed(() => {
  if (notice.value) {
    notice.value.reset();
  }
  return userNotice.broadcast;
});
const openLink = (obj: any) => {
  if (obj.urlType == 1) {
    window.open(obj.url);
  } else if (obj.urlType == 0) {
    if (obj.url == 6) {
      router.push("/turntable");
    } else if (obj.url == 7) {
      router.push("/infiniteProxy");
    } else {
      console.log("未知链接", obj);
    }
  }
};
</script>
<style lang="scss" scoped>
.content_body {
  padding: 0 0 0.1rem 0;
}
.notice {
  display: flex;
  width: 100%;
  > span {
    margin-right: 5rem;
    > span {
      margin-left: 0.2rem;
      color: #009d80;
      cursor: pointer;
    }
  }
  .text {
    color: #3bc117 !important;
  }
  > span:last-child {
    margin-right: 0;
  }
}
:deep(.van-notice-bar) {
  height: 40px;
  line-height: 40px;
  font-size: 0.4rem;
  border-radius: $border-radius;
  .van-notice-bar__left-icon {
    font-size: 0.4rem;
  }
}
</style>
