<template>
  <div class="c-four-params flex flex-wrap whitespace-nowrap">
    <div class="param">
      <div
        class="text-text-color text-xs mt-2.5 ml-7"
        style="margin-bottom: 2px;"
      >
        {{ $t('lang.address.totalReception') }}
      </div>
      <div
        class="text-title-color text-sm font-bold ml-7 overflow-hidden overflow-ellipsis"
        ref="a1"
      >
        <span ref="a2">{{ receive | filterAmount }}YCC</span>
      </div>
    </div>
    <div class="param">
      <div
        class="text-text-color text-xs mt-2.5 ml-7"
        style="margin-bottom: 2px;"
      >
        {{ $t('lang.address.totalSent') }}
      </div>
      <div
        class="text-title-color text-sm font-bold ml-7 overflow-hidden overflow-ellipsis"
        ref="b1"
      >
        <span ref="b2">{{ send | filterAmount }}YCC</span>
      </div>
    </div>
    <div class="param">
      <div
        class="text-text-color text-xs mt-2.5 ml-7"
        style="margin-bottom: 2px;"
      >
        {{ $t('lang.address.totalValue') }}
      </div>
      <div
        class="text-title-color text-sm font-bold ml-7 overflow-hidden overflow-ellipsis"
        ref="c1"
      >
        <span ref="c2">
          {{ value | filterMoney }}{{ $t('lang.price.dollar') }}
        </span>
      </div>
    </div>
    <div class="param">
      <div
        class="text-text-color text-xs mt-2.5 ml-7"
        style="margin-bottom: 2px;"
      >
        {{ $t('lang.block.txCount') }}
      </div>
      <div
        class="text-title-color text-sm font-bold ml-7 overflow-hidden overflow-ellipsis"
        ref="d1"
      >
        <span ref="d2">
          {{ txCount }}
        </span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    receive: [Number, Object],
    send: Number,
    value: Number,
    txCount: Number,
  },
  mounted() {
    this.setFontSize()
  },
  watch: {
    receive() {
      this.setFontSize()
    },
    send() {
      this.setFontSize()
    },
    value() {
      this.setFontSize()
    },
    txCount() {
      this.setFontSize()
    },
  },
  methods: {
    setFontSize() {
      const father = this.$refs.a1 as HTMLElement
      const a = this.$refs.a2 as HTMLElement
      const b = this.$refs.b2 as HTMLElement
      const c = this.$refs.c2 as HTMLElement
      const d = this.$refs.d2 as HTMLElement
      ;[a, b, c, d].forEach((el: HTMLElement) => {
        if (el.offsetWidth >= father.offsetWidth) {
          el.style.fontSize = '10px'
        }
      })
    },
  },
})
</script>
<style lang="scss" scoped>
.param {
  width: 50%;
  flex-shrink: 0;
  height: 55px;
  background: #ffffff;
  border-radius: 2px;
}
</style>
