<template>
  <div class="b-container">
    <img
      src="@/assets/images/blockChainBrowser/address/yccIcon.png"
      class="yccIcon"
      alt=""
    />
    <div class="balance-label">
      {{ $t("lang.address.balance") }}
    </div>
    <div class="balance-value">{{ filterNum(balance / 1e8) }}</div>
    <div class="text-sm text-white" style="margin-top: 10px">
      {{ $t("lang.address.freeze") }}
      <span class="ml-2">
        {{ filterNum(frozen / 1e8) }}
      </span>
    </div>
    <Select
      style="margin-top: 73px"
      :selectedValue="selectedValue"
      :optionsList="optionsList"
      :searchPlaceholder="$t('lang.searchCurrency')"
      @change="handleSelectChange"
    ></Select>
  </div>
</template>

<script lang="ts">
import { filterNum } from "@/utils/utils";
import VueTypedMixins from "vue-typed-mixins";
import Select from "../../CurrencySelect.vue";
export default VueTypedMixins().extend({
  components: { Select },
  props: {
    balance: [Number, Object],
    selectedValue: String,
    frozen: [Number, Object],
    optionsList: Array,
    handleSelectChange: Function,
  },
  methods: {
    filterNum,
  },
});
</script>

<style scoped lang="scss">
.b-container {
  width: 380px;
  height: 360px;
  background-color: #2545cb;
  border-radius: 20px;
  background-image: url("../../../../assets/images/blockChainBrowser/address/balanceBg.png");
  background-position: right bottom;
  background-size: 281px 302px;
  background-repeat: no-repeat;
  padding-top: 60px;
  padding-left: 28px;

  .yccIcon {
    width: 30px;
    height: 30px;
  }
  .balance-label {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-top: 20px;
  }
  .balance-value {
    font-size: 32px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #ffffff;
    line-height: normal;
    margin-top: 10px;
  }
}
</style>
