<template>
  <el-form class="app-table-filter">
    <el-form-item v-if="$slots.before">
      <slot name="before"></slot>
    </el-form-item>
    <el-form-item v-for="item in selectList" :key="item.key" :label="item.label">
      <el-select :placeholder="item.placeholder ?? '请选择'" v-model="item.selectedValue" @change="item.onChange">
        <el-option v-for="option in item.options" :key="option.value" :value="option.value" :label="option.label" />
      </el-select>
    </el-form-item>
    <el-form-item v-for="(item, i) in inputList" :key="i" :label="item.label">
      <el-input :placeholder="item.placeholder ?? '请输入关键字'" v-model="item.value" />
    </el-form-item>
    <el-form-item v-if="$slots.after">
      <slot name="after"></slot>
    </el-form-item>
    <el-form-item>
      <el-button :class="item.className" v-for="(item, i) in buttonList" :key="i" :disabled="loading"
        @click="item.onClick">{{ item.lable }}
      </el-button>
    </el-form-item>
    <el-form-item v-if="$slots.default">
      <slot name="default"></slot>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { FilterSelect, FilterInput, FilterButton } from '@/hooks/datatable/interface'

defineProps({
  selectList: {
    type: Array as PropType<FilterSelect[]>,
    default: () => [],
  },
  inputList: {
    type: Array as PropType<FilterInput[]>,
    default: () => [],
  },
  buttonList: {
    type: Array as PropType<FilterButton[]>,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false
  },
})
</script>

<style lang="less">
@import './index.less';
</style>