<script setup lang="ts">
import { adminInventoryCredentialTypeOptions, adminInventoryStatusOptions } from '@/utils/admin-options'

const filterSkuCode = defineModel<string>('filterSkuCode', { required: true })
const filterCredentialType = defineModel<string>('filterCredentialType', { required: true })
const filterStatus = defineModel<string>('filterStatus', { required: true })
const filterBatchNo = defineModel<string>('filterBatchNo', { required: true })
const filterInventoryGroupCode = defineModel<string>('filterInventoryGroupCode', { required: true })

defineProps<{
  loadInventoryItems: (page?: number) => Promise<void>
  resetFilters: () => void
}>()
</script>

<template>
  <el-card shadow="never" class="section-card">
    <template #header>
      <div class="card-header">
        <span class="card-title">查询库存池</span>
        <span class="card-desc">按内部履约 SKU、凭据类型、批次和状态快速定位库存。</span>
      </div>
    </template>
    <div class="form-grid">
      <el-input
        v-model="filterSkuCode"
        placeholder="内部履约 SKU，例如 sjz_hdl_test01"
        clearable
        @keyup.enter="loadInventoryItems(1)"
      />
      <el-select v-model="filterCredentialType" placeholder="凭据类型" clearable>
        <el-option
          v-for="opt in adminInventoryCredentialTypeOptions"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        />
      </el-select>
      <el-select v-model="filterStatus" placeholder="状态" clearable>
        <el-option
          v-for="opt in adminInventoryStatusOptions"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        />
      </el-select>
      <el-input
        v-model="filterBatchNo"
        placeholder="批次号"
        clearable
        @keyup.enter="loadInventoryItems(1)"
      />
      <el-input
        v-model="filterInventoryGroupCode"
        placeholder="库存组，例如 A组"
        clearable
        @keyup.enter="loadInventoryItems(1)"
      />
    </div>
    <div class="action-row">
      <el-button round type="primary" @click="loadInventoryItems(1)">查询列表</el-button>
      <el-button round @click="resetFilters">清空筛选</el-button>
    </div>
  </el-card>
</template>

<style scoped>
@import '../../../../styles/admin-list-pages.css';

.form-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.95fr 0.85fr 1fr 1fr;
  gap: var(--space-3);
}

.action-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: 14px;
}

@media (max-width: 1200px) {
  .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .action-row {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>
