<template>
  <el-form :model="formModel" inline class="filter-bar">
    <el-form-item prop="grade" class="filter-item">
      <el-select :model-value="grade" placeholder="岗位等级" clearable @update:model-value="emit('update:grade', $event || '')">
        <el-option v-for="item in gradeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item prop="positionType" class="filter-item">
      <el-select :model-value="positionType" placeholder="岗位类型" clearable @update:model-value="emit('update:positionType', $event || '')">
        <el-option v-for="item in positionTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item prop="status" class="filter-item">
      <el-select :model-value="status" placeholder="状态" clearable @update:model-value="emit('update:status', $event || '')">
        <el-option label="启用" value="0" />
        <el-option label="停用" value="1" />
      </el-select>
    </el-form-item>
    <el-form-item class="filter-item filter-item--date">
      <el-date-picker
        :model-value="dateRange"
        type="daterange"
        range-separator="-"
        start-placeholder="上架开始"
        end-placeholder="上架结束"
        value-format="YYYY-MM-DD"
        @update:model-value="emit('update:dateRange', $event || [])"
      />
    </el-form-item>
    <el-form-item prop="evaluationName" class="filter-item filter-item--keyword">
      <el-input
        :model-value="evaluationName"
        placeholder="请输入测评名称"
        clearable
        @update:model-value="emit('update:evaluationName', $event || '')"
        @keyup.enter="emit('search')"
      />
    </el-form-item>
    <el-form-item class="filter-actions">
      <el-button @click="emit('reset')">重置</el-button>
      <el-button type="primary" @click="emit('search')">搜索</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  evaluationName: string;
  grade: string;
  positionType: string;
  status: string;
  dateRange: [string, string] | [];
  gradeOptions: Array<{ label: string; value: string }>;
  positionTypeOptions: Array<{ label: string; value: string }>;
}>();

const emit = defineEmits<{
  search: [];
  reset: [];
  'update:evaluationName': [string];
  'update:grade': [string];
  'update:positionType': [string];
  'update:status': [string];
  'update:dateRange': [[string, string] | []];
}>();

const formModel = computed(() => ({
  evaluationName: props.evaluationName,
  grade: props.grade,
  positionType: props.positionType,
  status: props.status
}));
</script>

<style scoped lang="scss">
.filter-bar {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 16px;
}

.filter-item {
  margin-right: 0;
  margin-bottom: 0;
}

.filter-item :deep(.el-input),
.filter-item :deep(.el-select) {
  width: 180px;
}

.filter-item--keyword :deep(.el-input) {
  width: 240px;
}

.filter-item--date :deep(.el-date-editor) {
  width: 260px;
}

.filter-actions {
  margin-left: auto;
  margin-right: 0;
}
</style>
