<template>
  <el-form class="el-form--filter">
    <slot name="before"></slot>
    <el-form-item v-for="item in options.selectList" :key="item.key" :label="item.label">
      <el-select :placeholder="item.placeholder ?? t('common.pleasechoice')" v-model="item.selectedValue" :multiple="item.multiple"
        collapse-tags @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 options.inputList" :key="i" :label="item.label">
      <el-input :type="item.type" :placeholder="item.placeholder ?? t('common.pleaseenterkeywords')" v-model="item.value" />
    </el-form-item>
    <slot name="after"></slot>
    <el-form-item>
      <el-button :class="item.className" v-for="(item, i) in options.buttonList" :key="i" :disabled="loading"
        @click="item.onClick">{{ item.label }}
      </el-button>
    </el-form-item>
    <slot name="default"></slot>
  </el-form>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { FilterOptions } from '@/hooks/datatable/types'
import { i18n } from '@/stores'

const { global: { t } } = i18n

defineProps({
  options: {
    type: Object as PropType<FilterOptions<any>>,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: false
  },
})
</script>