<template>
  <div>
    <div class="section">
      <div class="title">
        <!-- 关键数据 -->
        {{ info.name }} {{ $t('product.l115') }}
      </div>
      <div class="row">
        <div class="col">
          <div class="lab">
            <!-- 排名 -->
            {{ $t('product.l116') }}
          </div>
          <div class="right" :class="{rank: (info.rank && info.rank < 4)}">
            No.{{ info.rank }}
          </div>
        </div>
        <div class="col">
          <div class="lab">
            <!-- 市值 -->
            {{ $t('exchange.l3') }}
          </div>
          <div class="right">
            ${{ info.circulation_supply ? marketFormat(info.circulation_supply * symbolInfo.ask) : '--' }}
          </div>
        </div>
        <div class="col">
          <div class="lab">
            <!-- 完全稀释市值 -->
            {{ $t('product.l117') }}
          </div>
          <div class="right">
            ${{ (info.full_diluted_market_cap) ? marketFormat(info.full_diluted_market_cap) : '--' }}
          </div>
        </div>
        <div class="col" v-if="Number(info.market_dominance)">
          <div class="lab">
            <!-- 市场占有率 -->
            {{ $t('product.l118') }}
          </div>
          <div class="right">
            {{ info.market_dominance }}%
          </div>
        </div>
        <div class="col">
          <div class="lab">
            <!-- 流通数量 -->
            {{ $t('product.l119') }}
          </div>
          <div class="right">
            {{ numToThousand(info.circulation_supply) }} {{ info.symbol }}
          </div>
        </div>
        <div class="col" v-if="info.max_supply">
          <div class="lab">
            <!-- 最大供给量 -->
            {{ $t('product.l120') }}
          </div>
          <div class="right">
            {{ numToThousand(info.max_supply) }} {{ info.symbol }}
          </div>
        </div>
        <div class="col">
          <div class="lab">
            <!-- 总量 -->
            {{ $t('product.l121') }}
          </div>
          <div class="right">
            {{ numToThousand(info.total_supply) }} {{ info.symbol }}
          </div>
        </div>
        <div class="col">
          <div class="lab">
            <!-- 发行日期 -->
            {{ $t('product.l122') }}
          </div>
          <div class="right">
            {{ getDate(info.issue_date) }}
          </div>
        </div>
        <div class="col">
          <div class="lab">
            <!-- 历史最高价 -->
            {{ $t('product.l123') }}
          </div>
          <div class="right" v-if="info.alltimehigh">
            ${{ $handleDigits(info.alltimehigh, symbolInfo.digits) }}
          </div>
        </div>
        <div class="col">
          <div class="lab">
            <!-- 历史最低价 -->
            {{ $t('product.l124') }}
          </div>
          <div class="right" v-if="info.alltimelow">
            ${{ $handleDigits(Number(info.alltimelow), symbolInfo.digits > 6 ? symbolInfo.digits : 6) }}
          </div>
        </div>
      </div>
      <div class="box" v-if="info.description">
        <div class="title">
          <!-- {{ symbolInfo.symbol }}简介 -->
          {{ $t('product.l125').replace('{p}', info.symbol || '') }}
        </div>
        <div class="text" @click="isShowMore = !isShowMore" :class="{'overflow-hidden': !isShowMore && overflowSign}" ref="text">
          <div v-html="info.description">
          </div>
          <span class="link" v-if="isShowMore && overflowSign">
            <!-- 收起 -->
            {{ $t('product.l108') }}<i class="el-icon-arrow-up"></i>
          </span>
          <div v-if="!isShowMore && overflowSign" class="show-more-btn link">
            <!-- 展开更多 -->
            {{ $t('product.l126') }}<i class="el-icon-arrow-down"></i>
          </div>
        </div>
      </div>
      <div class="box" v-if="info.official_website || info.whitepaper">
        <div class="title">
          <!-- 资源 -->
          {{ $t('product.l127') }}
        </div>
        <div class="btn-box flex">
          <a class="btn1" v-if="info.official_website" target="_blank" :href="info.official_website">
            <!-- 官方网址 -->
            {{ $t('product.l128') }}
          </a>
          <a class="btn1" v-if="info.whitepaper" target="_blank" :href="info.whitepaper">
            <!-- 白皮书 -->
            {{ $t('product.l129') }}
          </a>
        </div>
      </div>
    </div>
    <div class="tip">
      <!-- 免责声明：数据由CoinMarketCap提供，仅供参考。详情见 <span class="href">风险提示</span> -->
      {{ $t('product.l130') }} <span class="href" @click="$router.push('/statement/riskwarning')">{{ $t('product.l131') }}</span>
    </div>
  </div>
