<!--
 * @Author: walker.liu
 * @Date: 2022-05-30 17:11:11
 * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
-->
<template>
  <div>
    <ClientOnly>
      <MyLayout>
        <template #content>
          <div class="token-analysis-wrapper">
            <div class="left-wrapper narrow-scrollbar">
              <t-row :gutter="12" justify="space-between" class="t-row-class">
                <t-col :lg="6" :xl="4" class="box-col">
                  <holder-box
                    id="hoder-box"
                    :tb="tb"
                    :currentPath="currentPath"
                  ></holder-box>
                </t-col>
                <t-col :lg="6" :xl="4" class="box-col">
                  <deal-box
                    id="deal-box"
                    :tb="tb"
                    :currentPath="currentPath"
                  ></deal-box>
                </t-col>
                <t-col :lg="6" :xl="4" class="box-col">
                  <in-and-out-box
                    id="in-and-out-box"
                    :tb="tb"
                    :currentPath="currentPath"
                  ></in-and-out-box>
                </t-col>
                <t-col :lg="6" :xl="4" class="box-col">
                  <pool-box
                    id="pool-box"
                    :tb="tb"
                    :currentPath="currentPath"
                  ></pool-box>
                </t-col>
                <t-col :lg="6" :xl="4" class="box-col">
                  <twitter-box
                    id="twitter-box"
                    :token="token"
                    :currentPath="currentPath"
                  ></twitter-box>
                </t-col>
                <t-col :lg="6" :xl="4" class="box-col">
                  <top100-box
                    id="top100-box"
                    :tb="tb"
                    :currentPath="currentPath"
                  ></top100-box>
                </t-col>
                <t-col :lg="6" :xl="4" class="box-col">
                  <telegram-box
                    id="telegram-box"
                    :token="token"
                    :currentPath="currentPath"
                  ></telegram-box>
                </t-col>
                <t-col :lg="6" :xl="4" class="box-col">
                  <discord-box
                    id="discord-box"
                    :token="token"
                    :currentPath="currentPath"
                  ></discord-box>
                </t-col>
                <t-col :lg="6" :xl="4" class="box-col">
                  <twitter-total-box
                    :token="token"
                    :currentPath="currentPath"
                    :url="twitter"
                  ></twitter-total-box>
                </t-col>
              </t-row>
            </div>
            <div class="right-wrapper">
              <right-detail
                scene="detail"
                :token="token"
                :currentPath="currentPath"
                :tb="tb"
                :r24h="r24h"
                @SettwitterRul="SettwitterRul"
              ></right-detail>
            </div>
            <FixedJoinUs></FixedJoinUs>
            <Announcement></Announcement>
          </div>
        </template>
      </MyLayout>
    </ClientOnly>
  </div>
</template>
<script setup lang="ts">
import MyLayout from '@/views/layout/layout.vue';
import RightDetail from '@/views/token/RightDetail.vue';
import HolderBox from '/views/analysis/HolderBox.vue';
import DealBox from '/views/analysis/DealBox.vue';
import InAndOutBox from '/views/analysis/InAndOutBox.vue';
import TwitterBox from '/views/analysis/TwitterBox.vue';
import TwitterTotalBox from '/views/analysis/TwitterTotalBox.vue';
import Top100Box from '/views/analysis/Top100Box.vue';
import PoolBox from '/views/analysis/PoolBox.vue';
import TelegramBox from '/views/analysis/TelegramBox.vue';
import DiscordBox from '/views/analysis/DiscordBox.vue';
import request from '@/utils/request';
import { WebS } from '@/utils/TokenTrans';
import { filterChainObj } from '@/constants/UnifiedManagementChain';
import { webLogo } from '@/constants/logo';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
// 初始化折线图
const WatchEcharts = useWatchEcharts();
watch(
  () => locale.value,
  (v) => {
    WatchEcharts.value += 1;
  }
);
const route = useRoute();
const tb = ref(route.params.tb + '');
const currentPath = ref(route.params.chain + '');
const chain = useChain();
// token---接口得到
const token = ref('');
// r24h--接口
const r24h = ref('');
useHead({
  title: `Dexfilter | analysis`,
  meta: [
    {
      name: 'description',
      content: `Dexfilter 数据分析页 ${route.params.tb ?? '---'}`,
    },
  ],
  link: [webLogo],
});
const twitter = ref('');
const options = ['5M', '30M', '1H', '6H', '1D'];
// 先取出对应链的接口id
let Obj = filterChainObj('name', currentPath.value);
currentPath.value = Obj.value;
onBeforeMount(() => {
  if (currentPath.value) {
    chain.value = currentPath.value;
  }
  request
    .get(`/v1/${currentPath.value}/getConfig`, {
      params: {
        tag: WebS(tb.value),
      },
    })
    .then((res: any) => {
      r24h.value = res.r24h + '';
      token.value = res.token;
    });
});
onMounted(() => {
  nextTick(() => {
    let echartBox = window.sessionStorage.getItem('echart-box');
    if (echartBox !== 'null' && echartBox !== '' && echartBox !== null) {
      let dom = document.querySelector(`#${echartBox}`);
      dom.classList.add('active');
    }
  });
});
const SettwitterRul = (value: string) => {
  twitter.value = value;
};
</script>
<style lang="less" scoped>
@import '@/style/variables.less';
.token-analysis-wrapper {
  box-sizing: border-box;
  padding: 6px 0 0 6px;
  position: relative;
  height: calc(100vh - 70px);
  display: flex;
  overflow: hidden;
  .left-wrapper {
    width: calc(100vw - 360px);
    margin-right: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    .t-row-class {
      margin-left: -2px !important;
      margin-right: -2px !important;
      .box-col {
        margin-bottom: 16px;
      }
      .active {
        animation: fadenum 3s;
        @keyframes fadenum {
          0% {
            box-shadow: 0 0 16px @main-theme-color;
          }
          50% {
            box-shadow: 0 0 8px @main-theme-color;
          }
          100% {
            box-shadow: none;
          }
        }
      }
    }
  }

  .right-wrapper {
    width: 360px;
    margin-left: auto;
    position: sticky;
    top: 0;
    border-left: 1px solid var(--td-component-border);
  }
}
</style>
