<template>
  <div 
    class="date-list"
    :class="{ 'is-active': isActive }"
  >
    <div
      v-for="date in dates"
      :key="date.value"
      class="date-item"
      :class="{ active: modelValue === date.value }"
      @click="selectDate(date.value)"
    >
      <div class="date-day">{{ date.day }}</div>
      <div class="date-label">{{ date.label }}</div>
    </div>
  </div>
</template>

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

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  isActive: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'select']);

// 生成日期列表（今天、明天、后天...）
const dates = computed(() => {
  const list = [];
  const today = new Date();
  const labels = ['今天', '明天', '后天'];
  
  for (let i = 0; i < 7; i++) {
    const date = new Date(today);
    date.setDate(today.getDate() + i);
    
    const value = date.toISOString().split('T')[0];
    const day = `${date.getMonth() + 1}/${date.getDate()}`;
    const label = i < 3 ? labels[i] : `${date.getMonth() + 1}月${date.getDate()}日`;
    
    list.push({ value, day, label });
  }
  
  return list;
});

// 选择日期
function selectDate(dateValue) {
  emit('update:modelValue', dateValue);
  emit('select', dateValue);
}
</script>

<style scoped>
.date-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.8);
  padding: 8px;
}

.date-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
}

.date-item:hover,
.date-item.active {
  background: rgba(255, 255, 255, 0.1);
}

.date-item.active {
  background: rgba(255, 255, 255, 0.2);
}

.date-day {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.date-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* TV 模式焦点样式 */
.is-active .date-item:focus {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
</style>
