<template>
  <div class="c-address-display flex items-center">
    <div class="text-text-color text-sm mr-3.5">
      {{ $t('lang.address.address') }}
    </div>
    <div class="text-darkBlue font-bold text-sm">
      {{ $route.query.address | filterHash(10) }}
    </div>
    <m-copy-btn :copyTxt="$route.query.address" class="ml-2 mr-5"></m-copy-btn>
    <div class="qrcodeBox flex items-center justify-center">
      <div class="qrcodeContainer">
        <Popover placement="bottom" trigger="click">
          <canvas id="qrcode" style="margin: 13px;"></canvas>
          <img
            slot="reference"
            :src="qrcodeIcon"
            class="w-full h-full"
            alt=""
          />
        </Popover>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import MCopyBtn from '@/components/mobile/m-copyBtn.vue'
import qrcodeIcon from '@/assets/images/blockChainBrowser/address/qrcodeIcon.png'
import { Popover } from 'element-ui'
import Vue from 'vue'
export default Vue.extend({
  components: { MCopyBtn, Popover },
  data() {
    return {
      qrcodeIcon,
    }
  },
})
</script>
<style lang="scss" scoped>
.c-address-display {
  height: 50px;
  .qrcodeBox {
    height: 25px;
    width: 25px;
    background-color: rgba(37, 69, 203, 0.1);
    .qrcodeContainer {
      width: 17px;
      height: 17px;
    }
  }
}
</style>
