<template>
  <view class="container">
    <!-- 添加ref以便获取DOM -->
    <view class="imgBox" ref="captureElement" v-if="!generatedImage">
      <view class="imgContainer">
        <image
          style="display: block;"
          src="@/static/registerBg.png"
          mode="widthFix"
          @load="handleBgImageLoad"
          @error="handleBgImageError"
        ></image>
        <!-- 二维码容器 -->
        <view class="qrcode-container">
          <canvas 
            canvas-id="qrcode" 
            class="qrcode-canvas"
            :style="{width: qrcodeSize + 'px', height: qrcodeSize + 'px'}"
          ></canvas>
        </view>
      </view>
    </view>
    <!-- 添加生成的图片预览 -->
	 <view class="preview-container" v-if="generatedImage">
		<image  :src="generatedImage" mode="widthFix" class="preview-image"></image>
	</view>
    
    <view class="bottomBox">
      长按保存图片分享给好友
    </view>
  </view>
</template>

<script>
import * as environment from "@/environments/environment";
import UQRCode from 'uqrcodejs';
import { elementToImage } from '@/util/htmlToImage';
import registerBg from '@/static/registerBg.png'

export default {
  data() {
    return {
      companyInfo: environment.companyInfo,
      imgType: environment.companyInfo.imgType,
      baseURL: environment.baseURL,
      shareId: '',
      invitationCode: '',
      codeUrl: '',
      loginType: '',
      userInfo: {},
      qrcodeSize: 100, // 二维码大小（单位px）
      generatedImage: '', // 生成的图片
      isBgImageReady: false, // 背景图片是否准备就绪
      retryCount: 0, // 重试次数
      maxRetryCount: 3 // 最大重试次数
    }
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userinfodataForm')
    this.loginType = uni.getStorageSync('loginType')
    if(!this.loginType || this.loginType == 'visitor'){
      this.codeUrl = `${this.baseURL}/pages/index/index`
    } else {
      this.codeUrl = `${this.baseURL}/pages/index/index?invitationCode=${this.userInfo.invitationCode}&inviteUserId=${this.userInfo.userId}`
    }
     // 1. 首先检查是否有缓存的图片
      const cachedImage = uni.getStorageSync('savedShareImage');
      if (cachedImage) {
        this.generatedImage = cachedImage;
        return; // 如果有缓存，直接使用，不再执行后续生成逻辑
      }
    // 重置状态
    this.isBgImageReady = false;
    this.retryCount = 0;
    
    // 开始加载背景图片（由@load事件触发后续流程）
    console.log('开始加载背景图片...');
  },
  methods: {
    // 背景图片加载成功
    handleBgImageLoad() {
      console.log('背景图片加载完成');
      this.isBgImageReady = true;
      this.generateQrcodeAndCapture();
    },
    
    // 背景图片加载失败
    handleBgImageError() {
      console.error('背景图片加载失败');
      // 即使失败也继续流程，可能会有默认背景
      this.isBgImageReady = true;
      this.generateQrcodeAndCapture();
    },
    
    // 顺序执行：生成二维码 -> 截图
    async generateQrcodeAndCapture() {
		// 再次检查缓存（防止并发情况）
		    if (uni.getStorageSync('savedShareImage')) {
		      return;
		    }
      try {
        uni.showLoading({
          title: '准备生成分享图...'
        });
        
        // 1. 先生成二维码
        console.log('开始生成二维码...');
        await this.makeQrcode();
        console.log('二维码生成完成');
        
        // 2. 等待500ms确保渲染完成
        await new Promise(resolve => setTimeout(resolve, 500));
        
        // 3. 执行截图
        console.log('开始截图...');
        await this.captureImage();
        console.log('截图完成');
        
        uni.hideLoading();
      } catch (error) {
        console.error('生成分享图失败:', error);
        uni.hideLoading();
        this.retryGenerate();
      }
    },
    
    // 重试机制
    retryGenerate() {
      if (this.retryCount < this.maxRetryCount) {
        this.retryCount++;
        const delay = 1000 * this.retryCount;
        console.log(`第${this.retryCount}次重试，${delay}ms后重试...`);
        
        uni.showToast({
          title: `生成中，请稍候...(${this.retryCount}/${this.maxRetryCount})`,
          icon: 'none',
          duration: delay
        });
        
        setTimeout(() => {
          this.generateQrcodeAndCapture();
        }, delay);
      } else {
        uni.showToast({
          title: '生成分享图失败，请稍后再试',
          icon: 'none'
        });
      }
    },
    
    // 生成二维码
    makeQrcode() {
      return new Promise((resolve, reject) => {
        // 创建实例
        const qr = new UQRCode();
        
        // 设置二维码内容
        qr.data = this.codeUrl;
        
        // 设置二维码大小
        qr.size = this.qrcodeSize;
        
        // 设置前景色（二维码颜色）
        qr.foregroundColor = '#000000';
        
        // 设置背景色
        qr.backgroundColor = '#FFFFFF';
        
        // 设置边距
        qr.margin = 10;
        
        // 设置纠错等级
        qr.errorCorrectLevel = UQRCode.errorCorrectLevel.H;
        
        try {
          // 调用制作二维码方法
          qr.make();
          
          // 获取canvas上下文
          const ctx = uni.createCanvasContext('qrcode', this);
          
          // 清空画布
          ctx.clearRect(0, 0, this.qrcodeSize, this.qrcodeSize);
          
          // 将二维码绘制到canvas上
          qr.canvasContext = ctx;
          qr.drawCanvas();
          
          // 绘制完成
          ctx.draw(true, () => {
            console.log('二维码绘制完成');
            resolve();
          });
        } catch (err) {
          reject(err);
        }
      });
    },
    
    // 截图方法
    async captureImage() {
      try {
        uni.showLoading({
          title: '正在生成图片...'
        });
        
        // 获取DOM元素（在H5环境下）
        const element = this.$refs.captureElement.$el;
        
        // 调用工具函数生成图片
        const imageData = await elementToImage(element);
        
        this.generatedImage = imageData;
        // 将生成的图片保存到本地存储
        uni.setStorageSync('savedShareImage', imageData);
      } catch (error) {
        console.error('截图失败:', error);
        throw error; // 抛出错误以便外部捕获
      } finally {
        uni.hideLoading();
      }
    },
    
    saveImage(base64Data) {
      // 实现保存图片到相册的逻辑
      // 注意：在H5中可能需要不同的处理方式
      if (uni.downloadFile) {
        uni.downloadFile({
          url: base64Data,
          success: (res) => {
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                  uni.showToast({
                    title: '保存成功',
                    icon: 'success'
                  });
                },
                fail: (err) => {
                  console.error('保存失败:', err);
                  uni.showToast({
                    title: '保存失败',
                    icon: 'none'
                  });
                }
              });
            }
          },
          fail: (err) => {
            console.error('下载图片失败:', err);
          }
        });
      } else {
        // H5环境下的处理方式
        const link = document.createElement('a');
        link.href = base64Data;
        link.download = 'share-image.png';
        link.click();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  .imgBox {
    position: relative;
    .imgContainer {
      position: relative;
      .qrcode-container {
        position: absolute;
        bottom: 10rpx;
        right: 10rpx;
        background: #fff;
        padding: 10rpx;
        border-radius: 10rpx;
        box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
        .qrcode-canvas {
          display: block;
        }
      }
    }
  }
  .bottomBox {
    // flex: 1;
	border-radius: 20rpx 20rpx 0 0;
	height: 300rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fff;
    font-size: 28rpx;
    button {
      margin-top: 20rpx;
    }
  }
  .preview-container{
	  box-sizing: border-box;
	  flex: 1;
	  padding: 30rpx;
	  .preview-image {
	    width: 100%;
	    
	  }
  }
  
  
}

</style>