cfc/cfc-frontend/components/PearlDiagram.vue

<template>
  <!-- 珍珠图 - 珍珠项链资源清单 -->
  <view class="pearl-graph-wrapper" v-if="hasData" :style="{ minHeight: canvasHeight + 'px' }">
    <canvas
      class="pearl-graph-canvas"
      canvas-id="pearlGraphCanvas"
      id="pearlGraphCanvas"
      type="2d"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd" />
    <!-- 点击珍珠时显示详情弹窗 -->
    <view class="pearl-detail-popup" :class="{ 'popup-below': showPopupBelow }" v-if="selectedNode" :style="popupPosition">
      <view class="popup-content">
        <view class="popup-header">
          <image class="popup-avatar" :src="selectedNode.avatar || defaultAvatar" mode="aspectFill" />
          <view class="popup-info">
            <text class="popup-name">{{ selectedNode.name }}</text>
            <view class="popup-tags">
              <text class="popup-tag" :style="{ background: selectedNode.color, color: '#FFFFFF' }">{{ selectedNode.groupTypeName }}</text>
              <text class="popup-tag popup-tag-rel" v-if="selectedNode.relationshipType">{{ selectedNode.relationshipType }}</text>
            </view>
          </view>
        </view>
        <!-- 技能列表（仅 SKILL 组） -->
        <view class="popup-skills" v-if="selectedNode.groupType === 'SKILL' && selectedNode.skills && selectedNode.skills.length > 0">
          <text class="popup-skill-count">技能数 ×{{ selectedNode.skillCount || 0 }}</text>
          <view class="popup-skill-list">
            <text class="popup-skill-item" v-for="(s, idx) in displaySkills" :key="idx">{{ s }}</text>
          </view>
        </view>
        <!-- 描述 -->
        <view class="popup-desc" v-if="selectedNode.description">
          <text class="popup-desc-text">{{ selectedNode.description }}</text>
        </view>
        <!-- 操作按钮 -->
        <view class="popup-actions">
          <text class="action-btn action-btn-contact" v-if="selectedNode.groupType !== 'PERSON' && selectedNode.groupType !== 'SKILL'" @tap="onContact">联系</text>
          <text class="action-btn action-btn-priority" v-if="selectedNode.groupType !== 'PERSON' && selectedNode.groupType !== 'SKILL'" @tap="onAdjustPriority">优先级</text>
          <text class="action-btn action-btn-delete" v-if="canDelete" @tap="onDelete">删除</text>
        </view>
        <view class="popup-arrow" :class="{ 'popup-arrow-down': showPopupBelow }"></view>
      </view>
    </view>
  </view>
  <!-- 空状态 -->
  <view class="pearl-graph-empty" v-else-if="isEmpty">
    <text class="empty-icon">📿</text>
    <text class="empty-text">暂无珍珠图数据</text>
    <text class="empty-hint">登记你的社会连接，画出珍珠项链图</text>
    <text class="action-btn action-btn-primary" @tap="onAdd">+ 登记资源</text>
  </view>
  <!-- 加载状态 -->
  <view class="pearl-loading" v-else>
    <text class="loading-text">加载珍珠图...</text>
  </view>
</template>

<script>
import { addPearlInteraction, updatePearlPriority } from '../utils/api.js'

/**
 * PearlDiagram - 珍珠图 Canvas 组件
 *
 * 珍珠项链式资源清单可视化：
 * - 中心节点 = 当前用户"我"（固定不动）
 * - 珍珠节点 = 资源，按 25 组分布在中心周围（两层同心圆）：
 *   内圈必备 12 组 + 外圈理想 13 组
 * - 每组以弧形分布在中心周围，颜色编码
 * - 点击珍珠 → 显示详情弹窗
 *
 * 数据源：父组件通过 resources prop 传入
 * 布局方式：环形均分布局（非力导向）
 */
