<template>
  <div class="right-detail-wrapper">
    <div class="right-header">
      <template v-for="item in headerBtns" :key="item.value">
        <t-button
          class="detail-button-cl"
          @click="gotoDetail(item.value)"
          :class="{
            active: monitor(item.value),
            occupy:
              currentRouter === 'tokenAnalysis' && item.value == 'details',
          }"
          v-if="btnLoad(item.value)"
        >
          {{ item.label }}
          <template #icon>
            <template v-if="item.value === 'details'">
              <Detailsicon class="details-icon-cl"></Detailsicon>
            </template>
            <template v-else-if="item.value === 'favo'">
              <Favo class="right-detail-analysis-icon"></Favo>
            </template>
            <template v-else>
              <CollectionSvg
                class="right-detail-collection-icon"
              ></CollectionSvg>
            </template>
          </template>
        </t-button>
      </template>
    </div>
    <div v-show="isDetails" class="details-title-box">
      <RightDetailHeader
        :tokenInfo="tokenInfo"
        :numR24h="numR24h"
        :r24h="r24h"
        :tb="tb"
        :currentPath="currentPath"
        v-model:isInCollection="isInCollection"
      ></RightDetailHeader>
      <div class="right-body-scroll narrow-scrollbar">
        <div class="right-body">
          <token-social-list
            :token="token"
            :currentPath="currentPath"
            :chat="tokenInfo.chat"
          ></token-social-list>
          <t-tabs
            class="info-tabs"
            v-model="currentTab"
            @change="changeTab"
            :destroy-on-hide="false"
          >
            <t-tab-panel value="info" :label="$t('tokenInfo.tokenInfo')">
              <token-info
                :token-info="tokenInfo"
                :currentPath="currentPath"
              ></token-info>
            </t-tab-panel>
            <t-tab-panel
              value="pool"
              :label="$t('tokenInfo.poolInfo')"
              :destroy-on-hide="false"
            >
              <token-pool
                :poolToken="props.token"
                :currentPath="currentPath"
                v-if="isPool"
                @update:address="changePool"
                :tb="tb"
                :mt="mt"
              ></token-pool>
            </t-tab-panel>
          </t-tabs>
          <time-tab
            :mt="mt"
            :PoolAddress="PoolAddress"
            :token="token"
            :currentPath="currentPath"
            :tb="props.tb"
          ></time-tab>
          <div class="select-box_collect"></div>
          <security-check
            :token="props.token"
            :currentPath="currentPath"
          ></security-check>
        </div>
      </div>
    </div>
    <template v-if="ifDetails">
      <div v-show="!isDetails" class="all-echarts">
        <details-echarts
          :token="props.token"
          :tb="tb"
          :currentPath="currentPath"
          :r24h="numR24h"
          :mt="mt"
        ></details-echarts>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import request from '@/utils/request';
import { parsePercent } from '@/utils/tool';
import TimeTab from './TimeTab.vue';
import SecurityCheck from './SecurityCheck.vue';
import TokenInfo from './TokenInfo.vue';
import TokenPool from './TokenPool.vue';
import TokenSocialList from './TokenSocialList.vue';
import CollectionTable from './collectionTable.vue';
import * as Cache from '@/utils/cache';
import { MessagePlugin } from 'tdesign-vue-next';
import DetailsEcharts from '../analysis/detailsEcharts.vue';
import Detailsicon from '/public/images/svg/rightDetail/detailsicon.svg';
import Favo from '/public/images/svg/rightDetail/favo.svg';
import CollectionSvg from '/public/images/svg/rightDetail/colection.svg';
import { useI18n } from 'vue-i18n';
import RightDetailHeader from './rightDetailHeader';
const router = useRouter();
const { t, locale } = useI18n();
// 通知表格收藏图表取消收藏
const CollectionDe = CollectionDelete();
// 是否加载折线图
// const initEchart = computed(() => store.getters['echart/gethasInit']);
const headerBtns = computed(() => [
  {
    label: t('securityCheck.details'),
    value: 'details',
  },
  {
    label: t('filter.Collection'),
    value: 'collection',
  },
  {
    label: t('securityCheck.analysis'),
    value: 'favo',
  },
]);
const props = defineProps({
  token: String,
  scene: String,
  tb: String,
  currentPath: String,
  r24h: String,
  mt: String,
});
const emit = defineEmits(['update:setPool', 'SettwitterRul']);
const r24h = ref('');
const numR24h = ref('');
// 判断当前路由，隐藏右侧详情box中的折线图模块
const currentRouter = router.currentRoute.value.name;
const currentTab = ref('info');
const isInCollection = ref(false);
// 默认选择detail按钮
const defaBtn = ref('details');
const isDetails = ref(true);
const ifDetails = ref(false);
const WatchEcharts = useWatchEcharts();
// 传给详情折线图的tbname
const tb = ref('');
// 点击pool才加载
const isPool = ref(false);
const PoolAddress = ref('');
// 当前链
const chain = useChain();
const tokenInfo: any = ref({
  avatar: '',
  token: '',
  pool: [],
});
watch(
  () => props.r24h,
  (v) => {
    if (v) {
      if (v[0] !== '-') {
        numR24h.value = '+' + parseFloat(props.r24h).toFixed(3);
      } else {
        numR24h.value = parseFloat(props.r24h).toFixed(3);
      }
      r24h.value = parsePercent(parseFloat(v));
      if (r24h.value[0] !== '-') {
        r24h.value = '+' + r24h.value;
      }
    }
  }
);
const btnLoad = (value: string) => {
  if (currentRouter == 'tokenAnalysis' && value == 'favo') {
    return false;
  }
  return true;
};
watch(
  () => CollectionDe.value,
  (v) => {
    if (isInCollection.value) {
      // 取消收藏
      isInCollection.value = false;
    }
  }
);
// 流动池tab改变
const changeTab = (value) => {
  if (value === 'pool') {
    isPool.value = true;
  }
};

