<template>
  <section class="doc-filters" aria-label="单据筛选">
    <div class="filter-item">
      <span class="filter-label">申请月份</span>
      <Dropdown v-model="docFilters.month" :options="docMonths" placeholder="选择月份" appendTo="body" class="filter-dropdown">
        <template #option="{ option }">
          {{ formatMonth(option) }}
        </template>
        <template #value="{ value }">
          {{ formatMonth(value) }}
        </template>
      </Dropdown>
    </div>
    <div class="filter-item">
      <span class="filter-label">申请类型</span>
      <Dropdown v-model="docFilters.type" :options="docTypes" placeholder="选择类型" appendTo="body" class="filter-dropdown" />
    </div>
    <div class="filter-item">
      <span class="filter-label">单据状态</span>
      <Dropdown v-model="docFilters.status" :options="docStatuses" placeholder="选择状态" appendTo="body" class="filter-dropdown" />
    </div>
  </section>
</template>

<script setup>
import Dropdown from 'primevue/dropdown'

defineProps({
  docFilters: { type: Object, required: true },
  docMonths: { type: Array, required: true },
  docTypes: { type: Array, required: true },
  docStatuses: { type: Array, required: true }
})

function formatMonth(m) {
  if (!m) return ''
  const [y, mm] = m.split('-')
  return `${y}年${parseInt(mm)}月`
}
</script>

<style scoped>
.doc-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.filter-item { display: grid; gap: 6px; }
.filter-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.filter-dropdown { width: 100%; }
</style>
