<template>
    <div class="type-group">
        <div class="type-item">
            <div class="type-name">{{title}}:</div>
            <div class="type-list">
                <template v-if="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(item.id)>-1?true:false}"
                        v-for="(item,index) in data" :key="index" @click="itemClick(item.id)">
                        {{item.name}}
                    </div>
                </template>
                <template v-if="data.length==0">
                    <span style="margin-left: 16px;">
                        无
                    </span>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import { changeKeys } from '@/utils/tools'
    export default {
        props: {
            value: {
                default: ''
            },
            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
            },
            replaceFields: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                selectedKeys: [...this.defaultSelect],
            }
        },
        watch: {
            value: {
                handler(newVal, oldVal) {
                    console.log(newVal, '改变了')
                    this.selectedKeys = newVal
                },
                deep: true
            },
            data(nVal) {
                console.log(nVal, 'nVal题型')
                if (this.replaceFields.length > 0) {
                    this.data = changeKeys(nVal, this.replaceFields)
                }
            }
        },
        mounted() {
        },
        methods: {
            sendData() {
                let data = JSON.parse(JSON.stringify(this.selectedKeys))
                this.$emit('input', this.selectedKeys)
                this.$emit('callBack', data)
            },
            allSelect(key) {
                this.selectedKeys = [key];
                this.sendData();
            },
            itemClick(key) {
                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)
                    }
                    if (this.selectedKeys.length === 0) {
                        this.selectedKeys = ['']
                    }
                }
                this.sendData();
            }
        }
    }
</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; */
        padding: 0 6px;
        box-sizing: border-box;
        text-align: center;
        margin: 0 16px;
        border-radius: 2px;
        margin-bottom: 8px;
        cursor: pointer;
    }

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