<template>
  <div class="scrollbar-container">
    <div class="scrollbar-track" ref="trackRef" @click="handleTrackClick">
      <!-- 固定分割点20：不可拖动、不可删除、不显示标签 -->
      <div
        class="scrollbar-node"
        :style="{ left: fixedNode.position + '%' }"
      >
        <div class="node-dot fixed">
          <span class="dot-value">{{ fixedNode.value }}个</span>
        </div>
      </div>
      <!-- 新增节点 -->
      <div
        v-for="(node, index) in nodes"
        :key="index"
        class="scrollbar-node"
        :style="{ left: node.position + '%' }"
      >
        <div class="node-label-x">
          <span class="node-label-text">计价{{ index + 3 }}</span>
          <span class="node-x" @click.stop="removeNode(index)">×</span>
        </div>
        <div
          class="node-dot"
          :class="{ dragging: draggingIndex === index }"
          @mousedown="handleNodeMouseDown(index, $event)"
        >
          <span class="dot-value">{{ node.value }}个</span>
        </div>
      </div>
      <!-- 计价1标记在最左 -->
      <div class="section-label label-left">计价1</div>
      <!-- 计价2标记在最右 -->
      <div class="section-label label-right">计价2</div>
    </div>
    <div class="price-section-list">
      <!-- 固定区间 -->
      <div class="price-section">
        <span class="section-label">计价1：</span>
        <span>当"穴位/经络/部位" ≤ 20个时，</span>
        <input v-model="fixedPrices[0]" class="section-input" placeholder="请输入" />
        <span>元</span>
      </div>
      <div class="price-section">
        <span class="section-label">计价2：</span>
        <span>当"穴位/经络/部位" > 20个时，</span>
        <input v-model="fixedPrices[1]" class="section-input" placeholder="请输入" />
        <span>元</span>
      </div>
      <!-- 新增节点的独立区间 -->
      <div
        v-for="(node, idx) in nodes"
        :key="idx"
        class="price-section"
      >
        <span class="section-label">计价{{ idx + 3 }}：</span>
        <span>当"穴位/经络/部位" = {{ node.value }}个时，</span>
        <input v-model="node.price" class="section-input" placeholder="请输入" />
        <span>元</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

interface ScrollbarNode {
  position: number // 百分比
  value: number    // 实际数值
  price: string    // 该节点的价格
}

const min = 1
const max = 50

export default defineComponent({
  name: 'InteractiveScrollbar',
  setup() {
    const trackRef = ref<HTMLElement | null>(null)
    // 固定分割点20
    const fixedNode: ScrollbarNode = {
      value: 20,
      position: ((20 - min) / (max - min)) * 100,
      price: ''
    }
    // 新增节点
    const nodes = ref<ScrollbarNode[]>([])
    const draggingIndex = ref<number | null>(null)
    // 固定区间的价格
    const fixedPrices = ref(['', ''])

    // 轨道点击新增节点
    const handleTrackClick = (event: MouseEvent) => {
      if (!trackRef.value) return
      const trackRect = trackRef.value.getBoundingClientRect()
      const clickPosition = (event.clientX - trackRect.left) / trackRect.width
      const positionPercentage = Math.min(Math.max(clickPosition * 100, 0), 100)
      const value = Math.round(positionPercentage / 100 * (max - min) + min)
      if (value === 20) return // 不允许和固定点重叠
      if (nodes.value.some(n => n.value === value)) return
      nodes.value.push({ position: positionPercentage, value, price: '' })
    }

    // 删除节点
    const removeNode = (index: number) => {
      nodes.value.splice(index, 1)
    }

    // 节点圆点鼠标按下，开始拖动
    const handleNodeMouseDown = (index: number, event: MouseEvent) => {
      event.stopPropagation()
      draggingIndex.value = index
      document.addEventListener('mousemove', handleMouseMove)
      document.addEventListener('mouseup', handleMouseUp)
    }

    // 拖动中
    const handleMouseMove = (event: MouseEvent) => {
      if (draggingIndex.value === null || !trackRef.value) return
      const node = nodes.value[draggingIndex.value]
      const trackRect = trackRef.value.getBoundingClientRect()
      let position = (event.clientX - trackRect.left) / trackRect.width
      position = Math.min(Math.max(position, 0), 1)
      const positionPercentage = position * 100
      const value = Math.round(position * (max - min) + min)
      if (value === 20) return // 不允许和固定点重叠
      if (nodes.value.some((n, idx) => idx !== draggingIndex.value && n.value === value)) return
      node.position = positionPercentage
      node.value = value
    }

    // 拖动结束
    const handleMouseUp = () => {
      draggingIndex.value = null
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
    }

    return {
      min,
      max,
      fixedNode,
      trackRef,
      nodes,
      draggingIndex,
      handleTrackClick,
      handleNodeMouseDown,
      removeNode,
      fixedPrices
    }
  }
})
</script>

<style scoped>
.scrollbar-container {
  width: 100%;
  padding: 20px 0;
}

.scrollbar-track {
  position: relative;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
}

.section-label.label-left {
  position: absolute;
  left: 0;
  top: -28px;
  color: #faad14;
  font-weight: bold;
  font-size: 14px;
  z-index: 2;
}
.section-label.label-right {
  position: absolute;
  right: 0;
  top: -28px;
  color: #faad14;
  font-weight: bold;
  font-size: 14px;
  z-index: 2;
}

.scrollbar-node {
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.1s linear;
}

.node-label-x {
  position: absolute;
  left: 50%;
  top: -38px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 3;
}
.node-label-text {
  background: #faad14;
  color: #fff;
  font-size: 12px;
  border-radius: 4px 0 0 4px;
  padding: 2px 8px;
  font-weight: bold;
  user-select: none;
}
.node-x {
  background: #fff;
  color: #ff4d4f;
  font-size: 16px;
  font-weight: bold;
  border-radius: 0 4px 4px 0;
  border: 1px solid #ff4d4f;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  margin-left: 2px;
  transition: background 0.2s;
  user-select: none;
}
.node-x:hover {
  background: #ffeded;
}

.node-dot {
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #ff6b6b;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  border: 2px solid #fff;
  box-shadow: 0 0 2px #888;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.node-dot.fixed {
  background-color: #bdbdbd;
  cursor: not-allowed;
}
.node-dot.dragging {
  background-color: #ffa726;
}

.dot-value {
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  pointer-events: none;
  user-select: none;
}

.price-section-list {
  margin-top: 32px;
}
.price-section {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.section-label {
  font-weight: 500;
  color: #222;
  margin-right: 8px;
}
.section-input {
  width: 120px;
  margin: 0 8px;
  padding: 4px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
</style>
