<script>
import { BASE_URL, IMAGE_BASE_URL } from '@/utils/config';

export default {
  data() {
    return {
      imagePath: '',
      processedImage: '',
      isCanvasReady: false,
      ctx: null // 存储canvas上下文
    }
  },
  mounted() {
    // 组件挂载后初始化canvas上下文
    this.$nextTick(() => {
      setTimeout(() => {
        this.ctx = uni.createCanvasContext('myCanvas', this);
        console.log('Canvas上下文初始化完成');
      }, 100);
    });
  },
  methods: {
    // 上传图片
    uploadImage() {
      const that = this;
      uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        success: function(res) {
          that.imagePath = res.tempFilePaths[0];
          that.drawImageToCanvas();
        }
      });
    },
    
    // 将图片绘制到Canvas
    drawImageToCanvas() {
      const that = this;
      
      // 确保ctx存在
      if (!this.ctx) {
        this.ctx = uni.createCanvasContext('myCanvas', this);
      }
      
      // 清空Canvas
      this.ctx.clearRect(0, 0, 300, 300);
      
      // 绘制图片
      uni.getImageInfo({
        src: that.imagePath,
        success: function(res) {
          that.ctx.drawImage(res.path, 0, 0, 300, 300);
          that.ctx.draw(true, () => {
            console.log('图片绘制完成');
            that.isCanvasReady = true;
            
            // 重要：添加额外延迟确保Canvas完全渲染
            setTimeout(() => {
              uni.showToast({
                title: '图片已加载，可以处理',
                icon: 'success'
              });
            }, 200);
          });
        },
        fail: function(err) {
          console.error('获取图片信息失败', err);
        }
      });
    },
    
    // 处理图片（移除白色背景）
    processImage() {
      if (!this.isCanvasReady) {
        uni.showToast({
          title: '请先上传图片',
          icon: 'none'
        });
        return;
      }
      
      const that = this;
      uni.showLoading({
        title: '处理中...',
        mask: true
      });
      
      // 增加延迟时间确保Canvas完全渲染
      setTimeout(() => {
        // 获取Canvas像素数据
        uni.canvasGetImageData({
          canvasId: 'myCanvas',
          x: 0,
          y: 0,
          width: 300,
          height: 300,
          success: function(res) {
            const data = res.data;
            
            // 遍历像素数据，将白色（或接近白色）变为透明
            for (let i = 0; i < data.length; i += 4) {
              const r = data[i];
              const g = data[i + 1];
              const b = data[i + 2];
              
              // 判断是否为白色或接近白色
              if (r > 200 && g > 200 && b > 200) {
                data[i + 3] = 0; // 设置Alpha通道为0
              }
            }
            
            // 将处理后的像素数据放回Canvas
            uni.canvasPutImageData({
              canvasId: 'myCanvas',
              x: 0,
              y: 0,
              width: 300,
              height: 300,
              data: data,
              success: function() {
                // 将Canvas内容转换为图片
                that.canvasToImage();
              },
              fail: function(err) {
                uni.hideLoading();
                console.error('像素数据放回失败', err);
              }
            });
          },
          fail: function(err) {
            uni.hideLoading();
            console.error('获取像素数据失败', err);
            // 调试信息：检查canvas状态
            that.checkCanvasStatus();
          }
        });
      }, 500); // 增加延迟到500ms
    },
    
    // 检查Canvas状态的方法
    checkCanvasStatus() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#myCanvas')
        .boundingClientRect()
        .exec((res) => {
          if (res[0]) {
            console.log('Canvas元素信息:', res[0]);
          } else {
            console.log('Canvas元素未找到');
          }
        });
    },
    
    // 将Canvas转换为图片
    canvasToImage() {
      const that = this;
      
      // 增加延迟时间
      setTimeout(() => {
        uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success: function(res) {
            that.processedImage = res.tempFilePath;
            uni.hideLoading();
            
            console.log("处理后的图片路径:", res.tempFilePath);
            
            // 触发自定义事件，让父组件处理上传
            that.$emit('image-processed', res.tempFilePath);
          },
          fail: function(err) {
            uni.hideLoading();
            console.error('Canvas转换失败', err);
          }
        });
      }, 300);
    },
    
    // 可选：添加重新初始化方法
    reinitializeCanvas() {
      this.ctx = null;
      this.isCanvasReady = false;
      this.$nextTick(() => {
        setTimeout(() => {
          this.ctx = uni.createCanvasContext('myCanvas', this);
          console.log('Canvas重新初始化完成');
        }, 100);
      });
    }
  }
}
</script>