export default {
  name: 'PearlDiagram',
  props: {
    /** 资源数据 { groups: [{ type, typeName, items }] } */
    resources: {
      type: Object,
      default: null
    },
    /** 当前用户ID */
    selfId: {
      type: [Number, String],
      default: null
    },
    /** 画布宽度 px */
    canvasWidth: {
      type: Number,
      default: 340
    },
    /** 画布高度 px */
    canvasHeight: {
      type: Number,
      default: 400
    },
    /** 是否允许交互（点击珍珠查看详情） */
    interactive: {
      type: Boolean,
      default: true
    },
    /** 逾期提醒映射 { resourceItemId: daysSinceLast }，父组件从 /reminder/list 构建 */
    overdueMap: {
      type: Object,
      default: null
    }
  },
  data: function() {
    return {
      dpr: 1,
      ctx: null,
      _canvasNode: null,
      _canvasRect: null,
      canvasReady: false,
      _destroyed: false,
      // 珍珠节点数据
      pearlNodes: [],
      // 选中的节点（弹窗用）
      selectedNode: null,
      // 触摸状态
      _touchStartPos: null,
      // 默认头像
      defaultAvatar: '/static/default-avatar.png',
      // 分组配置：25 类社会连接，内圈必备 12 组 / 外圈理想 13 组
      // 颜色盘：内圈偏暖（红橙），外圈偏冷（蓝紫绿）
      groupConfigs: [
        // ===== 内圈：必备 12 组（radiusPct 0.28）=====
        { type: 'MEDICAL', typeName: '医疗', color: '#EF4444', radiusPct: 0.28, ring: 'inner' },
        { type: 'EDUCATION', typeName: '教育', color: '#F97316', radiusPct: 0.28, ring: 'inner' },
        { type: 'PUBLIC_SECURITY', typeName: '公安', color: '#DC2626', radiusPct: 0.28, ring: 'inner' },
        { type: 'AUTO', typeName: '汽车相关', color: '#EA580C', radiusPct: 0.28, ring: 'inner' },
        { type: 'REAL_ESTATE', typeName: '房产服务', color: '#D97706', radiusPct: 0.28, ring: 'inner' },
        { type: 'TICKETING', typeName: '票务', color: '#CA8A04', radiusPct: 0.28, ring: 'inner' },
        { type: 'HANDYMAN', typeName: '多能工人', color: '#B45309', radiusPct: 0.28, ring: 'inner' },
        { type: 'APPLIANCE', typeName: '家电', color: '#92400E', radiusPct: 0.28, ring: 'inner' },
        { type: 'CATERING', typeName: '餐饮', color: '#E11D48', radiusPct: 0.28, ring: 'inner' },
        { type: 'FOOD', typeName: '食品', color: '#BE123C', radiusPct: 0.28, ring: 'inner' },
        { type: 'LEGAL', typeName: '法律', color: '#B91C1C', radiusPct: 0.28, ring: 'inner' },
        { type: 'WEEKEND_EXPERT', typeName: '周末达人', color: '#FB7185', radiusPct: 0.28, ring: 'inner' },
        // ===== 外圈：理想 13 组（radiusPct 0.55）=====
        { type: 'GOVERNMENT', typeName: '政府综合', color: '#8B5CF6', radiusPct: 0.55, ring: 'outer' },
        { type: 'TAX', typeName: '税务', color: '#7C3AED', radiusPct: 0.55, ring: 'outer' },
        { type: 'BUSINESS_ADMIN', typeName: '工商', color: '#6D28D9', radiusPct: 0.55, ring: 'outer' },
        { type: 'BANK', typeName: '银行', color: '#2563EB', radiusPct: 0.55, ring: 'outer' },
        { type: 'MEDIA', typeName: '媒体', color: '#1D4ED8', radiusPct: 0.55, ring: 'outer' },
        { type: 'TRAVEL', typeName: '旅游', color: '#0EA5E9', radiusPct: 0.55, ring: 'outer' },
        { type: 'LEADING_ENTERPRISE', typeName: '领军企业', color: '#0891B2', radiusPct: 0.55, ring: 'outer' },
        { type: 'INDUSTRY_BENCHMARK', typeName: '行业标杆', color: '#059669', radiusPct: 0.55, ring: 'outer' },
        { type: 'OVERSEAS', typeName: '国外', color: '#10B981', radiusPct: 0.55, ring: 'outer' },
        { type: 'UNIVERSITY', typeName: '高校', color: '#16A34A', radiusPct: 0.55, ring: 'outer' },
        { type: 'FINANCE', typeName: '金融', color: '#84CC16', radiusPct: 0.55, ring: 'outer' },
        { type: 'SENIOR_LOCAL', typeName: '资深土著', color: '#65A30D', radiusPct: 0.55, ring: 'outer' },
        { type: 'KEY_CITY', typeName: '北上广等', color: '#4D7C0F', radiusPct: 0.55, ring: 'outer' }
      ],
    }
  },
  computed: {
    /** 是否有至少一组包含资源 */
    hasData: function() {
      if (!this.resources) return false
      var groups = this.resources.groups
      if (!groups || !Array.isArray(groups)) return false
      for (var i = 0; i < groups.length; i++) {
        if (groups[i].items && groups[i].items.length > 0) return true
      }
      return false
    },
    /** 资源已加载但全部为空 */
    isEmpty: function() {
      if (!this.resources) return false
      var groups = this.resources.groups
      if (!groups || !Array.isArray(groups)) return true
      for (var i = 0; i < groups.length; i++) {
        if (groups[i].items && groups[i].items.length > 0) return false
      }
      return true
    },
    /** 选中节点是否可删除（仅 INFO/PLACE 为手工登记资源；PERSON 来自联系人、SKILL 来自帮助记录聚合，均不可删） */
    canDelete: function() {
      if (!this.selectedNode) return false
      return this.selectedNode.groupType === 'INFO' || this.selectedNode.groupType === 'PLACE'
    },
    /** 弹窗中展示的技能（前3个） */
    displaySkills: function() {
      if (!this.selectedNode || !this.selectedNode.skills) return []
      return this.selectedNode.skills.slice(0, 3)
    },
    /** 弹窗是否显示在节点下方（节点太靠近顶部时） */
    showPopupBelow: function() {
      if (!this.selectedNode) return false
      return this.selectedNode.y < 140
    },
    /** 弹窗定位样式 */
    popupPosition: function() {
      if (!this.selectedNode) return { display: 'none' }
      var px = this.selectedNode.x
      var py = this.selectedNode.y
      // 限制弹窗不超出画布水平范围
      var halfPopup = 120
      var left = Math.max(halfPopup, Math.min(this.canvasWidth - halfPopup, px))
      return {
        left: left + 'px',
        top: py + 'px'
      }
    }
  },
  watch: {
    resources: {
      handler: function() {
        this.selectedNode = null
        this.buildLayout()
        if (this.canvasReady) {
          this.drawAll()
        }
      },
      deep: true
    },
    canvasWidth: function() {
      this.buildLayout()
      if (this.canvasReady) {
        this.drawAll()
      }
    },
    canvasHeight: function() {
      this.buildLayout()
      if (this.canvasReady) {
        this.drawAll()
      }
    }
  },
  mounted: function() {
    this._destroyed = false
    var self = this
    try {
      this.dpr = uni.getWindowInfo().pixelRatio || 1
    } catch (e) {
      this.dpr = 1
    }
    // 延迟初始化 canvas（等待 DOM 布局完成）
    var retryCount = 0
    var maxRetry = 5
    function tryInit() {
      if (self._destroyed) return
      self.initCanvas(function(success) {
        if (self._destroyed) return
        if (!success && retryCount < maxRetry) {
          retryCount++
          setTimeout(tryInit, 60)
        } else if (!success) {
          console.log('[PearlDiagram] canvas 初始化失败，重试 ' + maxRetry + ' 次后放弃')
        }
      })
    }
    this.$nextTick(function() {
      if (self._destroyed) return
      self.updateCanvasSize()
      self.$nextTick(function() {
        if (!self._destroyed) {
          tryInit()
        }
      })
    })
  },
  beforeDestroy: function() {
    this._destroyed = true
  },
  methods: {
    /* ===========================
     * 布局构建（确定性弧形）
     * =========================== */

    /**
     * 根据 resources 构建珍珠节点的 x, y 坐标
     * 布局逻辑：
     * - 中心 = (canvasWidth/2, canvasHeight/2) → "我"
     * - 内圈 12 组均分整个圆周（radiusPct 0.28）
     * - 外圈 13 组均分整个圆周（radiusPct 0.55）
     * - 组内珍珠沿弧线等间距分布
     * - 珍珠半径按 priority 映射
     */
    buildLayout: function() {
      this.pearlNodes = []
      if (!this.resources || !this.resources.groups || !Array.isArray(this.resources.groups)) {
        return
      }

      var cx = this.canvasWidth / 2
      var cy = this.canvasHeight / 2
      var minDim = Math.min(this.canvasWidth, this.canvasHeight)
      var self = this

      // 按 ring 分组：内圈 12 / 外圈 13
      var innerConfigs = []
      var outerConfigs = []
      for (var c = 0; c < this.groupConfigs.length; c++) {
        var cfg = this.groupConfigs[c]
        if (cfg.ring === 'inner') innerConfigs.push(cfg)
        else outerConfigs.push(cfg)
      }

      function placeRing(ringConfigs, radiusPct) {
        var R = minDim * radiusPct
        var n = ringConfigs.length
        var totalSpan = Math.PI * 2
        var gap = totalSpan * 0.015
        var used = 0
        for (var i = 0; i < n; i++) {
          var config = ringConfigs[i]
          // 在 resources.groups 中查找该类型
          var group = null
          for (var g = 0; g < self.resources.groups.length; g++) {
            if (self.resources.groups[g].type === config.type) {
              group = self.resources.groups[g]
              break
            }
          }
          if (!group || !group.items || group.items.length === 0) {
            used += (totalSpan / n)
            continue
          }

          // 本组角度区间
          var groupSpan = totalSpan / n - gap
          var startAngle = -Math.PI / 2 + used + gap / 2
          var items = group.items

          for (var k = 0; k < items.length; k++) {
            var item = items[k]
            var t = items.length === 1 ? 0.5 : k / (items.length - 1)
            var angle = startAngle + t * groupSpan

            // 珍珠半径：按 priority 映射（高=大）
            var priority = item.priority || 2
            var multiplier = priority === 1 ? 1.5 : priority === 3 ? 0.7 : 1.0
            var baseR = minDim * radiusPct * 0.09
            var itemRadius = Math.max(8, Math.min(26, baseR * multiplier))

            self.pearlNodes.push({
              id: item.id || item.contactId || null,
              contactId: item.contactId || null,
              groupType: config.type,
              groupTypeName: config.typeName,
              name: item.name || '未知',
              displayName: item.name ? item.name.charAt(0) : '?',
              avatar: item.avatar || null,
              description: item.description || '',
              skillCount: item.skillCount || 0,
              skills: item.skills || [],
              relationshipType: item.relationshipType || '',
              priority: priority,
              valueScore: item.valueScore || 0,
              daysSinceLast: item.daysSinceLast || null,
              radius: itemRadius,
              color: config.color,
              ring: config.ring,
              x: cx + R * Math.cos(angle),
              y: cy + R * Math.sin(angle)
            })
          }
          used += (totalSpan / n)
        }
      }

      placeRing(innerConfigs, 0.28)
      placeRing(outerConfigs, 0.55)
    },

    /* ===========================
     * Canvas 渲染
     * =========================== */

    drawAll: function() {
      if (!this.ctx) return
      var ctx = this.ctx
      var w = this.canvasWidth
      var h = this.canvasHeight

      ctx.clearRect(0, 0, w, h)

      // 1. 绘制分组弧线背景（半透明色带，双层）
      this._drawGroupArcs(ctx)

      // 2. 绘制中心节点"我"
      this._drawCenterNode(ctx)

      // 3. 绘制珍珠节点（内圈先画，外圈后画）
      for (var i = 0; i < this.pearlNodes.length; i++) {
        this._drawPearlNode(ctx, this.pearlNodes[i])
      }

      // 4. 绘制分组标签
      this._drawGroupLabels(ctx)

      // 5. 逾期角标（红色圆点+天数，仅 daysSinceLast 超过建议周期的资源）
      this._drawOverdueBadges(ctx)
    },

    /** 绘制每组的弧形色带（背景）和连接线 */
    _drawGroupArcs: function(ctx) {
      var cx = this.canvasWidth / 2
      var cy = this.canvasHeight / 2
      var minDim = Math.min(this.canvasWidth, this.canvasHeight)
      var self = this

      // 绘制每组的连接线和色带
      for (var c = 0; c < this.groupConfigs.length; c++) {
        var config = this.groupConfigs[c]
        var R = minDim * config.radiusPct

        // 收集该组所有珍珠的角度
        var groupAngles = []
        for (var p = 0; p < this.pearlNodes.length; p++) {
          if (this.pearlNodes[p].groupType === config.type) {
            var dx = this.pearlNodes[p].x - cx
            var dy = this.pearlNodes[p].y - cy
            groupAngles.push(Math.atan2(dy, dx))
          }
        }
        if (groupAngles.length === 0) continue

        // 排序角度
        groupAngles.sort(function(a, b) { return a - b })
        var minA = groupAngles[0]
        var maxA = groupAngles[groupAngles.length - 1]

        // 色带背景（半透明弧）
        ctx.beginPath()
        ctx.arc(cx, cy, R, minA, maxA)
        ctx.lineWidth = 14
        ctx.strokeStyle = self._hexToRgba(config.color, 0.12)
        ctx.lineCap = 'round'
        ctx.stroke()

        // 连接线（细弧）
        ctx.beginPath()
        ctx.arc(cx, cy, R, minA, maxA)
        ctx.lineWidth = 1.5
        ctx.strokeStyle = self._hexToRgba(config.color, 0.3)
        ctx.lineCap = 'butt'
        ctx.stroke()

        // 中心到组内每个珍珠的连线
        for (var n = 0; n < this.pearlNodes.length; n++) {
          var node = this.pearlNodes[n]
          if (node.groupType !== config.type) continue
          ctx.beginPath()
          ctx.moveTo(cx, cy)
          ctx.lineTo(node.x, node.y)
          ctx.lineWidth = 1
          ctx.strokeStyle = self._hexToRgba(config.color, 0.15)
          ctx.stroke()
        }
      }
    },

    /** 绘制中心节点"我" */
    _drawCenterNode: function(ctx) {
      var cx = this.canvasWidth / 2
      var cy = this.canvasHeight / 2
      var r = 30

      // 外圈光晕
      ctx.beginPath()
      ctx.arc(cx, cy, r + 4, 0, Math.PI * 2)
      ctx.fillStyle = this._hexToRgba('#10B981', 0.15)
      ctx.fill()

      // 实心圆
      ctx.beginPath()
      ctx.arc(cx, cy, r, 0, Math.PI * 2)
      ctx.fillStyle = '#10B981'
      ctx.fill()
      ctx.strokeStyle = '#FFFFFF'
      ctx.lineWidth = 3
      ctx.stroke()

      // "我" 字
      ctx.font = 'bold 18px PingFang SC, sans-serif'
      ctx.fillStyle = '#FFFFFF'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText('我', cx, cy + 1)
    },

    /** 绘制单个珍珠节点 */
    _drawPearlNode: function(ctx, node) {
      var x = node.x
      var y = node.y
      var r = node.radius

      // 裁剪到画布范围
      if (x - r > this.canvasWidth || x + r < 0 || y - r > this.canvasHeight || y + r < 0) {
        return
      }

      // 珍珠光晕
      ctx.beginPath()
      ctx.arc(x, y, r + 3, 0, Math.PI * 2)
      ctx.fillStyle = this._hexToRgba(node.color, 0.12)
      ctx.fill()

      // 实心圆（珍珠主体）
      ctx.beginPath()
      ctx.arc(x, y, r, 0, Math.PI * 2)
      ctx.fillStyle = node.color
      ctx.fill()

      // 白边
      ctx.strokeStyle = '#FFFFFF'
      ctx.lineWidth = 2
      ctx.stroke()

      // 高优先级（priority=1）白色粗描边
      if (node.priority === 1) {
        ctx.beginPath()
        ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2)
        ctx.lineWidth = 2
        ctx.strokeStyle = '#FFFFFF'
        ctx.stroke()
      }

      // 首字
      ctx.font = 'bold ' + Math.max(12, r * 0.65) + 'px PingFang SC, sans-serif'
      ctx.fillStyle = '#FFFFFF'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText(node.displayName, x, y + 1)
    },

    /** 绘制分组标签（弧外侧文字） */
    _drawGroupLabels: function(ctx) {
      var cx = this.canvasWidth / 2
      var cy = this.canvasHeight / 2
      var minDim = Math.min(this.canvasWidth, this.canvasHeight)
      var self = this

      for (var c = 0; c < this.groupConfigs.length; c++) {
        var config = this.groupConfigs[c]
        // 收集该组所有珍珠的角度和位置
        var groupAngles = []
        for (var p = 0; p < this.pearlNodes.length; p++) {
          if (this.pearlNodes[p].groupType === config.type) {
            var dx = this.pearlNodes[p].x - cx
            var dy = this.pearlNodes[p].y - cy
            groupAngles.push(Math.atan2(dy, dx))
          }
        }
        if (groupAngles.length === 0) continue

        // 中间角度
        var minA = groupAngles[0]
        var maxA = groupAngles[groupAngles.length - 1]
        var midAngle = (minA + maxA) / 2
        var R = minDim * config.radiusPct

        // 标签在弧线外侧
        var labelR = R + 18
        var lx = cx + labelR * Math.cos(midAngle)
        var ly = cy + labelR * Math.sin(midAngle)

        ctx.font = '12px PingFang SC, sans-serif'
        ctx.fillStyle = self._hexToRgba(config.color, 0.8)
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(config.typeName, lx, ly)
      }
    },

    /** 逾期角标：红色小圆点 + 天数（仅当 PENDING 提醒语义成立时，由父组件传入 overdueMap） */
    _drawOverdueBadges: function(ctx) {
      if (!this.overdueMap) return
      var self = this
      var overdueIds = Object.keys(this.overdueMap)
      for (var i = 0; i < this.pearlNodes.length; i++) {
        var node = this.pearlNodes[i]
        if (!node.id) continue
        var days = this.overdueMap['' + node.id]
        if (days === undefined || days === null) continue
        var bx = node.x + node.radius - 4
        var by = node.y - node.radius + 4
        // 红底白字小徽标
        ctx.beginPath()
        ctx.arc(bx, by, 9, 0, Math.PI * 2)
        ctx.fillStyle = '#EF4444'
        ctx.fill()
        ctx.fillStyle = '#FFFFFF'
        ctx.font = 'bold 10px sans-serif'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(String(days), bx, by + 1)
      }
    },

    /* ===========================
     * 交互：触摸处理
     * =========================== */

    /** 命中测试：返回被点击的珍珠索引，-1 表示未命中 */
    hitTest: function(x, y) {
      for (var i = this.pearlNodes.length - 1; i >= 0; i--) {
        var node = this.pearlNodes[i]
        var dx = x - node.x
        var dy = y - node.y
        if (dx * dx + dy * dy <= node.radius * node.radius) {
          return i
        }
      }
      return -1
    },

    onTouchStart: function(e) {
      if (!this.interactive) return
      var touches = e.touches || e.changedTouches
      if (!touches || touches.length === 0) return
      var touch = touches[0]
      var canvasRect = this._getCanvasRect()
      if (!canvasRect) return
      var x = touch.clientX - canvasRect.left
      var y = touch.clientY - canvasRect.top

      this._touchStartPos = { x: x, y: y }

      // 未命中任何珍珠 → 关闭弹窗
      var hitIndex = this.hitTest(x, y)
      if (hitIndex < 0) {
        this.selectedNode = null
      }
    },

    onTouchMove: function(e) {
      if (!this._touchStartPos) return
      var touches = e.touches || e.changedTouches
      if (!touches || touches.length === 0) return
      var touch = touches[0]
      var canvasRect = this._getCanvasRect()
      if (!canvasRect) return
      var x = touch.clientX - canvasRect.left
      var y = touch.clientY - canvasRect.top
      var dx = x - this._touchStartPos.x
      var dy = y - this._touchStartPos.y
      // 移动超过 10px 取消点击判定
      if (dx * dx + dy * dy > 100) {
        this._touchStartPos = null
      }
    },

    onTouchEnd: function(e) {
      if (!this._touchStartPos) return
      var touches = e.changedTouches
      if (!touches || touches.length === 0) {
        this._touchStartPos = null
        return
      }
      var touch = touches[0]
      var canvasRect = this._getCanvasRect()
      if (!canvasRect) {
        this._touchStartPos = null
        return
      }
      var x = touch.clientX - canvasRect.left
      var y = touch.clientY - canvasRect.top
      var dx = x - this._touchStartPos.x
      var dy = y - this._touchStartPos.y
      this._touchStartPos = null

      // 移动超过 10px 不算点击
      if (dx * dx + dy * dy > 100) return

      var hitIndex = this.hitTest(x, y)
      if (hitIndex >= 0) {
        this.selectedNode = this.pearlNodes[hitIndex]
      }
    },

    /* ===========================
     * 事件发射
     * =========================== */

    onAdd: function() {
      this.$emit('add')
    },

    onDelete: function() {
      if (!this.selectedNode) return
      // INFO/PLACE 为手工登记资源，删除键是 resource_items 的真实 id；
      // 节点登记时可能关联了联系人（contactId），但不能作为删除标识
      var id = this.selectedNode.id || this.selectedNode.contactId
      this.$emit('delete', { type: this.selectedNode.groupType, id: id })
      this.selectedNode = null
    },

    /** 联系：弹出方式选择 */
    onContact: function() {
      var self = this
      var node = this.selectedNode
      if (!node || !node.id) return
      uni.showActionSheet({
        itemList: ['电话', '微信', '见面', '其他'],
        success: function(res) {
          var types = ['PHONE', 'WECHAT', 'MEETING', 'OTHER']
          addPearlInteraction({
            itemId: node.id,
            interactionType: types[res.tapIndex],
            content: ''
          }).then(function(resp) {
            if (resp.code === 200) {
              uni.showToast({ title: '已记录', icon: 'success' })
              self.$emit('interaction-updated')
            } else {
              uni.showToast({ title: resp.message || '记录失败', icon: 'none' })
            }
          })
        }
      })
    },

    /** 调整优先级 */
    onAdjustPriority: function() {
      var self = this
      var node = this.selectedNode
      if (!node || !node.id) return
      uni.showActionSheet({
        itemList: ['高（大珍珠）', '中（默认）', '低（小珍珠）'],
        success: function(res) {
          updatePearlPriority({
            itemId: node.id,
            priority: res.tapIndex + 1
          }).then(function(resp) {
            if (resp.code === 200) {
              uni.showToast({ title: '已调整', icon: 'success' })
              self.$emit('interaction-updated')
            } else {
              uni.showToast({ title: resp.message || '调整失败', icon: 'none' })
            }
          })
        }
      })
    },

    /* ===========================
     * Canvas 初始化
     * =========================== */

    updateCanvasSize: function() {
      var self = this
      var query = uni.createSelectorQuery().in(this)
      query.select('.pearl-graph-wrapper').boundingClientRect(function(rect) {
        if (rect) {
          self.canvasWidth = rect.width || 340
        }
      }).exec()
    },

    initCanvas: function(cb) {
      var self = this
      uni.createSelectorQuery().in(this)
        .select('#' + 'pearlGraphCanvas')
        .fields({ node: true, size: true, rect: true })
        .exec(function(res) {
          try {
            if (self._destroyed) return
            if (!res || !res[0]) {
              if (cb) cb(false)
              return
            }
            var info = res[0]
            if (!info.node) {
              if (cb) cb(false)
              return
            }

            var canvas = info.node
            var width = info.width
            var height = info.height
            if (!width || !height) {
              var winWidth = 375
              try {
                var winInfo = uni.getWindowInfo()
                winWidth = winInfo.windowWidth || 375
              } catch (e2) {}
              width = Math.round((self.canvasWidth || 340) * winWidth / 750)
              height = Math.round((self.canvasHeight || 400) * winWidth / 750)
            }

            var pixelRatio = 2
            try {
              var system = uni.getWindowInfo()
              pixelRatio = system.pixelRatio || 2
            } catch (e) {}

            canvas.width = width * pixelRatio
            canvas.height = height * pixelRatio

            var ctx = canvas.getContext('2d')
            if (!ctx) {
              if (cb) cb(false)
              return
            }
            ctx.scale(pixelRatio, pixelRatio)

            self.ctx = ctx
            self._canvasNode = canvas
            self.canvasWidth = width
            self.canvasHeight = height
            self.dpr = pixelRatio
            self.canvasReady = true
            // 存储 canvas 在页面中的真实位置（触摸坐标转换用）
            if (info.rect) {
              self._canvasRect = { left: info.rect.left || 0, top: info.rect.top || 0 }
            }

            self.buildLayout()
            self.drawAll()

            if (cb) cb(true)
          } catch (e) {
            if (cb) cb(false)
          }
        })
    },

    /* ===========================
     * 工具方法
     * =========================== */

    _getCanvasRect: function() {
      if (this._canvasRect) {
        return {
          left: this._canvasRect.left,
          top: this._canvasRect.top,
          width: this.canvasWidth,
          height: this.canvasHeight
        }
      }
      return {
        left: 0,
        top: 0,
        width: this.canvasWidth,
        height: this.canvasHeight
      }
    },

    _hexToRgba: function(hex, alpha) {
      var r = parseInt(hex.slice(1, 3), 16)
      var g = parseInt(hex.slice(3, 5), 16)
      var b = parseInt(hex.slice(5, 7), 16)
      return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')'
    }
  }
}
</script>

