<template>
  <div class="period-status-strip" :class="'is-' + active.status">
    <div class="pb-left">
      <span class="status-dot" :class="statusDotClass"></span>
      <div class="pb-info">
        <div class="pb-name">{{ active.name }}</div>
        <div class="pb-date">{{ active.startDate }} ~ {{ active.endDate }}</div>
      </div>
      <el-tag :type="statusTagType" effect="dark" size="small" round>{{ statusLabel }}</el-tag>
    </div>
    <div class="pb-right" v-if="switchablePeriods.length > 1">
      <el-dropdown trigger="click" @command="handleSwitch">
        <span class="pb-switch-btn">
          切换周期 <el-icon><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="p in switchablePeriods"
              :key="p.id"
              :command="p.id"
              :class="{ 'is-active': p.id === active.id }"
            >
              <span class="pbd-name">{{ p.name }}</span>
              <el-tag :type="statusTag(p.status)" size="small" effect="plain" round>{{ statusText(p.status) }}</el-tag>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

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

const props = defineProps({
  periods: { type: Array, required: true },
  modelValue: { type: Number, default: null }
})

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

// Only show non-archived, non-future-draft periods (active = DRAFT/OKR_ALIGN/EXECUTING/ASSESSING)
const activePeriods = computed(() => {
  return (props.periods || []).filter(p => p.status !== 'ARCHIVED')
})

const active = computed(() => {
  const found = (props.periods || []).find(p => p.id === props.modelValue)
  return found || activePeriods.value[0] || {}
})

const switchablePeriods = computed(() => activePeriods.value)

const statusDotClass = computed(() => {
  return { DRAFT: '', OKR_ALIGN: 'is-active', EXECUTING: 'is-success', ASSESSING: 'is-warning', ARCHIVED: '' }[active.value.status] || ''
})

const statusLabel = computed(() => {
  return { DRAFT: '待发布', OKR_ALIGN: '对齐中', EXECUTING: '执行中', ASSESSING: '考评中', ARCHIVED: '已归档' }[active.value.status] || ''
})

const statusTagType = computed(() => {
  return { ASSESSING: 'warning', EXECUTING: 'success', OKR_ALIGN: '', DRAFT: 'info', ARCHIVED: 'info' }[active.value.status] || 'info'
})

function statusText(s) {
  return { DRAFT: '待发布', OKR_ALIGN: '对齐中', EXECUTING: '执行中', ASSESSING: '考评中', ARCHIVED: '已归档' }[s] || s
}

function statusTag(s) {
  return { ASSESSING: 'warning', EXECUTING: 'success', OKR_ALIGN: '', DRAFT: 'info', ARCHIVED: 'info' }[s] || 'info'
}

function handleSwitch(id) {
  emit('update:modelValue', id)
}
</script>

<style scoped>
.period-status-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-radius: 10px; margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
}
.period-status-strip.is-OKR_ALIGN { border-left: 3px solid var(--color-accent); }
.period-status-strip.is-EXECUTING { border-left: 3px solid var(--color-success); }
.period-status-strip.is-ASSESSING { border-left: 3px solid var(--color-warning); }
.period-status-strip.is-ARCHIVED { border-left: 3px solid var(--color-border); }

.pb-left { display: flex; align-items: center; gap: 12px; }
.pb-name { font-size: 16px; font-weight: 700; color: var(--color-text); }
.pb-date { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }

.pb-switch-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; background: rgba(255,255,255,0.8); border-radius: 8px;
  cursor: pointer; font-size: 13px; color: var(--color-text-secondary); font-weight: 500;
  border: 1px solid var(--color-border-soft); transition: all 0.15s;
}
.pb-switch-btn:hover { border-color: var(--color-brand); color: var(--color-brand); }

.pbd-name { margin-right: 8px; font-size: 13px; }
.is-active .pbd-name { color: var(--color-brand); font-weight: 600; }
</style>
