<template>
  <MyLayout>
    <template #content>
      <div class="home-wrapper">
        <div
          class="token-page-wrapper narrow-scrollbar"
          id="token-page-wrapper"
        >
          <div v-if="pageloading" class="scroll-Replacement"></div>
          <template v-else>
            <ClientOnly>
              <RollToken></RollToken>
            </ClientOnly>
          </template>
          <div>
            <TokenFilter></TokenFilter>
          </div>
          <NuxtPage></NuxtPage>
        </div>
        <RightDetail
          :token="token"
          :tb="TbName"
          :currentPath="currentPath"
          :r24h="r24h"
          @changeChain="changeChain"
        ></RightDetail>
      </div>
      <ClientOnly>
        <FixedJoinUs></FixedJoinUs>
        <Announcement></Announcement>
      </ClientOnly>
      <Animation
        v-if="pageLoading2"
        position="fixed"
        background="red"
      ></Animation>
    </template>
  </MyLayout>
</template>

<script setup lang="ts">
import MyLayout from '@/views/layout/layout.vue';
import RightDetail from '@/views/token/RightDetail.vue';
import TokenFilter from '@/views/token/TokenFilter.vue';
import RollToken from '@/views/layout/rollToken.vue';
const route = useRoute();
const token = ref();
const TbName = ref();
const r24h = ref();
const chain = useChain();
const currentPath = ref('');
const pageLoading2 = ref(false);
// div是否隐藏
const pageloading = ref(true);
const getUa = () => {
  if (
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    )
  ) {
    window.location.href = 'http://m.dexfilter.com';
  }
};
onBeforeMount(() => {
  getUa();
});
onMounted(() => {
  pageloading.value = false;
  currentPath.value = chain.value;
});
const RightInfo = useCurrentRightInfo();
watch(RightInfo.value, (v) => {
  token.value = v.token;
  TbName.value = v.tb;
  r24h.value = v.r24h;
});
const changeChain = (chain) => {
  currentPath.value = chain;
};
// 监听路由变化
watch(
  () => route.href,
  (v) => {
    pageLoading2.value = true;
  }
);
</script>

<style lang="less">
@import '@/style/variables.less';
.home-wrapper {
  width: 100vw;
  display: flex;
  min-height: calc(100vh - 70px);
  padding: 12px 0 12px 12px;
  box-sizing: border-box;
  background: var(--main-theme-color-2);
  .token-page-wrapper {
    width: calc(100vw - 368px);
    padding-right: 12px;
    box-sizing: border-box;
    .scroll-Replacement {
      height: 45px;
    }
  }
}
</style>
