<template>
  <div>
    <ClientOnly>
      <div class="Announcement-box" v-if="hasOpen">
        <div class="Announcement-box-cl">
          <div class="header">
            {{ $t('Announcement.title') }}
          </div>
          <div class="content">
            <span>{{ $t('Announcement.content') }}</span>
            <AnnSvg></AnnSvg>
          </div>
          <div class="footer">
            <t-button @click="JoinUs(tgUrl)">{{
              $t('Customized.Contact')
            }}</t-button>
          </div>
          <div class="close" @click="closeAnn">
            <closeSvg></closeSvg>
          </div>
        </div>
      </div>
    </ClientOnly>
  </div>
</template>

<script lang="ts" setup>
import AnnSvg from '/public/images/svg/filter/announcement.svg';
import closeSvg from '/public/images/svg/filter/close.svg';
import { tgUrl } from '@/utils/open';

// 是否展示广告
const hasOpen = ref(false);
// 存入sessionStorage---广告如果被关闭，下次打开浏览器继续弹出
onMounted(() => {
  let open = window.sessionStorage.getItem('openAnn');
  if (!open) {
    hasOpen.value = true;
  }
});
const JoinUs = (url: string) => {
  window.open(url);
};
// 关闭广告
const closeAnn = () => {
  hasOpen.value = false;
  window.sessionStorage.setItem('openAnn', 'close');
};
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
.Announcement-box {
  position: fixed;
  bottom: 12px;
  left: 12px;
  max-width: 500px;
  padding: 12px 20px;
  background: var(--tradingview-color-1);
  box-shadow: 0 0 10px rgb(180, 180, 180);
  z-index: 1000;
  .Announcement-box-cl {
    position: relative;
    .header {
      font-weight: bold;
      font-size: @font-size-l;
      white-space: nowrap;
    }
    .content {
      padding: 12px 0;
      .dja(space-between);
      span {
        width: 80%;
      }
    }
    .close {
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
    }
  }
}
</style>
