<template>
  <!-- 引导分享蒙版 -->
  <view class="guide-share-mask">
    <view class="mask" />
    <view
      class="guide-share-close"
      @tap="close"
    >
      <image
        src="/static/images/close.png"
      />
    </view>
    <!-- H5: 微信浏览器，引导用户右上角分享 -->
    <view
      v-if="isWechat"
      class="guide-content"
    >
      <view class="share-img">
        <image src="/static/images/shareIcon.png" />
      </view>
      <view class="share-word">
        <view class="big-word">
          立即分享给好友
        </view>
        <view class="small-word">
          点击屏幕右上角将本商品分享给好友
        </view>
      </view>
    </view>
    <!-- 普通浏览器，生成链接二维码 -->
    <view
      v-else
      class="guide-qrcode"
    >
      <view class="guide-main">
        <image
          :src="qrSrc"
        />
        <view
          class="guide-copy-btn"
          @tap="copyLink"
        >
          <text>复制链接</text>
        </view>
      </view>
    </view>
  </view>
  <!-- 引导分享蒙版 end -->
</template>

<script setup>
import uniCopy from '@/js_sdk/uni-copy.js'
import Qr from '@/utils/wxqrcode.js'

const emits = defineEmits(['hideGuideShare'])
const props = defineProps({
  isWechat: {
    type: Boolean,
    default: false
  },
  qrLink: {
    type: String,
    default: ''
  }
})

onMounted(() => {
  if (!props.isWechat && props.qrLink) {
    drawQrCode()
  }
})

// 关闭
const close = () => {
  emits('hideGuideShare', false)
}

// 绘制二维码
const qrSrc = ref('') // 生成的二维码路径
const drawQrCode = () => {
  qrSrc.value = Qr.createQrCodeImg(props.qrLink, { size: 175, typeNumber: 10 })
}

// 复制链接
const copyLink = () => {
  uniCopy({
    content: props.qrLink,
    success: (res) => {
      uni.showToast({
        title: res,
        icon: 'none'
      })
    },
    error: (e) => {
      uni.showToast({
        title: e,
        icon: 'none',
        duration: 3000
      })
    }
  })
}

</script>

<style lang="scss" scoped>
/* 引导蒙版 */
.guide-share-mask {
  position: fixed;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.guide-share-mask .mask {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
}
.guide-share-mask .guide-share-close {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  top: 40rpx;
  right: 40rpx;
  z-index: 99;
}
.guide-share-mask .guide-share-close > image {
  width: 100%;
  height: 100%;
}
.guide-share-mask .guide-content {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 100%;
  height: auto;
}
.guide-share-mask .guide-content .share-img {
  display: block;
  width: 400rpx;
  height: 400rpx;
  margin-top: 60rpx;
  margin-bottom: 30rpx;
  margin-left: 35%;
}
.guide-content .share-img image {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.guide-content .share-word {
  display: block;
  color: #fff;
  text-align: center;
}
.guide-content .share-word .big-word {
  font-size: 32rpx;
}
.guide-content .share-word .small-word {
  font-size: 26rpx;
  line-height: 2em;
}

/* 普通H5浏览器二维码 */
.guide-qrcode {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.guide-main {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.guide-main > image {
  width: 350rpx;
  height: 350rpx;
  margin-top: 50%;
}
.guide-copy-btn {
  background-color: #fff;
  margin-top: 60rpx;
  border-radius: 50rpx;
  border: #fff solid 2rpx;
  padding: 10rpx 30rpx;
  font-size: 28rpx;
}
</style>
