<script setup>
// 自动刷新间隔选择：0=不自动刷新（仅手动），其余为秒数。父组件负责持久化与定时器。
import { useI18n } from 'vue-i18n'
import { Timer } from 'lucide-vue-next'

defineProps({ modelValue: { type: Number, default: 30 } })
const emit = defineEmits(['update:modelValue'])
const { t } = useI18n()
const OPTIONS = [0, 5, 10, 30, 60, 120]
</script>

<template>
  <label class="refresh-pick" :title="t('autoRefreshEvery')">
    <Timer />
    <select :value="modelValue" @change="emit('update:modelValue', Number($event.target.value))">
      <option v-for="o in OPTIONS" :key="o" :value="o">{{ o === 0 ? t('refreshManualOnly') : t('refreshEveryN', { n: o }) }}</option>
    </select>
  </label>
</template>

<style scoped>
.refresh-pick {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .55rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel, transparent);
  color: var(--muted);
}
.refresh-pick svg { width: 15px; height: 15px; }
.refresh-pick select {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: .85rem;
  padding: .45rem 0;
  outline: none;
  cursor: pointer;
}
</style>
