<template>
  <div class="date-indicator-tabs">
    <button
      v-for="item in items"
      :key="item.key"
      type="button"
      class="date-indicator-tab"
      :class="{ active: modelValue === item.key }"
      @click="$emit('update:modelValue', item.key)"
    >
      <span class="tab-text">{{ item.label }}</span>
    </button>
  </div>
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    required: true
  },
  items: {
    type: Array,
    required: true
  }
})

defineEmits(['update:modelValue'])
</script>

<style scoped>
.date-indicator-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.date-indicator-tab {
  position: relative;
  width: 78px;
  height: 31px;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  cursor: pointer;
  flex-shrink: 0;
}

.date-indicator-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 78px;
  height: 31px;
  background: url('/images/日期指标.png') center / 100% 100% no-repeat;
  pointer-events: none;
}

.date-indicator-tab.active::before {
  background-image: url('/images/日期指标选中.png');
}

.tab-text {
  position: absolute;
  left: 50%;
  top: -3px;
  transform: translateX(-50%);
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
}

.date-indicator-tab.active .tab-text {
  font-size: 17px;
  font-weight: 700;
  color: #fff0c8;
  text-shadow: 0 0 8px rgba(255, 200, 80, 0.55);
}

.date-indicator-tab:hover::before {
  filter: brightness(1.06);
}
</style>
