kyj-yanglao-web-new/src/views/elderly/contracts/components/SignPad.vue

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import { getFamilyMemberSign } from '@/api/elderly/common'
import { ElMessage } from 'element-plus'

interface StrokePoint {
  x: number
  y: number
}

interface Stroke {
  points: StrokePoint[]
}

interface SignPadProps {
  modelValue?: string
  title?: string
  width?: number
  height?: number
  elderId?: number | string
}

const props = withDefaults(defineProps<SignPadProps>(), {
  modelValue: '',
  title: '请签字',
  width: 600,
  height: 260,
  elderId: ''
})

const emit = defineEmits<{
  (e: 'update:modelValue', val: string): void
  (e: 'confirm', val: string): void
  (e: 'cancel'): void
}>()

const visible = ref(false)
const canvasRef = ref<HTMLCanvasElement | null>(null)
const previewRef = ref<HTMLCanvasElement | null>(null)
const isDrawing = ref(false)
const strokes = ref<Stroke[]>([])
const currentStroke = ref<Stroke>({ points: [] })
const hasContent = ref(false)
const loadingApi = ref(false)
const apiFamilyList = ref<any[]>([])
const selectedFamilyId = ref<string>('')
const activeTab = ref<'draw' | 'family'>('draw')
// 选中家属签名时，可能是图片格式，直接保存原始值
const selectedRawSign = ref<string>('')

let ctx: CanvasRenderingContext2D | null = null

// ============ 格式检测 ============
const detectSignFormat = (data: string): 'vector' | 'image' | 'empty' => {
  if (!data) return 'empty'
  if (data.startsWith('data:image')) return 'image'
  try {
    const jsonStr = decodeURIComponent(escape(atob(data)))
    const parsed = JSON.parse(jsonStr)
    if (Array.isArray(parsed) && parsed.length > 0) return 'vector'
  } catch (e) {
    // fallback
  }
  if (data.length > 100) return 'image'
  return 'empty'
}

// ============ 矢量编解码 ============
const vectorToBase64 = (strokeList: Stroke[]): string => {
  const simpleData = strokeList.map((s) => s.points.map((p) => [Math.round(p.x), Math.round(p.y)]))
  const jsonStr = JSON.stringify(simpleData)
  return btoa(unescape(encodeURIComponent(jsonStr)))
}

const base64ToVector = (b64: string): Stroke[] => {
  try {
    const jsonStr = decodeURIComponent(escape(atob(b64)))
    const parsed = JSON.parse(jsonStr)
    if (!Array.isArray(parsed)) return []
    return parsed.map((strokeArr: number[][]) => ({
      points: strokeArr.map(([x, y]) => ({ x, y }))
    }))
  } catch (e) {
    return []
  }
}

// ============ Canvas渲染 ============
const renderVectorToCanvas = (canvas: HTMLCanvasElement, b64: string) => {
  const c = canvas.getContext('2d')
  if (!c) return
  c.clearRect(0, 0, canvas.width, canvas.height)
  c.fillStyle = '#ffffff'
  c.fillRect(0, 0, canvas.width, canvas.height)
  if (!b64) return
  const vStrokes = base64ToVector(b64)
  if (vStrokes.length === 0) return

  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
  vStrokes.forEach((s) => {
    s.points.forEach((p) => {
      if (p.x < minX) minX = p.x
      if (p.y < minY) minY = p.y
      if (p.x > maxX) maxX = p.x
      if (p.y > maxY) maxY = p.y
    })
  })

  const contentWidth = maxX - minX || 1
  const contentHeight = maxY - minY || 1
  const padding = 8
  const scaleX = (canvas.width - padding * 2) / contentWidth
  const scaleY = (canvas.height - padding * 2) / contentHeight
  const scale = Math.min(scaleX, scaleY, 2)
  const offsetX = padding + (canvas.width - padding * 2 - contentWidth * scale) / 2 - minX * scale
  const offsetY = padding + (canvas.height - padding * 2 - contentHeight * scale) / 2 - minY * scale

  c.strokeStyle = '#000000'
  c.lineWidth = 2
  c.lineCap = 'round'
  c.lineJoin = 'round'

  vStrokes.forEach((stroke) => {
    if (stroke.points.length < 2) return
    c.beginPath()
    c.moveTo(stroke.points[0].x * scale + offsetX, stroke.points[0].y * scale + offsetY)
    for (let i = 1; i < stroke.points.length; i++) {
      c.lineTo(stroke.points[i].x * scale + offsetX, stroke.points[i].y * scale + offsetY)
    }
    c.stroke()
  })
}

