<template>
  <div class="token-time-range">
    <div class="right-range-box">
      <t-button
        v-for="item in tabOptions"
        :key="item.value"
        class="right-range-btn"
        :class="{ active: item.value == current }"
        @click="btnChange(item.value)"
      >
        {{ item.label }}
      </t-button>
    </div>
    <div class="time-range-data">
      <div class="item">
        <div class="label">{{ $t('home.newHolder') }}</div>
        <div class="value new">{{ timeMap[current].newHolders ?? '-' }}</div>
      </div>
      <div class="item">
        <div class="label">{{ $t('home.txns') }}</div>
        <div class="value">{{ timeMap[current].txns ?? '-' }}</div>
      </div>
      <div class="item">
        <div class="label">{{ $t('TableList.buys') }}</div>
        <div class="value">{{ timeMap[current].buys ?? '-' }}</div>
      </div>
      <div class="item">
        <div class="label">{{ $t('TableList.sells') }}</div>
        <div class="value">{{ timeMap[current].sells ?? '-' }}</div>
      </div>
      <div class="item">
        <div class="label">{{ $t('TableList.volume') }}</div>
        <div class="value">{{ timeMap[current].vns ?? '-' }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { parseNumberToK } from '@/utils/tool';
import request from '@/utils/request';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const props = defineProps({
  token: String,
  currentPath: String,
  tb: String,
  PoolAddress: String,
  mt: String,
});
// 当前链
const chain = useChain();
const current = ref('5m');
const tabOptions = computed(() => {
  return [
    {
      label: t('TableList.time1'),
      value: '5m',
    },
    {
      label: t('TableList.time2'),
      value: '1h',
    },
    {
      label: t('TableList.time3'),
      value: '4h',
    },
    {
      label: t('TableList.time4'),
      value: '24h',
    },
  ];
});
const btnChange = (value: string) => {
  current.value = value;
};
// token变化清空timeTab的数据
watch(
  () => props.token,
  (v) => {
    if (v) {
      Object.keys(timeMap).forEach((item, index) => {
        timeMap[item] = {};
      });
      getTimeList('');
    }
  }
);
const timeMap: any = reactive({
  '5m': {},
  '1h': {},
  '4h': {},
  '24h': {},
});
watch(current, (v) => {
  if (timeMap[v].newHolders === undefined) {
    getTimeList('');
  }
});
watch(
  () => props.PoolAddress,
  (v) => {
    if (v) {
      Object.keys(timeMap).forEach((item, index) => {
        timeMap[item] = {};
      });
      getTimeList(props.PoolAddress);
    }
  }
);
const getTimeList = async (PoolAddress) => {
  if (!props.token) {
    return;
  }
  request
    .get(`/v1/${chain.value}/getRightTimeInfo`, {
      params: {
        tag: PoolAddress ? PoolAddress : props.tb,
        dataRange: current.value,
        mainstream: props.mt,
      },
    })
    .then((result: any) => {
      result.vns = '$' + parseNumberToK(result.vns);
      timeMap[current.value] = result;
    });
};
</script>
<style lang="less">
@import '@/style/flex.less';
@import '@/style/variables.less';
.token-time-range {
  margin-top: 8px;
  border-radius: 3px;
  border-left: none;
  background: var(--td--right-back-color-2);
  .right-range-box {
    display: flex;
    // border: 1px solid var(--td-Search-info-border-bottom-2);
    .right-range-btn {
      width: 25%;
      height: 35px;
      color: var(--new-color-3);
      border: var(--new-border-2);
      background: var(--td--right-back-color-2);
      border-radius: 0;
      margin: 0;
    }
    .active {
      background: #287eff;
      color: white;
    }
    & > :first-child {
      border-top-left-radius: @border-radius;
    }
    & > :last-child {
      border-top-right-radius: @border-radius;
    }
    & > :not(:first-child) {
      border-left: none;
    }
  }
  .time-range-data {
    padding: 2px 6px;
    .dj(space-between);
    border: var(--new-border-2);
    border-top: none;
    border-bottom-left-radius: @border-radius;
    border-bottom-right-radius: @border-radius;
    .label {
      padding-top: 12px;
      color: var(--td-text-color-secondary);
      font-size: 12px;
      margin-bottom: 6px;
    }
    .value {
      color: var(--td-text-color-primary);
      font-size: 12px;
      text-align: center;
      margin-bottom: 6px;
      &.new {
        color: #23ab94;
      }
    }
  }
}
</style>
