<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'

const props = defineProps({
  label: {
    type: String,
    required: true
  },
  items: {
    type: Array,
    default: () => []
  },
  intervalMs: {
    type: Number,
    default: 3000
  }
})

const currentIndex = ref(0)
const paused = ref(false)
let timer = null

const labelLines = computed(() => {
  const text = props.label || ''
  if (text.length <= 2) {
    return [text]
  }
  if (text.length === 4) {
    return [text.slice(0, 2), text.slice(2)]
  }
  const mid = Math.ceil(text.length / 2)
  return [text.slice(0, mid), text.slice(mid)]
})

const currentItem = computed(() => props.items[currentIndex.value] ?? null)

const pageKey = computed(() => {
  const item = currentItem.value
  return item?.id != null ? String(item.id) : `idx-${currentIndex.value}`
})

function stopTimer() {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

function startTimer() {
  stopTimer()
  if (props.items.length <= 1) {
    return
  }
  timer = setInterval(() => {
    if (!paused.value) {
      currentIndex.value = (currentIndex.value + 1) % props.items.length
    }
  }, props.intervalMs)
}

watch(
  () => props.items,
  () => {
    currentIndex.value = 0
    startTimer()
  },
  { deep: true }
)

onMounted(startTimer)
onUnmounted(stopTimer)
</script>

<template>
  <div class="std-row" @mouseenter="paused = true" @mouseleave="paused = false">
    <div class="std-row__badge" :title="label">
      <span v-for="(line, idx) in labelLines" :key="idx" class="std-row__badge-line">{{ line }}</span>
    </div>
    <div class="std-row__bar">
      <div class="std-row__glow" aria-hidden="true" />
      <div class="std-row__viewport">
        <Transition v-if="items.length" name="std-page" mode="out-in">
          <div :key="pageKey" class="std-row__item">
            <span class="std-row__name" :title="currentItem?.standardName">
              {{ currentItem?.standardName }}
            </span>
            <span v-if="currentItem?.standardTypeName" class="std-row__type">
              {{ currentItem.standardTypeName }}
            </span>
          </div>
        </Transition>
        <div v-else class="std-row__empty">暂无标准</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.std-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  flex: 1;
  min-height: 0;
  max-height: 24px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.std-row:hover {
  background: rgba(69, 240, 184, 0.12);
  box-shadow: inset 0 0 0 1px rgba(69, 240, 184, 0.45);
}

.std-row__badge {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, #eed68a 0%, #b8923a 42%, #6b5220 100%);
  box-shadow: 0 0 6px rgba(238, 214, 138, 0.28);
  border: 1px solid rgba(238, 214, 138, 0.4);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.std-row:hover .std-row__badge {
  border-color: rgba(255, 232, 160, 0.9);
  box-shadow:
    0 0 10px rgba(238, 214, 138, 0.65),
    0 0 14px rgba(69, 240, 184, 0.35);
  transform: scale(1.06);
}

.std-row__badge-line {
  font-size: 8px;
  font-weight: 600;
  color: #fff;
  line-height: 10px;
  transform: scale(0.95);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.std-row__bar {
  flex: 1;
  min-width: 0;
  height: 24px;
  position: relative;
}

.std-row__glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 10px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    rgba(238, 214, 138, 0.38) 0%,
    rgba(238, 214, 138, 0.1) 40%,
    transparent 100%
  );
  pointer-events: none;
  transition: background 0.2s ease;
}

.std-row:hover .std-row__glow {
  background: linear-gradient(
    90deg,
    rgba(238, 214, 138, 0.62) 0%,
    rgba(69, 240, 184, 0.22) 50%,
    transparent 100%
  );
}

.std-row__viewport {
  position: relative;
  z-index: 1;
  height: 24px;
  overflow: hidden;
  perspective: 280px;
}

.std-row__item {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  box-sizing: border-box;
  backface-visibility: hidden;
}

.std-row__name {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.std-row:hover .std-row__name {
  color: #b8ffe8;
}

.std-row__type {
  flex-shrink: 0;
  font-size: 9px;
  color: rgba(232, 238, 245, 0.6);
  max-width: 56px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.std-row:hover .std-row__type {
  color: rgba(184, 255, 232, 0.85);
}

.std-row__empty {
  height: 24px;
  line-height: 24px;
  padding: 0 4px;
  font-size: 10px;
  color: #6a9f90;
}

/* 整页翻入翻出（非文字滚动） */
.std-page-enter-active,
.std-page-leave-active {
  transition:
    opacity 0.32s ease,
    transform 0.32s ease;
}

.std-page-enter-from {
  opacity: 0;
  transform: rotateX(75deg);
  transform-origin: center bottom;
}

.std-page-leave-to {
  opacity: 0;
  transform: rotateX(-75deg);
  transform-origin: center top;
}
</style>
