<template>
    <div class="filter-pane">
        <Select style="width: 150px; margin-right: 10px;" v-model="field">
            <Option :key="index" :value="op.guid" v-for="(op, index) in options">{{op.name}}</Option>
        </Select>
        <Input style="width: 150px;" v-model="value" />
        <Button type="primary" style="margin-left:10px" @click="filter">过滤</Button>
    </div>
</template>
<script>
export default {
    name: 'FilterPane',
    data() {
        return {
            field: '',
            value: ''
        }
    },
    props: {
        options: Array
    },
    watch: {
        options(newVal) {
            this.field = newVal[0].guid
        }
    },
    methods: {
        filter() {
            this.$emit('on-filter', this.field, this.value)
        },
        clearValue() {
            this.value = ''
        }
    }
}
</script>
<style lang="less" scoped>
.filter-pane {
    display: flex;
}
</style>
