<template>
  <section class="doc-filters" aria-label="单据筛选">
    <label class="filter-item">
      <span class="filter-label">申请月份</span>
      <EnterpriseSelect
        v-model="docFilters.month"
        :options="monthOptions"
        placeholder="选择月份"
      />
    </label>

    <label class="filter-item">
      <span class="filter-label">申请类型</span>
      <EnterpriseSelect
        v-model="docFilters.type"
        :options="docTypes"
        placeholder="选择类型"
      />
    </label>

    <label class="filter-item">
      <span class="filter-label">单据状态</span>
      <EnterpriseSelect
        v-model="docFilters.status"
        :options="docStatuses"
        placeholder="选择状态"
      />
    </label>
  </section>
</template>

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

import EnterpriseSelect from '../shared/EnterpriseSelect.vue'

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

const monthOptions = computed(() =>
  props.docMonths.map((month) => ({
    label: formatMonth(month),
    value: month
  }))
)

function formatMonth(month) {
  if (!month) return ''
  const [year, rawMonth] = String(month).split('-')
  return `${year}年${Number.parseInt(rawMonth, 10)}月`
}
</script>

<style scoped>
.doc-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px 24px;
  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;
}

@media (max-width: 760px) {
  .doc-filters {
    grid-template-columns: 1fr;
    padding-inline: 16px;
  }
}
</style>