const getTokenInfo = async () => {
  try {
    const result: any = await request.get(`/v1/${chain.value}/getRightInfo`, {
      params: {
        tag: props.tb,
        mainstream: props.mt,
      },
    });

    result.marketCap = parseFloat(result.supply * result.up + '').toFixed(1);
    result.tokenSub = '';
    if (result.token) {
      result.tokenSub =
        result.token.substr(0, 6) +
        '...' +
        result.token.substr(result.token.length - 4, 4);
    }
    // tbname-掩码
    result.tbnameSub = '';
    result.n_tb = '';
    if (props.tb) {
      // 先将d去掉
      result.n_tb =
        props.tb[0] == 'd' ? props.tb.slice(1, props.tb.length) : props.tb;
      result.tbnameSub =
        result.n_tb.substr(0, 6) +
        '...' +
        result.n_tb.substr(result.n_tb.length - 4, 4);
    }
    isInCollection.value = Cache.hasSet(props.tb);
    Object.assign(tokenInfo.value, result);
    // 如果有推特链接，提交给twitter组件解析
    if ('chat' in result) {
      emit('SettwitterRul', result.chat.twitter);
    }
  } catch (e) {
    console.log(e);
  }
};
// 语言变化
watch(
  () => locale.value,
  (v) => {
    if (isDetails.value) {
      ifDetails.value = false;
    } else {
      WatchEcharts.value += 1;
    }
  }
);
// 点击查看token详情信息
// v-if v-show同时使用，折线图第一次加载后，不在使用v-if，减少请求
const gotoDetail = (value) => {
  // 先判断是否有token,没有则禁止打开折线图模块
  if (!props.tb && value === 'favo') {
    MessagePlugin.closeAll();
    MessagePlugin.warning(t('MessagePlugin.plToken'));
    return;
  }
  defaBtn.value = value;
  if (defaBtn.value === 'favo') {
    tb.value = props.tb;
    isDetails.value = false;
    ifDetails.value = true;
  } else {
    isDetails.value = true;
  }
};
// 监听按钮点击事件，切换样式
const monitor = computed((value) => {
  return function (value) {
    return defaBtn.value === value;
  };
});
// 接收右侧详情流动池address
const changePool = (PoolValue) => {
  PoolAddress.value = PoolValue;
  emit('update:setPool', PoolValue);
};
watch(
  () => props.token,
  (v) => {
    if (v) {
      //如果折线图为隐藏状态，需注销折线图模块
      if (isDetails.value) {
        ifDetails.value = false;
      }
      tb.value = props.tb;
      getTokenInfo();
    }
  }
);
</script>
<style lang="less">
@import '@/style/flex.less';
@import '@/style/variables.less';
.right-detail-wrapper {
  height: calc(100vh - 70px);
  flex: 1;
  position: sticky;
  top: 12px;
  z-index: 99;
  margin-right: 8px;
  box-sizing: border-box;
  .right-header {
    box-sizing: border-box;
    height: 40px;
    width: 100%;
    .da();
    border: 1px solid var(--td-component-border);
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    background-color: var(--td-bg-color-container);
    .detail-button-cl {
      height: 100%;
      border-radius: 0;
      width: calc(50% - 8px);
      border: none;
      background: none;
      color: var(--td-search-btn-back-1);
      font-weight: bold;
      .details-icon-cl {
        width: 30px;
        fill: var(--td-search-btn-back-1);
      }
      .right-detail-collection-icon {
        margin-right: 10px;
        fill: var(--td-search-btn-back-1);
      }
      .right-detail-analysis-icon {
        width: 26px;
        margin-right: 10px;
        fill: var(--td-search-btn-back-1);
      }
    }
    & > :first-child {
      border-top-left-radius: 10px;
    }
    & > :last-child {
      border-top-right-radius: 10px;
    }
    .active {
      background: var(--td--main-btn-color-1);
      color: white;
      .details-icon-cl {
        fill: white;
      }
      .right-detail-analysis-icon {
        fill: white;
      }
      .right-detail-collection-icon {
        fill: white;
      }
    }
    .occupy {
      width: 98.5%;
    }
    .title {
      color: var(--td-text-color-primary);
      margin-right: 16px;
      font-size: 20px;
    }
    .t-icon {
      cursor: pointer;
      font-size: 20px;
      &:hover {
        color: var(--td-brand-color);
      }
    }
  }
  .details-title-box {
    width: 100%;
    .right-body-scroll {
      width: 100%;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      .right-body {
        height: calc(100vh - 240px);
        .address-info {
          margin-top: 12px;
          flex-basis: 50%;
          .address-info-item {
            .address {
              margin-right: 4px;
            }
          }
        }
        .info-tabs {
          border: 1px solid var(--td-component-border);
          border-top: none;
          border-bottom-left-radius: @border-radius;
          border-bottom-right-radius: @border-radius;
          .t-tabs__nav-scroll {
            width: 100%;
            display: flex;
            border-bottom: 2px solid var(--td-search-brand-color-1);
            .t-tabs__nav-wrap {
              width: 100% !important;
              .t-tabs__bar {
                background-color: var(--main-theme-color);
              }
              .t-tabs__nav-item {
                width: 50%;
                .dj();
              }
              .t-is-active {
                color: var(--main-theme-color);
              }
            }
          }
        }
      }
    }
  }

  .all-echarts {
    width: 338px;
  }
}
</style>
