<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">{{ balance }} YCC</div>
    <Select
      style="margin-top: 103px;"
      :selectedValue="selectedValue"
      :optionsList="optionsList"
      :searchPlaceholder="$t('lang.searchCurrency')"
      @change="selectedValue = $event"
    ></Select>
  </div>
</template>

<script lang="ts">
import VueTypedMixins from 'vue-typed-mixins'
import Select from '../../CurrencySelect.vue'
import BalanceMixin from '@/mixin/componentsMixin/Balance'
export default VueTypedMixins(BalanceMixin).extend({
  components: { Select },
  props: {
    balance: Number,
  },
})
</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>
