<template>
  <view class="">
    <view class="w-qrcode">
      <w-qrcode
        :options="codeOptions"
        :opacity="0"
        ref="wQrcode"
        @generate="(e) => qrcodeResult(e)"
      ></w-qrcode>
    </view>

    <up-popup
      :show="show"
      bgColor="transparent"
      :safeAreaInsetBottom="false"
      :closeOnClickOverlay="true"
      @close="close"
      mode="center"
    >
      <view class="box">
        <view class="info">
          <view class="u-flex justify-center">
            <up-avatar size="214rpx" :src="shopUserInfo.headImg"></up-avatar>
          </view>
          <view
            class="u-m-t-48 font-14 font-700 color-333 text-center line-height-54"
          >
            <view>{{ shopUserInfo.nickName }} </view>
            <view>{{ desensitizePhone(shopUserInfo.phone) }}</view>
          </view>
          <view class="u-m-t-16 font-14 line-height-54 text-center">
            <text class="color-666">邀请码</text>
            <text class="u-m-l-16 u-m-r-16 color-333 font-16 font-700">{{
              inviteCode
            }}</text>
            <text class="" style="color: #fe6d11" @click="copyCode">复制</text>
          </view>
          <view class="u-flex justify-center" style="margin-top: 90rpx">
            <!-- <w-qrcode
              :options="codeOptions"
              :opacity="1"
              ref="wQrcode"
              @generate="(e) => qrcodeResult(e)"
            ></w-qrcode> -->
            <up-image width="322rpx" height="322rpx" :src="code"></up-image>
          </view>

          <view class="u-m-t-60 u-flex u-col-center justify-center">
            <view class="confirm" @click="save">保存图片</view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>
    
    <script setup>
import wQrcode from "@/uni_modules/wmf-code/components/w-qrcode/w-qrcode.vue";
import {desensitizePhone} from "@/utils/util.js";
import { ref } from "vue";
const props = defineProps({
  inviteCode: {
    type: String,
    default: "",
  },
  shopUserInfo: {
    type: Object,
    default: () => {},
  },
});
const codeOptions = ref({
  size: 200,
  code: props.inviteCode,
});
function copyCode() {
  uni.setClipboardData({
    data: props.inviteCode,
    success: function () {
      console.log("success");
    },
  });
}
const code = ref("");

function qrcodeResult(e) {
  console.log("qrcodeResult", e);
  code.value = e.img.tempFilePath;
  console.log("code", code.value);
}

const show = defineModel({
  type: Boolean,
  default: false,
});
const emits = defineEmits(["cancel", "confirm"]);
function close() {
  show.value = false;
  emits("cancel");
}
function save() {
  show.value = false;

  uni.saveImageToPhotosAlbum({
    filePath: code.value,
    success: function () {
      uni.showToast({
        title: "保存成功",
      });
    },
    fail: function () {
      uni.showToast({
        title: "保存失败",
      });
    },
  });

  emits("confirm", code.value);
}
</script>

<style lang="scss" scoped>
:deep(.info .canvas) {
  opacity: 1;
}
.border {
  border: 2rpx solid #d9d9d9;
  padding: 18rpx;
  border-radius: 4rpx;
}
.box {
  width: 638rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  .title {
    color: #000000;
    font-size: 32rpx;
    font-weight: 700;
  }
  .top {
    border-bottom: 2rpx solid #ededed;
  }
  .info {
    padding: 96rpx 40rpx 96rpx 40rpx;
    font-size: 28rpx;
  }
  .small-title {
    min-width: 84rpx;
    text-align: right;
  }
}

.cancel {
  padding: 14rpx 76rpx;
  border-radius: 36rpx;
  border: 2rpx solid #e8ad7b;
  color: #e8ad7b;
  font-size: 32rpx;
  font-weight: 400;
  white-space: nowrap;
  line-height: 48rpx;
}
.confirm {
  padding: 14rpx 76rpx;
  border-radius: 16rpx;
  background-color: #e8ad7b;
  border: 2rpx solid #e8ad7b;
  color: #fff;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 48rpx;
  white-space: nowrap;
}
.line-height-54 {
  line-height: 54rpx;
}
.w-qrcode {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: -1;
}
</style>
    