const renderImageToCanvas = (canvas: HTMLCanvasElement, src: string) => {
  const c = canvas.getContext('2d')
  if (!c) return
  const img = new Image()
  img.onload = () => {
    c.clearRect(0, 0, canvas.width, canvas.height)
    c.fillStyle = '#ffffff'
    c.fillRect(0, 0, canvas.width, canvas.height)
    const scale = Math.min(canvas.width / img.width, canvas.height / img.height)
    const w = img.width * scale
    const h = img.height * scale
    const x = (canvas.width - w) / 2
    const y = (canvas.height - h) / 2
    c.drawImage(img, x, y, w, h)
  }
  img.src = src.startsWith('data:') ? src : `data:image/png;base64,${src}`
}

// 渲染签名到canvas（自动判断格式）
const renderSignToCanvas = (canvas: HTMLCanvasElement, signData: string) => {
  const fmt = detectSignFormat(signData)
  if (fmt === 'vector') {
    renderVectorToCanvas(canvas, signData)
  } else if (fmt === 'image') {
    renderImageToCanvas(canvas, signData)
  }
}

// 家属签名预览渲染
const renderFamilyPreview = (canvas: HTMLCanvasElement, id: string | number) => {
  const item = apiFamilyList.value.find((i) => String(i.id) === String(id))
  if (!item || !item.sign) return
  renderSignToCanvas(canvas, item.sign)
}

const setFamilyPreviewRef = (el: any, id: string | number) => {
  if (el) {
    renderFamilyPreview(el, id)
  }
}

// ============ 手写画板 ============
const redrawCanvas = () => {
  if (!ctx || !canvasRef.value) return
  const canvas = canvasRef.value
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = '#ffffff'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.strokeStyle = '#000000'
  ctx.lineWidth = 2.2
  ctx.lineCap = 'round'
  ctx.lineJoin = 'round'

  const allStrokes = [...strokes.value, currentStroke.value]
  allStrokes.forEach((stroke) => {
    if (!stroke.points || stroke.points.length < 2) return
    ctx!.beginPath()
    ctx!.moveTo(stroke.points[0].x, stroke.points[0].y)
    for (let i = 1; i < stroke.points.length; i++) {
      ctx!.lineTo(stroke.points[i].x, stroke.points[i].y)
    }
    ctx!.stroke()
  })
}

const getCanvasPosition = (e: MouseEvent | TouchEvent): StrokePoint => {
  const canvas = canvasRef.value!
  const rect = canvas.getBoundingClientRect()
  const scaleX = canvas.width / rect.width
  const scaleY = canvas.height / rect.height
  let clientX = 0
  let clientY = 0
  if ('touches' in e) {
    clientX = e.touches[0].clientX
    clientY = e.touches[0].clientY
  } else {
    clientX = (e as MouseEvent).clientX
    clientY = (e as MouseEvent).clientY
  }
  return { x: (clientX - rect.left) * scaleX, y: (clientY - rect.top) * scaleY }
}

const handleMouseDown = (e: MouseEvent | TouchEvent) => {
  if (activeTab.value !== 'draw') return
  e.preventDefault()
  isDrawing.value = true
  currentStroke.value = { points: [getCanvasPosition(e)] }
}

const handleMouseMove = (e: MouseEvent | TouchEvent) => {
  if (!isDrawing.value) return
  e.preventDefault()
  currentStroke.value.points.push(getCanvasPosition(e))
  redrawCanvas()
}

const handleMouseUp = () => {
  if (!isDrawing.value) return
  isDrawing.value = false
  if (currentStroke.value.points.length >= 2) {
    strokes.value.push({ ...currentStroke.value, points: [...currentStroke.value.points] })
    hasContent.value = true
  }
  currentStroke.value = { points: [] }
  redrawCanvas()
}

const clearCanvas = () => {
  strokes.value = []
  currentStroke.value = { points: [] }
  hasContent.value = false
  selectedFamilyId.value = ''
  selectedRawSign.value = ''
  if (activeTab.value === 'draw') {
    redrawCanvas()
  }
}

