<template>
  <div class="kole-slider" :class="{ 'is-disabled': disabled }">
    <div class="kole-slider-track" ref="track" @pointerdown="onTrackDown">
      <div class="kole-slider-rail"></div>
      <div class="kole-slider-fill" :style="fillStyle"></div>
      <div class="kole-slider-ticks" v-if="showTicks">
        <div v-for="(t, i) in tickPercents" :key="i" class="kole-slider-tick" :style="{ left: t + '%' }"></div>
      </div>
      <div
        v-for="(h, i) in handlePercents" :key="i"
        class="kole-slider-handle" :style="{ left: h + '%' }"
        @pointerdown.stop="onHandleDown(i, $event)"
      ></div>
    </div>
    <div class="kole-slider-value" v-if="showInput">
      <template v-if="range">
        <input type="number" :value="modelValue[0]" @change="onInput(0, $event)" />
        <span>—</span>
        <input type="number" :value="modelValue[1]" @change="onInput(1, $event)" />
      </template>
      <input v-else type="number" :value="modelValue" @change="onInput(null, $event)" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onBeforeUnmount } from 'vue';

const props = defineProps({
  modelValue: { type: [Number, Array], default: 0 },   // number | [lo, hi]
  min: { type: Number, default: 0 },
  max: { type: Number, default: 100 },
  step: { type: Number, default: 1 },
  range: { type: Boolean, default: false },
  showTicks: { type: Boolean, default: false },
  showInput: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false }
});
const emit = defineEmits(['update:modelValue', 'change']);

const track = ref(null);
const dragIndex = ref(-1);

const pct = (v) => ((v - props.min) / (props.max - props.min)) * 100;
const clamp = (v) => {
  const snapped = Math.round((v - props.min) / props.step) * props.step + props.min;
  return Math.max(props.min, Math.min(props.max, snapped));
};

const handlePercents = computed(() => {
  if (props.range) return [pct(props.modelValue[0]), pct(props.modelValue[1])];
  return [pct(props.modelValue)];
});
const fillStyle = computed(() => {
  if (props.range) {
    const lo = pct(props.modelValue[0]), hi = pct(props.modelValue[1]);
    return { left: lo + '%', width: (hi - lo) + '%' };
  }
  return { left: '0%', width: pct(props.modelValue) + '%' };
});
const tickPercents = computed(() => {
  const n = Math.floor((props.max - props.min) / props.step);
  return Array.from({ length: n + 1 }, (_, i) => pct(props.min + i * props.step));
});

function setVal(next) {
  emit('update:modelValue', next);
  emit('change', next);
}

function valueFromClientX(x) {
  const rect = track.value.getBoundingClientRect();
  return clamp(props.min + (x - rect.left) / rect.width * (props.max - props.min));
}

function onHandleDown(i, e) {
  if (props.disabled) return;
  e.preventDefault();
  dragIndex.value = i;
  window.addEventListener('pointermove', onMove);
  window.addEventListener('pointerup', onUp);
}
function onTrackDown(e) {
  if (props.disabled || e.target.classList.contains('kole-slider-handle')) return;
  const nv = valueFromClientX(e.clientX);
  if (props.range) {
    const i = Math.abs(nv - props.modelValue[0]) <= Math.abs(nv - props.modelValue[1]) ? 0 : 1;
    const arr = [...props.modelValue]; arr[i] = nv; arr.sort((a, b) => a - b);
    setVal(arr);
  } else {
    setVal(nv);
  }
}
function onMove(e) {
  if (dragIndex.value < 0) return;
  const nv = valueFromClientX(e.clientX);
  if (props.range) {
    const arr = [...props.modelValue]; arr[dragIndex.value] = nv; arr.sort((a, b) => a - b);
    setVal(arr);
  } else {
    setVal(nv);
  }
}
function onUp() {
  dragIndex.value = -1;
  window.removeEventListener('pointermove', onMove);
  window.removeEventListener('pointerup', onUp);
}
function onInput(i, e) {
  const v = +e.target.value;
  if (props.range) {
    const arr = [...props.modelValue]; arr[i] = v; arr.sort((a, b) => a - b);
    setVal(arr);
  } else {
    setVal(v);
  }
}
onBeforeUnmount(onUp);
</script>

<!-- 样式对齐 组件7.txt SliderInput 规范 -->
<style scoped>
.kole-slider { position: relative; display: flex; align-items: center; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); }
.kole-slider.is-disabled { opacity: .5; pointer-events: none; }
.kole-slider-track { position: relative; flex: 1; height: 40px; }
.kole-slider-rail { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: #E8ECF1; border-radius: 2px; }
.kole-slider-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; background: #2F54EB; border-radius: 2px; }
.kole-slider-handle { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  border: 2px solid #2F54EB; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: box-shadow .15s; }
.kole-slider-handle:hover, .kole-slider-handle:focus { box-shadow: 0 0 0 4px rgba(47,84,235,0.2); outline: none; }
.kole-slider-ticks { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 0; pointer-events: none; }
.kole-slider-tick { position: absolute; top: 0; width: 2px; height: 8px; background: #E8ECF1; transform: translate(-50%, -50%); }
.kole-slider-value { margin-left: 12px; font-size: 14px; color: #262626; display: inline-flex; align-items: center; gap: 6px; }
.kole-slider-value input { width: 56px; height: 28px; text-align: center; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; color: #262626; }
.kole-slider-value input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
</style>
