<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">{{ filterNum(receive / 1e8) }}</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">{{ filterNum(send / 1e8) }}</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">
          {{ filterNum(Number(value / 1e8).toFixed(2))
          }}{{ $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 | filterNum }}
        </span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { filterNum } from "@/utils/utils";
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: {
    filterNum,
    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;
      let beSmall = false;
      [a, b, c, d].some((el: HTMLElement) => {
        if (el.offsetWidth >= father.offsetWidth) {
          beSmall = true;
        }
      });
      beSmall &&
        [a, b, c, d].forEach((el: HTMLElement) => {
          el.style.fontSize = "10px";
        });
    },
  },
});
</script>
<style lang="scss" scoped>
.param {
  width: 50%;
  flex-shrink: 0;
  height: 55px;
  background: #ffffff;
  border-radius: 2px;
}
</style>
