<template>
    <thead>
        <tr>
            <th
            :key="ind"
            v-for="(value, key, ind) in selectObj">
                <Select
                    @on-change="changeSelect(key, $event)"
                    style="width: 100px; margin-right: 10px; margin-bottom: 10px;"
                    v-model="selectObj[key]"
                >
                    <Option
                        :key="index"
                        :value="item.key"
                        v-for="(item, index) in columns"
                    >{{item.caption}}</Option>
                </Select>
            </th>
        </tr>
    </thead>
</template>
<script>
export default {
    name: 'SelectGroup',
    data() {
        return {
            selectObj: {}
        }
    },

    props: {
        columns: Array
    },

    watch: {
        columns(val) {
            this.columns.forEach((item, index) => {
                this.$set(this.selectObj, index, item.key)
            })
        },
        selectObj: {
            handler(val) {
                let data = Object.values(val).join()
                this.$emit('on-get-data', data)
            },
            deep: true
        }
    },

    methods: {
        changeSelect(key, value) {
            Object.keys(this.selectObj).forEach(item => {
                if (
                    key !== item &&
                    this.selectObj[key] === this.selectObj[item]
                ) {
                    this.selectObj[item] = ''
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.select-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
</style>
