<template>
  <div class="c-four-params flex flex-wrap">
    <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">
        {{ receive | filterAmount }} YCC
      </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">
        {{ send | filterAmount }} YCC
      </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">
        {{ value | filterMoney }} {{ $t('lang.price.dollar') }}
      </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">
        {{ txCount }}
      </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,
  },
})
</script>
<style lang="scss" scoped>
.param {
  width: 50%;
  flex-shrink: 0;
  height: 55px;
  background: #ffffff;
  border-radius: 2px;
}
</style>
