<template>
  <div class="assets-details-con bg-grey">
    <m-nav-bar title="收款" background="transparent" light />
    <div class="assets-operation-con">
      <div class="card-con">
        <div class="assets-name flex-default">
          <div class="m-icon" />
          <div class="text">
            {{ userAssets.coin === "mallCoin" ? "积分" : userAssets.coin }}
          </div>
        </div>
        <div class="assets-number">
          <div class="tips">可用余额</div>
          <div class="number">
            {{ userAssets.amount }}
            <span class="unit">
              {{ userAssets.coin === "mallCoin" ? "" : userAssets.coin }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="assets-operation-con" style="margin-top: 10px">
      <div class="card-con" style="padding: 0">
        <div class="QR-code">
          <div class="img">
            <div
              ref="qrcode"
              class="codeImg"
              id="qrCode"
            >
            </div>
          </div>
          <div class="address" @click="handleCopy(userAssets.address)">
            {{ userAssets.address }} <span class="copy">复制</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      // size: uni.upx2px(28),
      coin: "BASE",
      userAssets: {},
      urlValue: "",
      qrImg: "",
    };
  },
  created() {
    this.requestData();
  },
  methods: {
   creatQrcode(urlValue) {
      new QRCode(this.$refs.qrcode, {
        width: 136,
        height: 136, // 高度
        text: urlValue,
        correctLevel : QRCode.CorrectLevel.H 
      });
    },
    requestData() {
      this.$showLoading();
      this.$api({
        apiName: "getOwnAsset",
        postData: { coin: this.coin },
        success: (res) => {
          this.userAssets = res;
          this.urlValue = `/pages/user-center/myassets/transfer-accounts?otherAddress=${this.userAssets.address}`;
          setTimeout(() => {
            this.creatQrcode(res.address);
          }, 100);
        },
        complete: this.$hideLoading,
      });
    },
    qrR(src) {
      this.qrImg = src;
    },
  },
};
</script>
<style lang="less">
@import "../../../components/css/assets-and-integral.less";
.assets-details-con {
  .assets-operation-con {
    margin-top: 65px;
    // width: 100%;
    .card-con {
      margin: 0 auto;
      background-color: #ffffff;
      padding: 0 26px;
      width: 343px;
      border-radius: 6px;
      .assets-name {
        padding: 20px 0;
        .m-icon {
          width: 29px;
          height: 29px;
          background-color: #aeaeae;
          border-radius: 50%;
          margin-right: 11px;
        }
        .text {
          font-size: 16px;
          line-height: 29px;
          font-weight: 700;
        }
      }
      .assets-number {
        padding-bottom: 27px;
        .tips {
          font-size: 11px;
          color: #666666;
          line-height: 16px;
        }
        .number {
          font-size: 26px;
          font-weight: bold;
          line-height: 31px;
          .unit {
            font-size: 15px;
            font-weight: normal;
            margin-left: 5px;
          }
        }
      }
      .QR-code {
        padding: 36px 82px;
        .img {
          width: 136px;
          height: 136px;
          // background-color: #aeaeae;
          margin: 0 auto 10px;
        }
        .address {
          word-wrap: break-word;
          word-break: break-all;
          font-size: 12px;
          line-height: 17px;
          .copy {
            font-size: 10px;
            color: #dd2e41;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>
