<template>
  <div class="qu-search-area" ref="rootRef">
    <div class="qu-search-card">
      <div class="qu-search-card-header">
        <el-icon :size="14" class="qu-search-card-icon"><search /></el-icon>
        <span class="qu-search-card-title">筛选查询</span>
      </div>
      <el-form
        ref="inlineFormRef"
        :model="model"
        inline
        size="small"
        class="qu-search-inline"
        :class="{ 'qu-search--collapsed': hasAdvanced && !expanded }"
      >
        <slot></slot>
        <el-form-item class="qu-search-form-actions">
          <el-button type="primary" icon="Search" size="small" @click="handleSearch">查询</el-button>
          <el-button icon="Refresh" size="small" @click="handleReset">重置</el-button>
          <el-button
            v-if="hasAdvanced"
            link
            type="primary"
            size="small"
            @click="expanded = !expanded"
          >
            {{ expanded ? '收起' : '展开' }}
            <el-icon>
              <arrow-up v-if="expanded" />
              <arrow-down v-else />
            </el-icon>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "qu-search-area",
};
</script>

<script setup>
import { ref, onMounted, nextTick } from "vue";

const props = defineProps({
  model: {
    type: Object,
    default: () => ({}),
  },
  maxVisible: {
    type: Number,
    default: 5,
  },
});

const $emit = defineEmits(["search", "reset"]);

const inlineFormRef = ref();
const rootRef = ref();
const hasAdvanced = ref(false);
const expanded = ref(false);
const hiddenItems = ref([]);

onMounted(async () => {
  await nextTick();
  const formEl = inlineFormRef.value?.$el;
  if (formEl) {
    const items = formEl.querySelectorAll(":scope > .el-form-item:not(.qu-search-form-actions)");
    hasAdvanced.value = items.length > props.maxVisible;
    if (hasAdvanced.value) {
      items.forEach((item, idx) => {
        if (idx >= props.maxVisible) {
          hiddenItems.value.push(item);
          item.style.display = "none";
        }
      });
    }
  }
});

// 展开/收起切换
import { watch } from "vue";
watch(expanded, (val) => {
  hiddenItems.value.forEach((item) => {
    item.style.display = val ? "" : "none";
  });
});

const handleSearch = () => {
  $emit("search");
};

const handleReset = () => {
  $emit("reset");
};

defineExpose({
  resetFields: () => {
    inlineFormRef.value?.resetFields();
  },
  get clientHeight() {
    return rootRef.value?.clientHeight || 0;
  },
});
</script>

<style lang="scss" scoped>
.qu-search-area {
  padding: var(--spacing-sm) var(--spacing-md);
  flex-shrink: 0;
}

.qu-search-card {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
}

.qu-search-card-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  gap: var(--spacing-xs);
}

.qu-search-card-icon {
  color: var(--color-primary);
}

.qu-search-card-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.qu-search-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.qu-search-form-actions {
  margin-left: auto;
}
</style>
