<template>
  <div class="assets-transfer-detail-con bg-grey">
    <m-nav-bar title="商品通证详情" background="transparent" light />
    <div class="assets-details-top">
      <div class="top_content">
        <div class="header">
          <div class="left">
            <div class="m-icon" style="border-radius: 50%">
              <img :src="userAssets.skuVo ? userAssets.skuVo.thumb : ''" />
            </div>
            <div class="text">
              <div>
                {{ userAssets.skuVo ? `${userAssets.skuVo.name}` : "" }}
              </div>
              <div>{{ userAssets.coin }}</div>
            </div>
          </div>
           <!-- <div class="right" @click="previewImage">
            <div class="code-img" />
            <div
              ref="qrcodeLarge"
              class="qrcodeLarge"
              id="qrcodeLarge"
              style="position: absolute; left: -9999px"
            />
          </div> -->
        </div>
        <div class="content">
          <div class="item">
            <div class="my-points-item">
              <div class="label">规格：</div>
              <div class="value">{{ skuLabel }}</div>
            </div>
            <div class="my-points-item">
              <div class="label">成交单价：</div>
              <div class="value">{{ skuData.originalPrice }}元</div>
            </div>
          </div>
          <div class="item">
            <div class="my-points-item">
              <div class="label">可用：</div>
              <div class="value">{{ userAssets.amount }}</div>
            </div>
            <div class="my-points-item">
              <div class="label">冻结：</div>
              <div class="value">{{ userAssets.frozen }}</div>
            </div>
          </div>
          <div class="item flex-default address">
            <div class="label">数字藏品哈希：</div>
            <div class="value flex-default">
              <div class="address-value">{{ userAssets.hash | hashFilter  }}</div>
              <span @click="handleCopy(userAssets.hash)">复制</span>
            </div>
          </div>
        </div>
        <div class="footer">
          <!-- <van-button
            class="pink"
            :disabled="!userAssets.amount"
            @click="handleWithdraw"
          >
            提货
          </van-button> -->
          <van-button
            type="primary"
            :disabled="!userAssets.amount"
            @click="handleTransferGift"
            block
          >
            转赠
          </van-button>
        </div>
      </div>
    </div>
    <div class="assets-details-tabs">
      <div class="tabs-title">交易记录</div>
      <div class="tabs-content">
        <m-tabs v-model="tabIndex" :tabs="tabList" class="tab-list" />
        <van-swipe
          ref="assetsSwipe"
          @change="swipeChange"
          class="assets-swiper"
          :loop="false"
          :show-indicators="false"
        >
          <van-swipe-item
            v-for="(item, i) of tabList"
            :key="`swiper-item-${i}-${item.type}`"
          >
            <scroll-details
              :i="i"
              :coin="coin"
              :skuId="skuId"
              :tab="item"
              :index="tabIndex"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <van-popup
      v-model="showPopup"
      round
      closeable
      @click-overlay="overlay"
      @click-close-icon="overlay"
    >
      <div class="qrcode-address">
        <div class="title">商品通证地址</div>
        <div ref="qrcodeLarge" class="qrcodeLarge" id="qrcodeLarge"></div>
        <div class="address-value" @click="handleCopy(userAssets.address)">
          {{ userAssets.address }}
          <!-- <i class="copy"></i> -->
        </div>
      </div>
    </van-popup>

  </div>
</template>

