<template>
  <div
    class="c-address-blue-card px-4 flow-root"
    :style="{
      backgroundImage: `url(${balanceBg})`,
    }"
  >
    <div class="flex items-center mt-7 justify-between">
      <div class="yccIcon">
        <img
          src="@/assets/images/blockChainBrowser/address/yccIcon.png"
          class="w-full h-full"
          alt=""
        />
      </div>
      <Select
        size="small"
        :optionPosition="'right'"
        :optionsList="optionsList"
        :selectedValue="selectedValue"
        :searchPlaceholder="$t('lang.searchCurrency')"
        @change="handleSelectChange"
      ></Select>
    </div>
    <div class="text-white mt-3.5 text-xs">
      {{ $t("lang.address.balance") }}
    </div>
    <div class="text-white mt-1 text-3xl font-bold">
      {{ filterNum(balance / 1e8) }}
    </div>
    <div class="text-white text-xs" style="margin-top: 5px">
      {{ $t("lang.address.freeze") }}
      {{ filterNum(forzen / 1e8) }}
    </div>
  </div>
</template>

<script lang="ts">
import Select from "@/components/pc/CurrencySelect.vue";
import balanceBg from "@/assets/images/blockChainBrowser/address/balanceBg-mobile.png";
import Vue from "vue";
import { filterNum } from "@/utils/utils";
export default Vue.extend({
  components: {
    Select,
  },
  props: {
    forzen: [Number, Object],
    balance: [Number, Object],
    selectedValue: String,
    optionsList: Array,
    handleSelectChange: Function,
  },
  methods: {
    filterNum,
  },
  data() {
    return {
      balanceBg,
    };
  },
});
</script>
<style lang="scss" scoped>
.c-address-blue-card {
  height: 180px;
  background-color: #2545cb;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 172px 151px;
  border-radius: 10px;
  .yccIcon {
    width: 25px;
    height: 25px;
  }
}
</style>
