<template>
  <div class="c-address-overview">
    <m-address-display class="mx-3.5"></m-address-display>
    <m-address-blue-card
      :balance="balance"
      :selectedValue="selectedValue"
      :optionsList="optionsList"
      :handleSelectChange="handleSelectChange"
      :forzen="frozen"
    ></m-address-blue-card>
    <m-four-params
      class="my-3.5"
      :receive="receive"
      :send="send"
      :value="value"
      :txCount="txCount"
    ></m-four-params>
    <m-address-balance-graph class="mx-3.5"></m-address-balance-graph>
  </div>
</template>
<script lang="ts">
import mAddressDisplay from './m-address-display.vue'
import VueTypedMixins from 'vue-typed-mixins'
import AddressOverview from '@/mixin/componentsMixin/AddressOverview'
import MAddressBlueCard from './m-address-blue-card.vue'
import MFourParams from './m-four-params.vue'
import MAddressBalanceGraph from './m-address-balance-graph.vue'
export default VueTypedMixins(AddressOverview).extend({
  props: {
    balance: Number,
    selectedValue: String,
    optionsList: Array,
    handleSelectChange: Function,
    frozen: Number
  },
  components: {
    mAddressDisplay,
    MAddressBlueCard,
    MFourParams,
    MAddressBalanceGraph,
  },
})
</script>
<style lang="scss" scoped>
.c-address-overview {
  background: #ffffff;
  box-shadow: 0px 1px 8px 0px rgba(31, 52, 112, 0.06);
  border-radius: 2px;
}
</style>
