<template>
  <div class="container">
    <div class="top flex items-center">
      <div class="address_label mr-2.5 my-title">
        {{ $t('lang.address.address') }}
      </div>
      <div class="address_value mr-2.5">
        {{ $route.query.address }}
      </div>
      <copy-btn :copyTxt="$route.query.address" class="mr-2.5">
        {{ $t('lang.components.copy') }}
      </copy-btn>
      <div class="little-qrcode flex items-center justify-center">
        <Popover placement="right" trigger="click">
          <canvas id="qrcode" style="margin: 13px;"></canvas>
          <img
            slot="reference"
            src="@/assets/images/blockChainBrowser/address/qrcodeIcon.png"
            alt=""
            class="w-5 h-5 cursor-pointer"
          />
        </Popover>
      </div>
    </div>
    <div class="flex">
      <Balance class="flex-shrink-0"></Balance>
      <div class="w-full">
        <card-show-trade-in-total
          :list="tradeInTotalList"
        ></card-show-trade-in-total>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import VueTypedMixins from 'vue-typed-mixins'
import CopyBtn from '../../CopyBtn.vue'
import { Popover } from 'element-ui'
import AddressOverview from '@/mixin/componentsMixin/AddressOverview'
import Balance from './Balance.vue'
import CardShowTradeInTotal from './CardShowTradeInTotal.vue'
export default VueTypedMixins(AddressOverview).extend({
  components: { CopyBtn, Popover, Balance, CardShowTradeInTotal },
})
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  height: 440px;
  background: #ffffff;
  box-shadow: 0px 2px 15px 0px rgba(31, 52, 112, 0.06);
  border-radius: 4px;
  .top {
    height: 80px;
    padding-left: 30px;
  }
  .address_value {
    font-size: 18px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #2545cb;
  }
  .little-qrcode {
    width: 30px;
    height: 30px;
    background-color: rgba(37, 69, 203, 0.1);
    border-radius: 4px;
  }
}
</style>
<style>
.el-popover,
.el-popper {
  z-index: 3001 !important;
}
</style>
