<template>
  <div class="filter-wrap">
    <div v-if="slots.operate" class="operate-wrap m-b-8px p-b-8px">
      <slot name="operate"></slot>
    </div>
    <div class="flex justify-between">
      <div class="flex flex-wrap gap-8px">
        <slot />
        <template v-if="btn">
          <div class="kl-filter-btns">
            <el-button :loading="loading" :icon="Search" :class="[{ 'm-l-20px': props.searchBtnMarginLeft }]" type="primary" @click="handleSearch"
              >搜索</el-button
            >
            <el-button v-if="isShowReset" :icon="Refresh" @click="handleReset">重置</el-button>
            <slot name="followBtn"></slot>
          </div>
        </template>
        <el-popover v-if="slots.ext" ref="popoverRef" placement="bottom-end" :width="popoverWidth" trigger="click">
          <template #reference>
            <slot name="more-btn">
              <el-button type="primary" link
                >更多筛选<el-icon><ArrowDown /></el-icon
              ></el-button>
            </slot>
          </template>
          <slot name="ext" />
          <el-divider />
          <div class="flex flex-justify-end">
            <el-button v-if="isShowReset" @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </div>
        </el-popover>
      </div>
      <slot name="btn"></slot>
    </div>
    <div v-if="slots.footer" class="filter-footer mt-14px">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
  // 注意 在使用 el-select 或 el-date-picker 等组件时，需要在组件上添加 :teleported="false" 属性，
  // 否则会出现弹窗失去焦点关闭的情况
  import { useSlots, ref, getCurrentInstance } from 'vue'
  import { Search, ArrowDown, Refresh } from '@element-plus/icons-vue'
  const slots = useSlots()
  const { proxy } = getCurrentInstance() as any
  const popoverRef = ref()
  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    btn: {
      //是否显示按钮
      type: Boolean,
      default: true,
    },
    isShowReset: {
      //是否显示重置按钮
      type: Boolean,
      default: true,
    },
    popoverWidth: {
      type: Number,
      default: 350,
    },
    searchBtnMarginLeft: {
      //搜索按钮是否有做边距
      type: Boolean,
      default: false,
    },
  })
  const emits = defineEmits<{
    (event: 'search'): void
    (event: 'reset'): void
  }>()
  if (!proxy.$parent?.resetFields) {
    console.error('QueryFilters必须嵌套在 ElForm 中才能正常使用')
  }
  const handleReset = () => {
    if (props.loading) return
    proxy.$parent?.resetFields()
    emits('reset')
    popoverRef.value?.hide()
  }
  const handleSearch = () => {
    if (props.loading) return
    emits('search')
    popoverRef.value?.hide()
  }
</script>

<style lang="scss" scoped>
  .filter-wrap {
    background-color: #ffffff;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 12px;
    .operate-wrap {
      border-bottom: 1px solid #e6e8ed;
    }
    :deep(.el-form-item) {
      margin-bottom: 0 !important;
      align-items: flex-start;
    }
    .kl-filter-btns {
      display: inline-flex;
    }
  }
  :deep(.el-divider--horizontal) {
    margin: 12px 0 !important;
  }
</style>
