<template>
  <view class="sign-page" :class="{ 'landscape-mode': isRotated }">
    <view class="top-right" @click="goBack"><text class="back-text">返回</text></view>
    <canvas 
      canvas-id="signCanvas" 
      class="sign-canvas"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
      @mousedown="mouseStart"
      @mousemove="mouseMove"
      @mouseup="mouseEnd"
      @mouseleave="mouseEnd"
      :disable-scroll="true"
    ></canvas>
    <view class="bottom-actions">
      <view class="btn primary" @click="clearCanvas"><text class="btn-text">重试</text></view>
      <view class="btn primary" @click="saveSign"><text class="btn-text">我已同意并确认签名</text></view>
    </view>
  </view>
</template>

<script>
import { uploadUserImage } from '@/api/miao.js';

export default {
  data() {
    return {
      ctx: null,
      canvasWidth: 0,
      canvasHeight: 0,
      windowWidth: 0,
      windowHeight: 0,
      isRotated: false,
      isDrawing: false,
      hasSignature: false,
      uploading: false,
      canvasRect: null,
      userId: '',
      dpr: 1,
      offsetFix: { x: 0, y: 0 },
      points: [],
      rafId: 0,
      lastPointTime: 0
    }
  },
  
  onLoad(options) {
    // Check orientation
    try {
      const sys = uni.getSystemInfoSync();
      this.windowWidth = sys.windowWidth;
      this.windowHeight = sys.windowHeight;
      if (this.windowHeight > this.windowWidth) {
        this.isRotated = true;
      }
    } catch(e) {}
    
    this.initCanvas();
    // #ifdef H5
    const getUserIdFromUrl = () => {
      let id = ''
      const s = window.location.search || ''
      if (s) {
        const p = new URLSearchParams(s)
        id = p.get('user_id') || p.get('userId') || ''
      }
      if (!id && window.location.hash) {
        const hash = window.location.hash
        const qIndex = hash.indexOf('?')
        if (qIndex !== -1) {
          const q = hash.substring(qIndex + 1)
          const hp = new URLSearchParams(q)
          id = hp.get('user_id') || hp.get('userId') || ''
        }
      }
      if (!id) {
        const href = window.location.href || ''
        const m = href.match(/[?&]user_id=([^&#]+)/)
        if (m) id = decodeURIComponent(m[1])
      }
      return id
    }
    this.userId = (options && options.user_id) ? options.user_id : getUserIdFromUrl()
    console.log('===sign page -> userId===', this.userId)
    if (this.userId) {
      try { localStorage.setItem('user_id', this.userId) } catch(e) {}
      if (typeof uni !== 'undefined' && uni.setStorageSync) uni.setStorageSync('user_id', this.userId)
    }
    // #endif
  },
  onResize() {
    const sys = uni.getSystemInfoSync();
    this.windowWidth = sys.windowWidth;
    this.windowHeight = sys.windowHeight;
  },
  onReady() {
    const q = uni.createSelectorQuery().in(this)
    q.select('.sign-canvas').boundingClientRect((rect) => {
      this.canvasRect = rect
    }).exec()
    try {
      const sys = uni.getSystemInfoSync()
      this.dpr = sys.pixelRatio || 1
    } catch(e) {}
  },
  
  methods: {
    // 初始化画布
    initCanvas() {
      const that = this;
      // 获取系统信息来设置画布大小
      uni.getSystemInfo({
        success: (res) => {
          that.windowWidth = res.windowWidth;
          that.windowHeight = res.windowHeight;
          
          if (that.isRotated) {
            that.canvasWidth = res.windowHeight;
            that.canvasHeight = res.windowWidth;
          } else {
            that.canvasWidth = res.windowWidth;
            that.canvasHeight = res.windowHeight;
          }
          
          // 创建绘图上下文
          that.ctx = uni.createCanvasContext('signCanvas', that);
          that.ctx.setStrokeStyle('#FF0000');
          that.ctx.setLineWidth(2);
          that.ctx.setLineCap('round');
          that.ctx.setLineJoin('round');
          
          // 绘制白色背景
          that.ctx.setFillStyle('#FFFFFF');
          that.ctx.fillRect(0, 0, that.canvasWidth, that.canvasHeight);
          that.ctx.save();
          that.ctx.setFillStyle('rgba(0,0,0,0.06)');
          that.ctx.setFontSize(56);
          if (that.ctx.setTextAlign) that.ctx.setTextAlign('center');
          if (that.ctx.setTextBaseline) that.ctx.setTextBaseline('middle');
          const cx = that.canvasWidth / 2;
          const cy = that.canvasHeight / 2;
          that.ctx.translate(cx, cy);
          // that.ctx.rotate(-Math.PI / 2); // Remove rotation as we are now in landscape mode
          that.ctx.fillText('签字区域', 0, -40);
          that.ctx.fillText('在该白板区域签名', 0, 40);
          that.ctx.restore();
          that.ctx.draw();
        }
      });
    },
    
    // 触摸开始
    touchStart(e) {
      this.isDrawing = true;
      this.hasSignature = true;
      const p = this.normalizePoint(e);
      this.points = [p];
      this.lastPointTime = p.t;
      this.queueDraw();
    },
    
    // 触摸移动
    touchMove(e) {
      if (!this.isDrawing) return;
      const p = this.normalizePoint(e);
      this.points.push(p);
      this.queueDraw();
    },
    
    // 触摸结束
    touchEnd() {
      this.isDrawing = false;
    },

    // 鼠标开始（PC）
    mouseStart(e) {
      this.isDrawing = true;
      this.hasSignature = true;
      const p = this.normalizePoint(e);
      this.points = [p];
      this.lastPointTime = p.t;
      this.queueDraw();
    },

    // 鼠标移动（PC）
    mouseMove(e) {
      if (!this.isDrawing) return;
      const p = this.normalizePoint(e);
      this.points.push(p);
      this.queueDraw();
    },

    // 鼠标结束（PC）
    mouseEnd() {
      this.isDrawing = false;
    },

    // 坐标统一抽取
    normalizePoint(e) {
      const rect = this.canvasRect || { left: 0, top: 0 }
      const now = Date.now()
      const t = (e && e.touches && e.touches[0]) || (e && e.changedTouches && e.changedTouches[0])
      let x = 0, y = 0, pressure = 0.5
      
      let clientX = 0, clientY = 0
      
      if (t) {
        clientX = (t.clientX ?? t.pageX ?? t.x ?? 0)
        clientY = (t.clientY ?? t.pageY ?? t.y ?? 0)
        pressure = typeof t.force === 'number' ? t.force : 0.5
      } else {
        // PC Mouse
        clientX = (e.clientX ?? e.pageX ?? 0)
        clientY = (e.clientY ?? e.pageY ?? 0)
        pressure = typeof e.pressure === 'number' ? e.pressure : 0.5
        
        // If offsetX is available and we are not rotated (or browser handles it), we could use it.
        // But to be consistent with rotation logic, let's use client coordinates and map them.
      }
      
      if (this.isRotated) {
        // Mapping for rotate(90deg) transform-origin 0 0 left 100vw
        // Visual X (Canvas X) = ClientY
        // Visual Y (Canvas Y) = WindowWidth - ClientX
        // Note: this.windowWidth is the Screen Width (which becomes Canvas Height)
        
        const winW = this.windowWidth || uni.getSystemInfoSync().windowWidth;
        
        x = clientY + this.offsetFix.x
        y = (winW - clientX) + this.offsetFix.y
      } else {
        // Normal mode
        // For Mouse with offsetX, use it if available to avoid rect issues?
        // But the original code mixed clientX and offsetX.
        // Let's stick to clientX - rect.left for consistency if rect is valid.
        
        if (!t && (e.offsetX !== undefined)) {
             // Trust offsetX for mouse if available (simplifies things)
             x = e.offsetX + this.offsetFix.x
             y = e.offsetY + this.offsetFix.y
        } else {
             x = clientX - rect.left + this.offsetFix.x
             y = clientY - rect.top + this.offsetFix.y
        }
      }

      return { x, y, p: pressure, t: now }
    },
    widthFor(p0, p1) {
      const dt = Math.max(1, p1.t - p0.t)
      const dx = p1.x - p0.x
      const dy = p1.y - p0.y
      const v = Math.sqrt(dx*dx + dy*dy) / dt
      const pressure = (p1.p ?? 0.5)
      const base = 3
      const byPressure = base + pressure * 5
      const bySpeed = Math.max(3, 8 - v * 2)
      return Math.min(8, Math.max(3, (byPressure + bySpeed) / 2))
    },
    queueDraw() {
      if (this.rafId) return
      this.rafId = requestAnimationFrame(this.flushDraw)
    },
    flushDraw() {
      this.rafId = 0
      if (this.points.length < 2) return
      const pts = this.points
      let i = 1
      this.ctx.setStrokeStyle('#000000')
      this.ctx.setLineCap('round')
      this.ctx.setLineJoin('round')
      while (i < pts.length) {
        const p0 = pts[i-1]
        const p1 = pts[i]
        this.ctx.beginPath()
        this.ctx.setLineWidth(this.widthFor(p0, p1))
        this.ctx.moveTo(p0.x, p0.y)
        this.ctx.lineTo(p1.x, p1.y)
        this.ctx.stroke()
        i++
      }
      this.ctx.draw(true)
      this.points = this.points.slice(-1)
    },
    
    // 清空画布
    clearCanvas() {
      if (!this.hasSignature) {
        uni.showToast({
          title: '画布已经是空的',
          icon: 'none'
        });
        return;
      }
      
      uni.showModal({
        title: '提示',
        content: '确定要清空签名吗？',
        success: (res) => {
          if (res.confirm) {
            // 清空画布
            this.ctx.setFillStyle('#FFFFFF');
            this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
            this.ctx.save();
            this.ctx.setFillStyle('rgba(0,0,0,0.06)');
            this.ctx.setFontSize(56);
            if (this.ctx.setTextAlign) this.ctx.setTextAlign('center');
            if (this.ctx.setTextBaseline) this.ctx.setTextBaseline('middle');
            const cx = this.canvasWidth / 2;
            const cy = this.canvasHeight / 2;
            this.ctx.translate(cx, cy);
            // this.ctx.rotate(-Math.PI / 2);
            this.ctx.fillText('签字区域', 0, -40);
            this.ctx.fillText('在该白板区域签名', 0, 40);
            this.ctx.restore();
            this.ctx.draw();
            this.hasSignature = false;
            
            uni.showToast({
              title: '已清空',
              icon: 'success',
              duration: 1000
            });
          }
        }
      });
    },
    
    // 保存签名并上传
    async saveSign() {
      if (!this.hasSignature) {
        uni.showToast({
          title: '请先签名',
          icon: 'none'
        });
        return;
      }

      if (this.uploading) {
        return;
      }
      
      this.uploading = true;
      uni.showLoading({
        title: '正在保存...'
      });
      
      try {
        // 将画布导出为图片
        const tempFilePath = await this.canvasToTempFile();
        const uploadRes = await uploadUserImage(tempFilePath, this.userId, 'user');
        
        uni.hideLoading();
        
        if (uploadRes.code === 0 || uploadRes.code === 200) {
          uni.showToast({
            title: '签名保存成功',
            icon: 'success'
          });
          // 返回
          setTimeout(() => {
			window.location.href = 'https://jjy.uj345.com/?#/pages/rushing/index' + (this.userId ? ('?user_id=' + this.userId) : '')
			// window.location.href = 'https://shop.wenjinhui.com/?#/pages/rushing/index' + (this.userId ? ('?user_id=' + this.userId) : '')
			// window.location.href = 'https://anyue.szxingming.com/?#/pages/rushing/index' + (this.userId ? ('?user_id=' + this.userId) : '')
			// window.location.href = 'https://xiashengjun.com/?#/pages/rushing/index' + (this.userId ? ('?user_id=' + this.userId) : '')
            // window.location.href = 'https://shop.uj345.com/?#/pages/rushing/index' + (this.userId ? ('?user_id=' + this.userId) : '')
          }, 1000)
          // 返回签名信息给上一页面
          setTimeout(() => {
            const pages = getCurrentPages();
            const prevPage = pages[pages.length - 2];
            
            if (prevPage) {
              // 可以通过事件或直接设置数据的方式传递签名信息
              prevPage.$vm.signatureUrl = uploadRes.data.url;
            }
            uni.navigateBack();
          }, 15000);
        } else {
          throw new Error(uploadRes.msg || '上传失败');
        }
      } catch (error) {
        uni.hideLoading();
        console.error('保存签名失败:', error);
        uni.showToast({
          title: error.message || '保存失败，请重试',
          icon: 'none'
        });
      } finally {
        this.uploading = false;
      }
    },
    
    // 将画布转为临时文件
    canvasToTempFile() {
      return new Promise((resolve, reject) => {
        uni.canvasToTempFilePath({
          canvasId: 'signCanvas',
          fileType: 'png',
          quality: 1,
          success: (res) => {
            resolve(res.tempFilePath);
          },
          fail: (err) => {
            reject(err);
          }
        }, this);
      });
    },
    
    // 返回上一页
    goBack() {
      if (this.hasSignature) {
        uni.showModal({
          title: '提示',
          content: '签名尚未保存，确定要退出吗？',
          success: (res) => {
            if (res.confirm) {
              uni.navigateBack();
            }
          }
        });
      } else {
        uni.navigateBack();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sign-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  // background-color: #f2f2f2;
  overflow: hidden;
  
  &.landscape-mode {
    position: absolute;
    top: 0;
    left: 100vw;
    width: 100vh;
    height: 100vw;
    transform: rotate(90deg);
    transform-origin: 0 0;
  }
}
.top-right {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  z-index: 100;
  background: #fff;
  border: 2rpx solid #E0E0E0;
  border-radius: 12rpx;
  padding: 14rpx 50rpx;
  box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.06);
}

.back-text { color: #666; font-size: 26rpx; }

.sign-canvas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 140rpx;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 0 transparent;
}

.bottom-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 120rpx;
  background: #f9f9f9;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 40rpx;
}

.btn {
  background: #FF6B6B;
  border-radius: 16rpx;
  padding: 20rpx 60rpx;
  box-shadow: 0 8rpx 20rpx rgba(255, 45, 45, 0.25);
}

.btn.primary { background: #FF2D2D; }
.btn-text { color: #fff; font-size: 28rpx; }
</style>

