<template>
  <div class="container">
    <div class="svg-timeline">
      <svg :width="svgWidth" :height="svgHeight">
        <!-- <line
          :x1="lines[0].x1 - 100"
          :y1="lines[0].y1"
          :x2="lines[0].x1"
          :y2="lines[0].y1"
          stroke="#e8f2ff"
          stroke-width="2"
          marker-end="url(#arrow)"
        /> -->
        <!-- <line
          v-for="(line, idx) in lines"
          :key="'line' + idx"
          :x1="line.x1"
          :y1="line.y1"
          :x2="line.x2"
          :y2="line.y2"
          stroke="#e8f2ff"
          stroke-width="2"
          marker-end="url(#arrow)"
        /> -->
        <!-- <path
          v-for="(arc, idx) in arcPaths"
          :key="'arc' + idx"
          :d="arc.d"
          fill="none"
          stroke="red"
          stroke-width="2"
        /> -->
         <line
          :x1="lines[0].x1 - 100"
          :y1="lines[0].y1"
          :x2="lines[0].x1"
          :y2="lines[0].y1"
          stroke="#e8f2ff"
          stroke-width="2"
          marker-end="url(#arrow)"
        />
        <path
          :d="arcPaths"
          fill="none"
          stroke="#e8f2ff"
          stroke-width="2"
          marker-end="url(#arrow)"
        />
        <!-- <defs>
          <marker
            id="arrow"
            markerWidth="6"
            markerHeight="6"
            refX="6"
            refY="3"
            orient="auto"
            markerUnits="strokeWidth"
          >
            <path d="M0,0 L6,3 L0,6" fill="#333" />
          </marker>
        </defs> -->
        <!-- 节点 -->
        <circle
          v-for="(node, idx) in nodes.slice(0, nodes.length)"
          :key="'circle' + idx"
          :cx="node.x"
          :cy="node.y"
          r="4"
          fill="#fff"
          stroke="#1677ff"
          stroke-width="3"
        />
        <line
          v-for="(node, idx) in nodes.slice(0, nodes.length)"
          :key="'line' + idx"
          :x1="node.x"
          :y1="node.y + 2"
          :x2="node.x"
          :y2="node.dyms?node.y + 80:node.y + 50"
          stroke="#1677ff"
          stroke-width="2"
        />
        
        <text
          v-for="(node, idx) in nodes"
          :key="'dysj' + idx"
          :x="node.x + 10"
          :y="node.y + 30"
          text-anchor="start"
          fill="#1677ff"
          font-size="14"
          font-weight="600"
        >
          {{ node.dysj }}
        </text>
        <text
          v-for="(node, idx) in nodes"
          :key="'dyzt' + idx"
          :x="node.x + 10"
          :y="node.y + 50"
          text-anchor="start"
          fill="#3b414b"
          font-size="14"
          font-weight="bold"
        >
          {{ node.dyzt }}
        </text>
        <text
          v-for="(node, idx) in nodes"
          :key="'dyzt' + idx"
          :x="node.x + 10"
          :y="node.y + 70"
          text-anchor="start"
          fill="#84888e"
          font-size="14"
        >
          {{ node.dyms?node.dyms:'' }}
        </text>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: ['dataList'],
  data() {
    return {
      // dataList: [
      //   { dysj: "2025-07-08 14:20", dyzt: "起飞", dyms: '16票赞成 : 21票反对​ ' },
      //   { dysj: "2025-07-08 14:22", dyzt: "转弯" },
      //   { dysj: "2025-07-08 14:25", dyzt: "发现问题",dyms: '16票赞成 : 21票反对​ ' },
      //   { dysj: "2025-07-08 14:27", dyzt: "飞行",dyms: '16票赞成 : 21票反对​ ' },
      //   { dysj: "2025-07-08 14:29", dyzt: "飞行" },
      //   { dysj: "2025-07-08 14:31", dyzt: "飞行",dyms: '16票赞成 : 21票反对​ ' },
      //   { dysj: "2025-07-08 14:33", dyzt: "转弯" },
      //   { dysj: "2025-07-08 14:35", dyzt: "飞行" },
      //   { dysj: "2025-07-08 14:37", dyzt: "降落" },
      //   { dysj: "2025-07-08 14:39", dyzt: "降落" },
      //   { dysj: "2025-07-08 14:41", dyzt: "返航" },
      //   { dysj: "2025-07-08 14:42", dyzt: "返航1" },
      // ],
      maxPerRow: 5,
      nodeGapX: 200,
      nodeGapY: 100,
    };
  },
  computed: {
    nodes() {
      // 计算每个节点的坐标（蛇形）
      return this.dataList.map((item, idx) => {
        const row = Math.floor(idx / this.maxPerRow);
        const col = idx % this.maxPerRow;
        let x, y;
        const leftMargin = 10; // 你可以自定义这个值

        if (row % 2 === 0) {
          x = leftMargin + col * this.nodeGapX + 50;
        } else {
          x = leftMargin + (this.maxPerRow - 1 - col) * this.nodeGapX + 50;
        }
        // 节点纵坐标起始值
        y = 60 + row * this.nodeGapY;
        return { ...item, x, y, row };
      });
    },
    lines() {
      const arr = [];
      const gap = 0; // 间隔长度
      for (let i = 0; i < this.nodes.length - 1; i++) {
        const x1 = this.nodes[i].x;
        const y1 = this.nodes[i].y;
        const x2 = this.nodes[i + 1].x;
        const y2 = this.nodes[i + 1].y;
        const dx = x2 - x1;
        const dy = y2 - y1;
        const len = Math.sqrt(dx * dx + dy * dy);
        // 计算起点和终点都缩进 gap
        const ratioStart = gap / len;
        const ratioEnd = (len - gap) / len;
        const sx = x1 + dx * ratioStart;
        const sy = y1 + dy * ratioStart;
        const tx = x1 + dx * ratioEnd;
        const ty = y1 + dy * ratioEnd;
        arr.push({
          x1: sx,
          y1: sy,
          x2: tx,
          y2: ty,
        });
      }
      return arr;
    },
    arcPaths() {
      if (this.nodes.length < 2) return '';
      
      let path = `M ${this.nodes[0].x} ${this.nodes[0].y}`;
      
      for (let i = 1; i < this.nodes.length; i++) {
        const prev = this.nodes[i - 1];
        const curr = this.nodes[i];
        console.log('prev',prev);
        
        
        // 判断是否是行尾转折点
        const isTurnPoint = i % 5 === 0;
        
        if (isTurnPoint) {
          // 计算半圆路径
          const radius = 10 / 2;
          if (prev.row % 2 === 0) {
            // 偶数行向右凸半圆
            path += ` 
              L ${prev.x + radius} ${prev.y}
              A ${radius} ${radius} 0 0 1 ${curr.x - radius} ${curr.y}
              L ${curr.x} ${curr.y}`;
          } else {
            // 奇数行向左凸半圆
            path += ` 
              L ${prev.x - radius} ${prev.y}
              A ${radius} ${radius} 0 0 0 ${curr.x + radius} ${curr.y}
              L ${curr.x} ${curr.y}`;
          }
        } else {
          // 同行节点间用直线连接
          path += ` L ${curr.x} ${curr.y}`;
        }
      }
      
      return path;
    },
    svgWidth() {
      return this.maxPerRow * this.nodeGapX + 100;
    },
    svgHeight() {
      // SVG高度
      return (
        Math.ceil(this.dataList.length / this.maxPerRow) * this.nodeGapY + 40
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.svg-timeline {
  width: 1000px;
  // background-size: 100% 100%;
  // position: relative;
  // .title {
  //   position: absolute;
  //   top: 0;
  //   left: 32px;
  //   width: 100%;
  //   height: 100%;
  //   font-family: YouSheBiaoTiHei;
  //   font-size: 16px;
  //   color: #ffffff;
  //   line-height: 24px;
  //   background: linear-gradient(90deg, #ffffff 0%, #79c2ff 100%);
  //   -webkit-background-clip: text;
  //   -webkit-text-fill-color: transparent;
  //   display: flex;
  //   align-items: center;
  //   height: 40px;
  //   img {
  //     width: 12px;
  //     height: 24px;
  //   }
  // }
}
</style>
