
<template>
    <div class="as-quick-filter">
        <VanDropdownMenu :overlay="overlay" :activeColor="activeColor">
            <VanDropdownItem @change="change" v-for="(col, key, index) in options" :key="key" v-model="selected[Object.keys(selected)[index]]" :options="col"></VanDropdownItem>
        </VanDropdownMenu>
    </div>
</template>

<script>
import { DropdownMenu, DropdownItem } from 'vant';

export default {
    name: 'AsQuickFilter',
    props: {
        activeColor: { type: String, default: '' },
        overlay: {type: Boolean, default: true},
        value: {type: [Function, Object], default: () => {} },
        options: { type: [Function, Object], default: () => {} }
    },
    data(){
        return {
            selected: {},
            columns: {},
            cacheData: {}
        }
    },
    watch: {
        // options: {
        //     handler:function (v) {
        //         if (Object.keys(v).length) {
        //             this.columns = v
        //         }
        //     },
        //     immediate: true,
        //     deep: true
        // }
    },
    mounted() {
        this.selected = Object.assign({}, this.value)
        this.cacheData = Object.assign({}, this.value)
    },
    methods:{
        //选中
        change() {
            this.$emit('input', this.selected)
            this.$emit('change', this.selected)
        },
        //重置
        reset(data) {
            this.$emit('input', data || this.cacheData)
            this.$emit('change', data || this.cacheData)
            return this.selected = Object.assign({}, data || this.cacheData)
        }
    },
    components: {
        VanDropdownMenu: DropdownMenu,
        VanDropdownItem: DropdownItem
    },
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/define";
</style>

