<template>
    <!-- 过滤客户资料表格 -->
    <div class="filter-custom-table">
        <slot name="selectBefore"></slot>
        <a-select
            label-in-value
            class="conditionSelect"
            v-for="(item, i) in selectList"
            :key="i + '11'"
            style="width: 120px"
            v-model:value="item.value"
            :placeholder="item.placeholder"
            @change="item.change"
        >
            <a-select-option
                v-for="(option, j) in item.list"
                :key="j + '22'"
                :value="option.value"
            >{{option.lable}}</a-select-option>
        </a-select>
        <slot name="selectAfter"></slot>
        <a-input
            v-model:value="item.value"
            v-for="(item,i) in inputList"
            :key="i + '33'"
            class="tableConditionInput"
            :placeholder="item.placeholder"
        />
        <slot name="inputAfter"></slot>
        <a-button
            class="selectBtn"
            v-for="(item, i) in fixedBtnList"
            :key="i + 'fixed'"
            @click="item.event"
        >{{item.lable}}</a-button>
        <slot></slot>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import * as type from '@/common/setup/filter/interface';

export default defineComponent({
    name: 'filter-table',
    components: {},
    props: {
        selectList: {
            type: Array as PropType<type.SelectList[]>,
            default: [],
        },
        inputList: {
            type: Array as PropType<type.InputList[]>,
            default: [],
        },
        fixedBtnList: {
            type: Array as PropType<type.FixedBtnList[]>,
            default: [],
        },
    },
});
</script>

<style lang="less">
.filter-custom-table {
    display: inline-flex;
    padding-top: 2.5px;
    height: 35px;
    .conditionSelect:first-child {
        margin-right: 10px;
    }
    // /deep/.ant-select {
    //     // margin-right: 10px;
    //     // border: 1px solid @m-grey37;
    //     height: 28px;
    //     // .rounded-corners(3px);
    //     .ant-select-selector {
    //         height: 26px;
    //         .ant-select-selection-search {
    //             height: 26px;
    //             .ant-select-selection-search-input {
    //                 height: 26px;
    //             }
    //         }
    //         // padding: 0 8px;
    //         // background: @m-grey9;
    //         // border: none;
    //         // .rounded-corners(3px);
    //         // color: @m-grey10;
    //         // .ant-select-arrow {
    //         //     right: 8px;
    //         //     color: @m-grey1;
    //         // }
    //     }
    //     // .ant-select-arrow {
    //     //     color: @m-grey1;
    //     // }
    //     // .ant-select-selection-item {
    //     //     color: @m-white1;
    //     // }
    // }
    .ant-select-single:not(.ant-select-customize-input) {
        margin-right: 10px;
        height: 28px;
        line-height: 29px !important;
        .ant-select-selector {
            height: 28px;
            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: 28px !important;
        border: 1px solid @m-grey46 !important;
        .ant-calendar-picker-input.ant-input {
            height: 28px;
            line-height: 28px;
            &::placeholder {
                color: @m-grey10 !important;
            }
        }
    }
    .conditionSelect + .conditionSelect {
        margin-left: 10px;
    }
}
</style>;