// ============ 弹窗控制 ============
const initCanvas = () => {
  if (!canvasRef.value) return
  ctx = canvasRef.value.getContext('2d')
}

const open = async (existingValue?: string) => {
  visible.value = true
  loadingApi.value = false
  apiFamilyList.value = []
  selectedFamilyId.value = ''
  selectedRawSign.value = ''
  activeTab.value = 'draw'
  await nextTick()
  initCanvas()
  const val = existingValue ?? props.modelValue
  if (val) {
    const fmt = detectSignFormat(val)
    if (fmt === 'vector') {
      strokes.value = base64ToVector(val)
      hasContent.value = strokes.value.length > 0
    } else {
      strokes.value = []
      hasContent.value = false
    }
  } else {
    strokes.value = []
    hasContent.value = false
  }
  redrawCanvas()
}

const confirmSign = () => {
  if (!hasContent.value) {
    ElMessage.warning('请先完成签字')
    return
  }

  let result = ''
  if (activeTab.value === 'family' && selectedRawSign.value) {
    // 家属签名：直接使用原始值（可能是图片base64或矢量base64）
    result = selectedRawSign.value
  } else if (strokes.value.length > 0) {
    // 手写签字：矢量编码
    result = vectorToBase64(strokes.value)
  }

  if (!result) {
    ElMessage.warning('请先完成签字')
    return
  }

  emit('update:modelValue', result)
  emit('confirm', result)
  visible.value = false
}

const cancelSign = () => {
  emit('cancel')
  visible.value = false
}

// ============ 家属签名 ============
const loadFamilySignFromApi = async () => {
  if (!props.elderId) {
    ElMessage.warning('缺少长者信息，无法读取家属签名')
    return
  }
  loadingApi.value = true
  try {
    const res: any = await getFamilyMemberSign(props.elderId)
    if (res && res.data) {
      apiFamilyList.value = Array.isArray(res.data) ? res.data : []
      if (apiFamilyList.value.length === 0) {
        ElMessage.info('暂无家属签名数据')
      }
    }
  } catch (e) {
    console.error('读取家属签名失败', e)
    ElMessage.error('读取家属签名失败')
  } finally {
    loadingApi.value = false
  }
}

const selectFamilySign = (item: any) => {
  if (!item || !item.sign) return
  selectedFamilyId.value = String(item.id)
  selectedRawSign.value = item.sign
  hasContent.value = true

  // 如果是矢量格式，也同步到strokes（用于预览）
  const fmt = detectSignFormat(item.sign)
  if (fmt === 'vector') {
    strokes.value = base64ToVector(item.sign)
  } else {
    strokes.value = []
  }

  // 渲染预览
  nextTick(() => {
    if (previewRef.value) {
      renderSignToCanvas(previewRef.value, item.sign)
    }
  })
}

const handleTabChange = (tab: 'draw' | 'family') => {
  activeTab.value = tab
  // 切换tab时不清除已选内容，但需要重新初始化canvas
  nextTick(() => {
    if (tab === 'draw') {
      initCanvas()
      redrawCanvas()
    } else if (tab === 'family' && apiFamilyList.value.length === 0) {
      // 自动加载家属签名
      loadFamilySignFromApi()
    }
  })
}

watch(visible, (val) => {
  if (val) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
  }
})

onMounted(() => {
  window.addEventListener('mouseup', handleMouseUp)
  window.addEventListener('touchend', handleMouseUp)
})

onBeforeUnmount(() => {
  window.removeEventListener('mouseup', handleMouseUp)
  window.removeEventListener('touchend', handleMouseUp)
})

defineExpose({ open })
</script>