</template>
<script>
import { getCoinInfo } from "@/api/market";
export default {
  props: ['symbolInfo'],
  data () {
    return {
      info: {},
      isShowMore: false,
      overflowSign: false,
    }
  },
  created () {
    this.getCoinInfo()
  },
  methods: {
    getCoinInfo() {
      getCoinInfo({
        symbol: this.symbolInfo.symbol.replace('USD', '')
      }).then(res => {
        var info = (res || {})
        if ((this.language == 'zh-CN' || this.language == 'zh-TW') && info.description_cn) {
          info.description = info.description_cn
        }
        this.info = info
        if (this.info.description) {
          this.$nextTick(() => {
            this.getHeight()
          })
        }
      }).catch(() => {})
    },
    getHeight() {
      const textElement = this.$refs.text;
      const height = textElement.offsetHeight;
      this.overflowSign = (height > 66)
    },
    getDate(val) {
      if (val) {
        return val.split('T')[0]
      }
      return '--'
    },
    numToThousand(num) {
      if (!num || isNaN(Number(num))) {
        return '--'
      }
      var str = (Number(num) + '').split('.');
      var reg = /(?=(?!\b)(\d{3})+$)/g
      var data = str[0].replace(reg, ',')
      if (str[1]) {
        data += ('.' + str[1])
      }
      return data
    },
    marketFormat(value) {
      if (value) {
        if (this.language == 'zh-CN' || this.language == 'zh-TW') {
          if (value > 1000000000000) {
            // 万亿
            return Number((value / 1000000000000).toFixed(2)) + this.$t('product.l132')
          }
          if (value > 100000000) {
            // 亿
            return Number((value / 100000000).toFixed(2)) + this.$t('product.l9')
          }
          if (value > 10000) {
            // 万
            return Number((value / 10000).toFixed(2)) + this.$t('home.l11')
          }
          return Number((value).toFixed(2))
        }
        if (value > 1000000000000) {
          return Number((value / 1000000000000).toFixed(2)) + 'T'
        }
        if (value > 1000000000) {
          return Number((value / 1000000000).toFixed(2)) + 'B'
        }
        if (value > 1000000) {
          return Number((value / 1000000).toFixed(2)) + 'M'
        }
        return Number((value).toFixed(2))
      }
      return '--'
    },
  }
}
</script>
<style lang="less" scoped>
.section {
  background-color: var(--bg-);
  padding: 8px 16px 20px;
}
.title {
  padding-bottom: 4px;
}
.lab {
  color: #B6B6B6;
}
.row {
  .col {
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 8px;
    border-bottom: 1px solid #F6F6F6;
  }
  .lab {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
  }
  .right {
    text-align: right;
  }
  .rank {
    color: #FC6F30;
  }
}
.box {
  padding-top: 19px;
}
.text {
  position: relative;
  color: #888888;
  line-height: 22px;
  margin-top: 8px;
  &.overflow-hidden {
    max-height: 66px;
    overflow: hidden;
  }
  .show-more-btn {
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    min-width: 70px;
    padding: 0 3px;
    color: #FC6F30;
    background-color: #ffffff;
  }
  .link {
    font-size: 12px;
    color: #0F8DDF;
    cursor: pointer;
  }
}
.btn-box {
  padding-top: 12px;
  column-gap: 26px;
  row-gap: 12px;
  flex-wrap: wrap;
  .btn1 {
    min-width: 70px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #F6F6F6;
    padding: 7px 6px;
    color: #888888;
    text-decoration: none;
    cursor: pointer;
  }
}
.tip {
  border-top: 1px solid #F6F6F6;
  background-color: #fff;
  padding: 15px 6px;
  text-align: center;
  font-size: 10px;
  color: #888888;
  .href {
    color: #0F8DDF;
    cursor: pointer;
  }
}
</style>