<template>
  <div class="filter-custom-table">
    <slot name="before"></slot>
    <a-select class="conditionSelect" v-for="item in selectList" :key="item.key" v-model:value="item.selectedValue" @change="item.onChange">
      <a-select-option v-for="(option, i) in item.options" :key="i" :value="option.value">{{option.label}}</a-select-option>
    </a-select>
    <a-input class="tableConditionInput" v-for="(item,i) in inputList" :key="i" :placeholder="item.placeholder" v-model:value="item.value" />
    <slot name="after"></slot>
    <a-button class="selectBtn" v-for="(item, i) in buttonList" :key="i" @click="item.event">{{item.lable}}</a-button>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { FilterSelect, FilterInput, FilterButton } from './interface'

export default defineComponent({
  emits: ['search', 'reset'],
  props: {
    selectList: {
      type: Array as PropType<FilterSelect[]>,
      default: [],
    },
    inputList: {
      type: Array as PropType<FilterInput[]>,
      default: [],
    },
    buttonList: {
      type: Array as PropType<FilterButton[]>,
      default: [],
    },
  },
})
</script>

<style lang="less">
.btnDeafault.ant-btn {
    margin-left: 0;
}
.ant-select + .btnDeafault.ant-btn {
    margin-left: 10px;
}
.ant-space.ant-space-vertical + .btnDeafault.ant-btn {
    margin-left: 0;
}
.filter-custom-table {
    display: inline-flex;
    align-items: center;
    .btnDeafault.ant-btn,
    .operBtn.ant-btn {
        height: 26px !important;
        line-height: 26px !important;
    }
    ant-btn operBtn .ant-select-single:not(.ant-select-customize-input) + .ant-select-single:not(.ant-select-customize-input),
    .ant-select + .ant-space.ant-space-vertical {
        margin-left: 10px;
        margin-top: 0px;
    }
    .ant-select-single:not(.ant-select-customize-input) {
        .ant-select-selector {
            height: 30px;
            border-color: @m-grey46 !important;
            background: @m-grey47;
            .rounded-corners(3px);
            .ant-select-selection-item {
                line-height: 26px;
            }
            .ant-select-selection-search {
                height: 26px;
                .ant-select-selection-search-input {
                    height: 26px;
                    line-height: 27px !important;
                }
            }
            .ant-select-selection-placeholder {
                line-height: 26px;
            }
        }
    }

    .allDatePicker.ant-calendar-picker {
        height: 26px !important;
        border: 1px solid @m-grey46 !important;
        .ant-calendar-picker-input.ant-input {
            height: 26px;
            line-height: 26px;
            &::placeholder {
                color: @m-grey10 !important;
            }
        }
    }
    .conditionSelect {
        max-width: 120px;
        min-width: 120px;
    }
    > * {
        margin: 0 !important;
        &:not(:last-child) {
            margin-right: 10px !important;
        }
    }
}
</style>