<script>
import ScrollDetails from "./scroll-details.vue";
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
import { ImagePreview } from "vant";
export default {
  components: {
    ScrollDetails,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  data() {
    return {
      tabIndex: 0,
      tabList: [
        { name: "全部", payment: "" },
        // { name: "提货", payment: "delivery" },
        { name: "转赠", payment: "transferGive" },
        // { name: "受赠", payment: "" },
      ],
      userAssets: {},
      qrCode: "",
      coin: "",
      skuId: "",
      tabName: null,
      showPopup: false,
    };
  },
  computed: {
    skuData() {
      return this.userAssets.skuVo || {};
    },
    skuLabel() {
      if (this.skuData.skuProps) {
        return this.skuData.skuProps.map((item) => item.propVal).join(" ");
      }
    },
  },
  created() {
    let { coin, tabName, skuId } = this.$route.query;
    this.skuId = skuId;
    if (coin) {
      this.coin = coin;
      this.requestData();
    }
    this.tabName = tabName;
  },
  watch: {
    tabIndex(val) {
      this.$refs.assetsSwipe.swipeTo(val);
    },
  },
  methods: {
    previewImage() {
     this.showPopup = true;
      this.$nextTick(() => {
        new QRCode(this.$refs.qrcodeLarge, {
          width: 190,
          height: 190, // 高度
          text: this.userAssets.address,
          correctLevel: QRCode.CorrectLevel.H,
        });
      });

    },
    overlay() {
      this.$refs.qrcodeLarge.innerHTML = "";
    },

    // creatQrcode(urlValue) {
    //   new QRCode(this.$refs.qrcode, {
    //     width: 200,
    //     height: 200, // 高度
    //     text: urlValue,
    //     correctLevel: QRCode.CorrectLevel.H,
    //   });
    //   new QRCode(this.$refs.qrcodeLarge, {
    //     width: 200,
    //     height: 200, // 高度
    //     text: urlValue,
    //     correctLevel: QRCode.CorrectLevel.H,
    //   });
    //   this.createPicture();
    // },
    // createPicture() {
    //   html2canvas(this.$refs.qrcodeLarge, {
    //     //设置图片的背景颜色、宽度、高度
    //     backgroundColor: null,
    //     width: 200,
    //     height: 200,
    //   }).then((canvas) => {
    //     var qrImg = canvas.toDataURL("image/jpeg"); //这里转为图片方式
    //     this.qrImg = qrImg;
    //   });
    // },
    swipeChange(index) {
      this.tabIndex = index;
    },
    requestData() {
      this.$showLoading();
      this.$api({
        apiName: "getOwnAsset",
        postData: { coin: this.coin },
        success: (res) => {
          this.userAssets = res;
          // setTimeout(() => {
          //   this.creatQrcode(res.address);
          // }, 100);
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    handleWithdraw() {
      let query = { coin: this.coin };
      this.$router.push({ name: "assets-withdraw", query });
    },
    handleTransfer() {
      let query = { coin: this.coin };
      this.$router.push({ name: "assets-transfer", query });
    },
    handleTransferGift() {
      let query = { coin: this.coin };
      this.$router.push({ name: "assets-transfer-gift", query });
    },
  },
};
</script>
<style lang="less">
.assets-transfer-detail-con {
  height: 100%;
  width: 100%;
  background-image: url(~@/assets/img/assets-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  > div {
    width: 100%;
  }
  .m-nav-bar {
    flex-shrink: 0;
    margin-bottom: 18px;
  }
  .assets-details-top {
    flex-shrink: 0;
    .top_content {
      background-color: #ffffff;
      border-radius: 8px;
      width: 343px;
      padding: 25px 26px 20px;
      margin: 0 auto;
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #140603;
          line-height: 20px;
          font-weight: Bold;
          width: 100%;
          .m-icon {
            width: 29px;
            height: 29px;
            margin-right: 13px;
            flex-shrink: 1;
            img {
              object-fit: cover;
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .text {
            color: #2b2b3a;
            flex-shrink: 0;
            width: calc(~"100% - 70px");
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
       .right .code-img {
          width: 20px;
          height: 20px;
          background: url(~@/assets/img/qrcode.png);
          background-size: 100%;
        }
      }
      .content {
        margin-top: 15px;
        .item {
          display: flex;
          line-height: 1.6;
          .label {
            color: #999999;
            font-size: 12px;
            flex-shrink: 0;
          }
          .value {
            font-size: 12px;
            color: #140603;
            flex-shrink: 1;
            width: calc(~"100% - 42px");
            align-items: center;
            font-weight: bold;
            &.red {
              color: #dd2e41;
            }
            .address-value {
              flex-shrink: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-right: 8px;
            }
            span {
              // float: right;
              color: #2C66F5;
              font-size: 11px;
              flex-shrink: 0;
            }
          }
          .my-points-item {
            display: flex;
            width: 50%;
          }
        }
      }
      .footer {
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
        button {
          // width: 136px;
          height: 40px;
          font-size: 16px;
          border-radius: 5px;
          border: none;
        }
        .pink {
          background: #fef1f4;
          color: #dd2e41 !important;
        }
      }
    }
  }
  .assets-details-tabs {
    margin-top: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    width: 343px;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    .tabs-title {
      font-size: 17px;
      color: #140603;
      font-weight: bold;
      line-height: 52px;
      border-bottom: 1px solid #f1f1f1;
      text-indent: 26px;
      flex: 0;
    }
    .tabs-content {
      position: relative;
      flex-shrink: 1;
      display: flex;
      flex-direction: column;
      height: calc(~"100% - 52px");
      overflow: hidden;
      .m-tabs {
        flex-shrink: 0;
        border-bottom: none;
        .van-tab__text {
          font-weight: bold;
        }
        .van-tab--active .van-tab__text {
          color: @mall-font-color;
        }
      }
      .assets-swiper {
        height: 100%;
      }
      ::v-deep.mescroll-uni-fixed {
        position: relative;
        top: 44px;
      }

      ::v-deep.mescroll-uni-warp {
        flex-shrink: 1;
        // height: calc(~"100% - 44px");
        overflow-y: auto;
      }
      .list-wrap {
        padding-left: 26px;
        .list-item {
          border-bottom: 1px solid #f1f1f1;
          .item-top,
          .item-footer {
            justify-content: space-between;
            align-items: center;
            padding-right: 26px;
          }
          .item-top {
            padding-top: 6px;
            .number {
              font-size: 19px;
              color: #dcb329;
              line-height: 27px;
              font-family: DINAlternate-Bold;
              font-weight: bold;
              &.reduce {
                color: #140603;
              }
            }
            .status {
              font-size: 14px;;
              color: #140603;
              &.fail {
                color: #dd2e41;
              }
            }
          }
          .item-footer {
            color: #999999;
            margin-bottom: 6px;
            .address,
            .time {
              font-size: 12px;
            }
            .time {
              flex-shrink: 0;
            }
            .address {
              flex-shrink: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
   .van-popup {
    width: 90%;
  }

 .qrcode-address {
    width: 320px;
    padding: 18px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    > .title {
      font-size: 20px;
      font-weight: bold;
    }
    .qrcodeLarge {
      width: 200px;
      height: 200px;
      padding: 5px;
      display: flex;
      justify-content: center;
      margin-top: 32px;
      margin-bottom: 20px;
      border: 1px solid #e5e5e5;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .address-value {
      font-size: 12px;
      width: 259px;
      padding: 10px 15px;
      background: #f6f6f6;
      border-radius: 6px;
      word-wrap: break-word;
      word-break: break-all;
      color: #666666;
    }
    i.copy {
      flex-shrink: 0;
      margin-left: 4px;
      display: inline-block;
      background: url(https://xls-data-test.oss-cn-shanghai.aliyuncs.com/manage/img/20210914/20210914172331304_170133.png)
        center;
      background-size: cover;
      width: 16px;
      height: 16px;
      transform: translateY(3px);
    }
  }
}


</style>
