<template>
    <div class="modal-filter-pane">
        <Form @submit.native.prevent>
            <div style="display: flex;">
                <FormItem style="margin-right: 20px;">
                    <Select
                        style="width:150px"
                        v-model="filterModel"
                    >
                        <Option
                            :key="item.field"
                            :value="item.field"
                            v-for="item in f"
                        >{{ item.caption }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Input
                        @on-enter="search"
                        placeholder="请输入..."
                        style="width: 150px;"
                        v-model="filterData[filterModel]"
                    />
                </FormItem>
            </div>
        </Form>
        <Button
            @click="search"
            type="primary"
        >查询</Button>
    </div>
</template>
<script>
export default {
    name: 'FilterPane',
    data() {
        return {
            // 筛选数据
            filterData: {},
            filterModel: ''
        }
    },

    props: {
        f: {
            type: Array
        }
    },

    methods: {
        search() {
            if (!this.filterModel) {
                this.$Message.error('请先选择筛选类别')
                return
            }
            let index = this.f.findIndex(item => {
                return item.field === this.filterModel
            })
            this.$emit('on-filter', this.filterModel, this.filterData[this.filterModel], index)
        }
    }
}
</script>
<style lang="less" scoped>
.modal-filter-pane {
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    &-item {
        display: flex;
        flex-wrap: wrap;
    }
}
</style>
