<template>
  <div class="dv-decoration-14" :ref="ref">
    <svg :width="width" :height="height">
      <!-- 任意形状的图形 -->
      <path :d="svgPoints"
            :style="{'fill': mergedColor[0],'stroke':'black','stroke-width':0}"
            @mouseover="startTipTimer"
            @mouseout="cancelTipTimer"
            @mousemove="updateMousePosition"
      />
    </svg>
    <!-- Tooltip 提示框 -->
    <div v-if="isTipVisible" :style="tooltipStyle" class="tooltip" v-html="tipContent" >
      {{ tipContent }}
    </div>
  </div>
</template>

<script>
import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default {
  name: 'DvDecoration14',
  mixins: [autoResize],
  props: {
    color: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      ref: 'decoration-14',
      defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
      mergedColor: [],
      isTipVisible: false,
      points: [{ x: 0, y: 0 }, { x: 50, y: 0 }, { x: 50, y: 50 }, { x: 0, y: 50 }],
      tipContent: '',
      mouseX: 0, // 初始化 mouseX
      mouseY: 0 // 初始化 mouseY
    }
  },
  watch: {
    color () {
      const { mergeColor } = this

      mergeColor()
    }
  },
  computed: {

    tooltipStyle () {
      return {
        position: 'fixed',
        top: `${this.mouseY + 1}px`, // tooltip 距离鼠标 2 像素
        left: `${this.mouseX + 1}px`,
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        color: '#fff',
        padding: '5px',
        borderRadius: '3px',
        pointerEvents: 'none' // 防止 tooltip 捕获鼠标事件
      }
    },
    svgPoints: function () {
      let svg = ''
      for (let i = 0; i < this.points.length; i++) {
        if (i === 0) {
          svg += `M${this.points[i].x * this.width / 100} ${this.points[i].y * this.height / 100} `
        } else {
          svg += `L${this.points[i].x * this.width / 100} ${this.points[i].y * this.height / 100} `
        }
      }

      return svg + 'Z'
    }
  },
  methods: {
    mergeColor () {
      const { color, defaultColor } = this

      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
      this.points = this.mergedColor[1]
      this.tipContent = this.mergedColor[2]
    },
    startTipTimer () {
      this.cancelTipTimer() // 清除之前的定时器
      this.tipTimer = setTimeout(() => {
        this.isTipVisible = true
      }, 500) // 延迟 500 毫秒显示
    },
    cancelTipTimer () {
      if (this.tipTimer) {
        clearTimeout(this.tipTimer)
        this.tipTimer = null
      }
      this.isTipVisible = false // 鼠标移开时隐藏 tooltip
    },
    updateMousePosition (event) {
      const svgRef = this.$refs[this.ref]
      const svgRect = svgRef?.getBoundingClientRect()
      if (svgRect) {
        this.mouseX = event.clientX - svgRect.left
        this.mouseY = event.clientY - svgRect.top
      }
    }
  },
  mounted () {
    const { mergeColor } = this

    mergeColor()
  }
}
</script>

<style lang="less">
.dv-decoration-14 {
  width: 100%;
  height: 100%;
  display: flex;
  pointer-events: none; /* 外层容器不拦截鼠标事件 */

  .tooltip {
    z-index: 1000;
  }
}

svg {
  pointer-events: none; /* 整个 SVG 不拦截鼠标事件 */
}

path {
  pointer-events: auto; /* 只有图形部分拦截鼠标事件 */
}

</style>
