<template>
  <div class="section">
    <div class="title">
      <!-- 存款信息 -->
      {{ $t('fund.l93') }}
    </div>
    <div class="row">
      <div class="lable">
        <!-- 数字货币 -->
        {{ $t('account.l33') }}
      </div>
      <div class="name">
        {{ info.from.currency }}
        <img class="copy" @click="copyText(info.from.currency)" src="/img/icon/copy.png" alt="极度证券">
      </div>
    </div>
    <div class="row">
      <div class="lable">
        <!-- 钱包地址 -->
        {{ $t('fund.l13') }}
      </div>
      <div class="name">
        {{ info.from.address }}
        <img class="copy" @click="copyText(info.from.address)" src="/img/icon/copy.png" alt="极度证券">
      </div>
    </div>
    <div class="row">
      <div class="lable">
        <!-- 二维码 -->
        {{ $t('fund.l94') }}
      </div>
      <div class="name">
        <img class="qr" :src="img" alt="极度证券">
      </div>
    </div>
    <div class="row">
      <div class="lable">
        <!-- 备注 -->
        {{ $t('fund.l12') }}
      </div>
      <div class="name">
        {{ info.from.currency }}
        <img class="copy" @click="copyText(info.from.currency)" src="/img/icon/copy.png" alt="极度证券">
      </div>
    </div>
  </div>
</template>
<script>
import { copyText } from '@/utils/index'
import QRCode from 'qrcode'
export default {
  props: ['info'],
  data () {
    return {
      img: ''
    }
  },
  created () {
    this.creatImg()
  },
  methods: {
    creatImg() {
      QRCode.toDataURL(this.info.from.address,{
        margin: 0,
        width: 157,
        height: 157
      }).then((url) => {
        this.img = url
      })
      .catch((err) => {
        console.error(err)
      })
    },
    copyText(text) {
      copyText(text)
    }
  }
}
</script>
<style lang="less" scoped>
.section {
  padding: 22px 18px 29px;
}
.title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-1-);
}
.row {
  display: flex;
  margin-top: 18px;
  align-items: flex-start;
  .lable {
    color: #A7A7A7;
    width: 102px;
  }
  .name {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    position: relative;
    word-break: break-all;
  }
  .copy {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 15px;
    cursor: pointer;
  }
  .qr {
    display: block;
    width: 157px;
  }
}
</style>