<template>
  <Teleport to="body">
    <div v-if="visible" class="sign-pad-mask" @click.self="cancelSign">
      <div class="sign-pad-dialog">
        <div class="sign-pad-header">
          <span class="sign-pad-title">{{ title }}</span>
          <span class="sign-pad-close" @click="cancelSign">×</span>
        </div>

        <!-- Tab切换：始终显示 -->
        <div class="sign-pad-tabs">
          <div
            class="sign-pad-tab"
            :class="{ active: activeTab === 'draw' }"
            @click="handleTabChange('draw')"
          >手写签字</div>
          <div
            class="sign-pad-tab"
            :class="{ active: activeTab === 'family' }"
            @click="handleTabChange('family')"
          >读取签名</div>
        </div>

        <div class="sign-pad-body">
          <!-- 手写签字 -->
          <template v-if="activeTab === 'draw'">
            <div class="sign-pad-canvas-wrap">
              <canvas
                ref="canvasRef"
                :width="width"
                :height="height"
                class="sign-pad-canvas"
                @mousedown="handleMouseDown"
                @mousemove="handleMouseMove"
                @touchstart="handleMouseDown"
                @touchmove="handleMouseMove"
              ></canvas>
            </div>
          </template>

          <!-- 读取家属签名 -->
          <div v-if="activeTab === 'family'" class="sign-pad-family">
            <div v-if="apiFamilyList.length === 0" class="sign-pad-empty">
              <el-button type="primary" :loading="loadingApi" @click="loadFamilySignFromApi">
                {{ loadingApi ? '加载中...' : '点击加载家属签名' }}
              </el-button>
            </div>
            <div v-else class="sign-pad-family-list">
              <div
                class="sign-pad-family-item"
                v-for="item in apiFamilyList"
                :key="item.id"
                :class="{ selected: selectedFamilyId === String(item.id) }"
                @click="selectFamilySign(item)"
              >
                <div class="sign-pad-family-name">{{ item.name || '家属' }}</div>
                <div class="sign-pad-family-sign">
                  <canvas
                    :ref="(el: any) => setFamilyPreviewRef(el, item.id)"
                    :width="200"
                    :height="80"
                    class="sign-pad-family-preview"
                  ></canvas>
                </div>
              </div>
            </div>

            <!-- 已选签名预览 -->
            <div v-if="hasContent && selectedFamilyId" class="sign-pad-family-preview-label">已选签名预览</div>
            <div class="sign-pad-canvas-wrap" v-if="hasContent && selectedFamilyId">
              <canvas
                ref="previewRef"
                :width="width"
                :height="height"
                class="sign-pad-canvas"
                style="pointer-events: none; background: #fff;"
              ></canvas>
            </div>
          </div>
        </div>

        <div class="sign-pad-footer">
          <el-button @click="clearCanvas">清空</el-button>
          <el-button type="primary" :disabled="!hasContent" @click="confirmSign">确认签字</el-button>
          <el-button @click="cancelSign">取消</el-button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped lang="scss">
.sign-pad-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign-pad-dialog {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  width: 640px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sign-pad-header {
  padding: 14px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .sign-pad-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .sign-pad-close {
    font-size: 24px;
    cursor: pointer;
    color: #909399;
    line-height: 1;
    user-select: none;

    &:hover {
      color: #303133;
    }
  }
}

.sign-pad-tabs {
  display: flex;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;

  .sign-pad-tab {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    color: #606266;
    transition: all 0.2s;

    &.active {
      color: #409eff;
      font-weight: 500;
      border-bottom: 2px solid #409eff;
      background: #fff;
    }

    &:hover:not(.active) {
      color: #409eff;
      background: #f2f6fc;
    }
  }
}

.sign-pad-body {
  padding: 20px;
}

.sign-pad-canvas-wrap {
  border: 2px dashed #dcdfe6;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;

  &:hover {
    border-color: #c0c4cc;
  }
}

.sign-pad-canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
}

.sign-pad-family {
   height: 260px;
  .sign-pad-empty {
    text-align: center;
    padding: 40px 0;
  }

  .sign-pad-family-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .sign-pad-family-item {
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    min-width: 200px;
    background: #fafafa;

    &:hover {
      border-color: #409eff;
      background: #f2f6fc;
    }

    &.selected {
      border-color: #409eff;
      background: #ecf5ff;
    }
  }

  .sign-pad-family-name {
    font-size: 14px;
    color: #303133;
    margin-bottom: 8px;
  }

  .sign-pad-family-preview {
    display: block;
    background: #fff;
  }

  .sign-pad-family-preview-label {
    text-align: center;
    margin: 16px 0 8px;
    font-size: 13px;
    color: #606266;
  }
}

.sign-pad-footer {
  padding: 14px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: center;
  gap: 12px;
}
</style>