<template>
    <div class="type-group">
        <div class="type-item" v-for="item in data">
            <div class="type-name">{{item.title}}:</div>
            <div class="type-list">
                <template v-if="item.data.length>0">
                    <div v-if="needAll"
                        :class="{'type-list-item':true,'item-active':selectedKeys.indexOf('')>-1?true:false}"
                        @click="allSelect('')">
                        全部
                    </div>
                    <div :class="{'type-list-item':true,'item-active':selectedKeys.indexOf(v.id)>-1?true:false}"
                        v-for="(v,index) in item.data" :key="index" @click="itemClick(v.id,item,v)">
                        {{v.name}}
                    </div>
                </template>
                <template v-if="item.data.length==0">
                    <span style="margin-left: 16px;">
                        无
                    </span>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            // title: {
            //     type: String,
            //     default: 'title'
            // },
            data: {
                type: Array,
                default: () => []
            },
            type: {
                type: String,
                default: '1', // 1单选 2多选
            },
            defaultSelect: {
                type: Array,
                default: () => []
            },
            needAll: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                selectedKeys: [...this.defaultSelect],
            }
        },
        methods: {
            sendData(v) {
                let data = JSON.parse(JSON.stringify(v))
                this.$emit('callBack', data)
            },
            allSelect(key) {
                this.selectedKeys = [key];
                this.sendData();
            },
            itemClick(key, item, v) {
                console.log(item)
                console.log(v)
                let allIndex = this.selectedKeys.indexOf('');
                if (allIndex > -1) {
                    this.selectedKeys.splice(allIndex, 1)
                }
                if (this.type == 1) {
                    this.selectedKeys.pop();
                    this.selectedKeys.push(key)
                } else {
                    let index = this.selectedKeys.indexOf(key);
                    if (index > -1) {
                        this.selectedKeys.splice(index, 1)
                    } else {
                        this.selectedKeys.push(key)
                    }
                }
                this.sendData(v);
                console.log(this.selectedKeys, 'selectedKeys')
            }
        }
    }
</script>

<style scoped lang="less">
    .type-name {
        min-width: 50px;
        max-width: 80px;
    }

    .type-item {
        display: flex;
    }

    .type-list {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .type-list-item {
        width: 64px;
        text-align: center;
        margin: 0 16px;
        border-radius: 2px;
        margin-bottom: 8px;
        cursor: pointer;
    }

    .item-active {
        color: #fff;
        background-color: #1980ff;
    }
</style>