<template>
  <div class="token-info-wrapper">
    <div class="field-list">
      <div class="field-row">
        <div class="label">{{ $t('tokenInfo.dailyVolume') }}：</div>
        <div class="value">
          ${{ tokenInfo.sum_vn ? conversionNum(tokenInfo.sum_vn + '') : '-' }}
        </div>
      </div>
      <div class="field-row">
        <div class="label">{{ $t('TableList.pool') + tokenname }}：</div>
        <div class="value">
          {{ tokenInfo.wb ? conversionNum(tokenInfo.wb + '') : '-' }}
        </div>
      </div>
      <div class="field-row">
        <div class="label">{{ $t('tokenInfo.pooledUsdt') }}：</div>
        <div class="value">
          ${{ tokenInfo.ub ? conversionNum(tokenInfo.ub + '') : '-' }}
        </div>
      </div>
      <div class="field-row">
        <div class="label">{{ $t('tokenInfo.marketCap') }}：</div>
        <div class="value">
          ${{
            tokenInfo.marketCap ? conversionNum(tokenInfo.marketCap + '') : '-'
          }}
        </div>
      </div>
      <div class="field-row">
        <div class="label">{{ $t('tokenInfo.circSupply') }}：</div>
        <div class="value">
          {{ tokenInfo.supply ? conversionNum(tokenInfo.supply + '') : '-' }}
        </div>
      </div>
      <div class="field-row">
        <div class="label">{{ $t('tokenInfo.highestEver') }}：</div>
        <div class="value">{{ parseCoinAmount(tokenInfo.h) }}</div>
      </div>
      <div class="field-row">
        <div class="label">{{ $t('tokenInfo.lowestEver') }}：</div>
        <div class="value">{{ parseCoinAmount(tokenInfo.l) }}</div>
      </div>
      <div class="field-row">
        <div class="label">{{ $t('tokenInfo.holders') }}：</div>
        <div class="value">{{ tokenInfo.holders ?? '-' }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { parseCoinAmount, conversionNum } from '@/utils/tool';
import { filterChainObj } from '@/constants/UnifiedManagementChain';
const props = defineProps({
  tokenInfo: {
    type: Object as any,
    default: () => {},
  },
  currentPath: String,
});
// 当前币种名称
const tokenname = ref('');
watch(
  () => props.currentPath,
  (v) => {
    if (v) {
      let Obj = filterChainObj('value', v);
      tokenname.value = Obj.Currency[0];
    }
  },
  {
    immediate: true,
  }
);
</script>
<style lang="less">
@import '@/style/flex.less';
.token-info-wrapper {
  margin-top: 12px;
  .field-list {
    .field-row {
      padding: 4px 16px;
      font-size: 12px;
      .dj(space-between);
      &:hover {
        background-color: var(--td-bg-color-secondarycontainer-hover);
      }
      .label {
        padding-left: 10px;
        width: 40%;
        flex-shrink: 0;
        color: var(--td-text-color-secondary);
        font-family: fiveFont;
      }
      .value {
        width: 50%;
        color: var(--td-Search-info-color-1);
        font-family: fiveFont;
        text-align: right;
        padding-right: 12px;
      }
    }
  }
}
</style>
