<template>
  <div 
    class="program-list"
    :class="{ 'is-active': isActive }"
  >
    <div
      v-for="program in programs"
      :key="program.id"
      class="program-item"
      :class="{ 
        active: modelValue?.id === program.id,
        current: program.isCurrent 
      }"
      @click="selectProgram(program)"
    >
      <div class="program-time">{{ program.time }}</div>
      <div class="program-title">
        {{ program.title }}
        <span v-if="program.isCurrent" class="current-badge">当前</span>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Object,
    default: null
  },
  programs: {
    type: Array,
    default: () => []
  },
  isActive: {
    type: Boolean,
    default: false
  }
});

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

// 选择节目
function selectProgram(program) {
  emit('update:modelValue', program);
  emit('select', program);
}
</script>

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

.program-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
  border-left: 3px solid transparent;
}

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

.program-item.active {
  background: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}

.program-item.current {
  border-left-color: #ff6b6b;
}

.program-time {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-family: monospace;
}

.program-title {
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-badge {
  font-size: 10px;
  background: #ff6b6b;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}

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