<style scoped>
.pearl-graph-wrapper {
  position: relative;
  width: 100%;
  min-height: 200px;
  height: auto;
  margin: 10rpx 0;
  background: #FFFFFF;
  border-radius: 24rpx;
  overflow: visible;
}
.pearl-graph-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 详情弹窗 */
.pearl-detail-popup {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  transform: translate(-50%, -100%);
  margin-top: -16rpx;
}
.pearl-detail-popup.popup-below {
  transform: translate(-50%, 0);
  margin-top: 16rpx;
}
.popup-content {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  min-width: 220rpx;
  max-width: 300rpx;
  pointer-events: auto;
}
.popup-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.popup-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}
.popup-info {
  display: flex;
  flex-direction: column;
}
.popup-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
}
.popup-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6rpx;
}
.popup-tag {
  font-size: 18rpx;
  padding: 2rpx 10rpx;
  border-radius: 6rpx;
  margin-right: 8rpx;
}
.popup-tag-rel {
  background: #F1F5F9;
  color: #64748B;
}
.popup-skills {
  padding: 10rpx 0;
  border-top: 1rpx solid #F1F5F9;
}
.popup-skill-count {
  font-size: 22rpx;
  font-weight: 600;
  color: #F59E0B;
  display: block;
  margin-bottom: 6rpx;
}
.popup-skill-list {
  display: flex;
  flex-wrap: wrap;
}
.popup-skill-item {
  font-size: 20rpx;
  color: #64748B;
  margin-right: 8rpx;
  margin-bottom: 4rpx;
}
.popup-desc {
  padding: 10rpx 0;
  border-top: 1rpx solid #F1F5F9;
}
.popup-desc-text {
  font-size: 22rpx;
  color: #475569;
  display: block;
}
.popup-actions {
  display: flex;
  justify-content: center;
  margin-top: 12rpx;
}
.action-btn {
  display: inline-block;
  padding: 10rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}
.action-btn-primary {
  background: #F97316;
  color: #FFFFFF;
}
.action-btn-delete {
  background: #FEE2E2;
  color: #EF4444;
  margin-left: 16rpx;
}
.action-btn-contact {
  background: #3B82F6;
  color: #fff;
}
.action-btn-priority {
  background: #8B5CF6;
  color: #fff;
}
.popup-arrow {
  position: absolute;
  bottom: -8rpx;
  left: 50%;
  margin-left: -8rpx;
  width: 0;
  height: 0;
  border-left: 8rpx solid transparent;
  border-right: 8rpx solid transparent;
  border-top: 8rpx solid #FFFFFF;
}
.popup-arrow-down {
  bottom: auto;
  top: -8rpx;
  border-top: none;
  border-bottom: 8rpx solid #FFFFFF;
}

/* 空状态 */
.pearl-graph-empty,
.pearl-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 20rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  margin: 10rpx 0;
}
.empty-icon {
  font-size: 80rpx;
  margin-bottom: 16rpx;
}
.empty-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 8rpx;
}
.empty-hint {
  font-size: 24rpx;
  color: #94A3B8;
  margin-bottom: 24rpx;
}
.loading-text {
  font-size: 28rpx;
  color: #64748B;
}
</style>