<template>
  <div>
    <ClientOnly>
      <div class="echart-box-cl narrow-scrollbar">
        <holder-box
          v-if="mt != '2'"
          :token="token"
          :tb="tb"
          :currentPath="currentPath"
          :r24h="r24h"
        ></holder-box>
        <deal-box
          :token="token"
          :tb="tb"
          :currentPath="currentPath"
          :r24h="r24h"
        ></deal-box>
        <in-and-out-box
          :token="token"
          :tb="tb"
          :currentPath="currentPath"
          :r24h="r24h"
        ></in-and-out-box>
        <top100-box
          v-if="mt != '2'"
          :token="token"
          :tb="tb"
          :currentPath="currentPath"
          :r24h="r24h"
        ></top100-box>
        <pool-box
          :token="token"
          :tb="tb"
          :currentPath="currentPath"
          :r24h="r24h"
        ></pool-box>
        <twitter-box
          :token="token"
          :tb="tb"
          :currentPath="currentPath"
          :r24h="r24h"
        ></twitter-box>
        <telegram-box
          :token="token"
          :tb="tb"
          :currentPath="currentPath"
          :r24h="r24h"
        ></telegram-box>
        <discord-box
          :token="token"
          :tb="tb"
          :currentPath="currentPath"
          :r24h="r24h"
        ></discord-box>
        <twitter-total-box
          :token="token"
          :currentPath="currentPath"
        ></twitter-total-box>
      </div>
    </ClientOnly>
  </div>
</template>

<script lang="ts" setup>
import HolderBox from './HolderBox.vue';
import DealBox from './DealBox.vue';
import InAndOutBox from './InAndOutBox.vue';
import TwitterBox from './TwitterBox.vue';
import TwitterTotalBox from './TwitterTotalBox.vue';
import Top100Box from './Top100Box.vue';
import PoolBox from './PoolBox.vue';
import TelegramBox from './TelegramBox.vue';
import DiscordBox from './DiscordBox.vue';
const props = defineProps({
  token: {
    type: String,
  },
  tb: {
    type: String,
  },
  currentPath: String,
  r24h: String,
  mt: String,
});
</script>

<style scoped lang="less">
.echart-box-cl {
  height: calc(100vh - 120px);
  width: 100%;
  overflow-y: scroll;
  padding: 0 4px 0 12px;
}
</style>
