<template>
  <div
      v-if="activeFilter"
      class="filter-popover"
      :style="popoverStyle"
      v-click-outside="closeFilter"
  >
    <!-- 输入框筛选 -->
    <template v-if="['name', 'code', 'department'].includes(activeFilter)">
      <el-input
          v-model="filters[activeFilter]"
          :placeholder="`请输入${filterLabels[activeFilter]}`"
          size="small"
          clearable
      />
    </template>

    <!-- 用途筛选 -->
    <template v-else-if="activeFilter === 'purpose'">
      <el-select
          v-model="filters.purpose"
          placeholder="请选择用途"
          size="small"
          clearable
          style="width: 100%"
      >
        <el-option label="公用" value="公用" />
        <el-option label="专用" value="专用" />
      </el-select>
    </template>

    <!-- 类型筛选 -->
    <template v-else-if="activeFilter === 'type'">
      <el-select
          v-model="filters.type"
          placeholder="请选择类型"
          size="small"
          clearable
          style="width: 100%"
      >
        <el-option label="非专利技术" value="非专利技术" />
        <el-option label="专利权" value="专利权" />
        <el-option label="软件" value="软件" />
      </el-select>
    </template>

    <div class="filter-actions">
      <el-button size="small" type="primary" @click="applyFilter">查询</el-button>
      <el-button size="small" @click="resetFilter">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  activeFilter: String,
  popoverPosition: Object,
  filters: Object,
  filterLabels: Object
})

const emit = defineEmits(['update:activeFilter', 'update:filters', 'applyFilter'])

// 计算弹出框位置
const popoverStyle = computed(() => ({
  top: `${props.popoverPosition.top}px`,
  left: `${props.popoverPosition.left}px`,
  'z-index': 2000
}))

// 关闭筛选框
const closeFilter = () => {
  emit('update:activeFilter', null)
}

// 应用筛选
const applyFilter = () => {
  emit('applyFilter')
}

// 重置筛选
const resetFilter = () => {
  emit('update:filters', { ...props.filters, [props.activeFilter]: '' })
  applyFilter()
}
</script>

<style scoped>
.filter-popover {
  position: fixed;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
  width: 280px;
  z-index: 2000;
}

.filter-input {
  margin-bottom: 16px;
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
</style>
