<template>
  <div class="word-book-filter">
    <div class="filter-left">
      <LmFilterTabs v-model="gradeValue" :options="gradeOptions" mode="compact" />
      <LmFilterTabs v-model="statusValue" :options="statusOptions" mode="compact" />

      <template v-if="mode === 'textbook'">
        <LmSelect v-model="editionValue" :options="editionOptions" width="150px" />
        <LmSelect v-model="bookValue" :options="bookOptions" width="180px" />
        <LmSelect v-model="unitValue" :options="unitOptions" width="130px" />
      </template>
    </div>

    <div class="filter-count">数量:{{ count }}</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import LmFilterTabs, { type FilterTabOption } from "@/components/lm/LmFilterTabs.vue";
import LmSelect, { type LmSelectOption } from "@/components/lm/LmSelect.vue";

type Mode = "stage" | "textbook";

const props = defineProps<{
  mode: Mode;
  grade: string;
  status: string;
  edition: string | number;
  book: string | number;
  unit: string | number;
  count: number;
  gradeOptions: FilterTabOption[];
  statusOptions: FilterTabOption[];
  editionOptions: LmSelectOption[];
  bookOptions: LmSelectOption[];
  unitOptions: LmSelectOption[];
}>();

const emit = defineEmits<{
  "update:grade": [value: string];
  "update:status": [value: string];
  "update:edition": [value: string | number];
  "update:book": [value: string | number];
  "update:unit": [value: string | number];
}>();

const gradeValue = computed({
  get: () => props.grade,
  set: (value: string) => emit("update:grade", value),
});

const statusValue = computed({
  get: () => props.status,
  set: (value: string) => emit("update:status", value),
});

const editionValue = computed({
  get: () => props.edition,
  set: (value: string | number) => emit("update:edition", value),
});

const bookValue = computed({
  get: () => props.book,
  set: (value: string | number) => emit("update:book", value),
});

const unitValue = computed({
  get: () => props.unit,
  set: (value: string | number) => emit("update:unit", value),
});
</script>

<style scoped lang="scss">
.word-book-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
  padding: 16px 28px;
}

.filter-left {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.filter-count {
  color: #333;
  font-size: 22px;
  white-space: nowrap;
}
</style>
