<script setup lang="ts">
/**
 * 文件职责：员工列表筛选条。
 * 1. 提供关键词、角色、状态筛选。
 * 2. 仅透出筛选事件，不处理请求。
 */
import type { StaffRoleType, StaffStatus } from '#/api/store-staff';

import { Button, Input, Select } from 'ant-design-vue';

interface RoleOption {
  label: string;
  value: StaffRoleType;
}

interface StatusOption {
  label: string;
  value: StaffStatus;
}

interface Props {
  isLoading: boolean;
  keyword: string;
  onSetKeyword: (value: string) => void;
  onSetRoleType: (value: '' | StaffRoleType) => void;
  onSetStatus: (value: '' | StaffStatus) => void;
  roleOptions: RoleOption[];
  roleType: '' | StaffRoleType;
  status: '' | StaffStatus;
  statusOptions: StatusOption[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'reset'): void;
  (event: 'search'): void;
}>();

const roleSelectOptions = [
  { label: '全部角色', value: '' },
  ...props.roleOptions,
];

const statusSelectOptions = [
  { label: '全部状态', value: '' },
  ...props.statusOptions,
];

/** 统一处理角色筛选值。 */
function handleRoleChange(value: unknown) {
  if (typeof value !== 'string') {
    props.onSetRoleType('');
    return;
  }
  props.onSetRoleType(value as '' | StaffRoleType);
}

/** 统一处理状态筛选值。 */
function handleStatusChange(value: unknown) {
  if (typeof value !== 'string') {
    props.onSetStatus('');
    return;
  }
  props.onSetStatus(value as '' | StaffStatus);
}
</script>

<template>
  <div class="staff-filter-bar">
    <Input
      :value="props.keyword"
      class="staff-filter-input"
      allow-clear
      placeholder="搜索姓名/手机号/邮箱"
      @press-enter="emit('search')"
      @update:value="(value) => props.onSetKeyword(String(value || ''))"
    />

    <Select
      :value="props.roleType"
      class="staff-filter-select"
      :options="roleSelectOptions"
      @update:value="(value) => handleRoleChange(value)"
    />

    <Select
      :value="props.status"
      class="staff-filter-select"
      :options="statusSelectOptions"
      @update:value="(value) => handleStatusChange(value)"
    />

    <Button type="primary" :loading="props.isLoading" @click="emit('search')">
      查询
    </Button>
    <Button :disabled="props.isLoading" @click="emit('reset')">重置</Button>
  </div>
</template>
