<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 {
    // width: 100%;
    display: inline-flex;
    padding-top: 9px;
    padding-bottom: 6px;
    .ant-select-single:not(.ant-select-customize-input) {
        margin-right: 10px;
        // background: #252D34;
        // .rounded-corners(3px);
        .ant-select-selector {
            height: 30px;
            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;
        }
    }
    .conditionSelect + .conditionSelect {
        margin-left: 10px;
    }
}
.selectBtn.ant-btn {
    margin-left: 10px;
    width: 80px;
    height: 30px;
    line-height: 31px;
    text-align: center;
    background: linear-gradient(0deg, @m-grey15 0%, @m-grey16 98%);
    border: 0;
    color: @m-white0;
    font-size: 14px;
    .rounded-corners(3px);
    &:hover,
    &:focus {
        background: linear-gradient(0deg, @m-grey15-hover 0%, @m-grey16-hover 98%);
        color: rgba(@m-white0, 0.8);
        border: 0;
    }
}
.operBtn.ant-btn:extend(.selectBtn.ant-btn) {
    background: linear-gradient(0deg, @m-blue6 0%, @m-blue7 99%);
    &:hover,
    &:focus {
        background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%);
        color: rgba(@m-white0, 0.8);
        border: 0;
    }
}
</style>;
