<template>
    <div>
        <div class="title">
            <div v-if="!/group/.test(mode)">已选用户 <span class="tx-success">{{ checkedList.length }}</span> 人</div>
            <div v-else>已选部门 <span class="tx-success">{{ checkedList.length }}</span> 个</div>
            <el-link
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="clear"
                v-if="checkedList.length"
            >清空</el-link>
        </div>
        <div class="box" ref="box">
            <div class="item" v-for="(item, index) in checkedList" :key="item.id">
                {{ item.realname }}
                <el-link
                    type="danger"
                    :underline="false"
                    icon="el-icon-circle-close"
                    @click="del(item, index)"
                ></el-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        mode: { type: String, default: '' },
        checkList: { type: Array, default: () => [] },
        checkedList: { type: Array, default: () => [] }
    },
    methods: {
        // 删除
        del (item, index) {
            if (!/group/.test(this.mode)) {
                const cIndex = this.checkList.indexOf(item.id)
                if (cIndex > -1) this.checkList.splice(cIndex, 1)
            } else {
                this.$emit('delTree')
            }
            this.checkedList.splice(index, 1)
        },
        // 清空
        clear () {
            if (!/group/.test(this.mode)) {
                // 选人模式下同步移除已选中的人
                this.checkedList.forEach(item => {
                    for (let i = this.checkList.length - 1; i >= 0; i--) {
                        if (item.id === this.checkList[i]) {
                            this.checkList.splice(i, 1)
                        }
                    }
                })
            } else {
                // 部门模式下移除已选中的部门
                this.$emit('clear')
            }
            this.checkedList.splice(0, this.checkedList.length)
        },
        // 添加新数据滚动到底部，外部调用
        scrollBottom () {
            setTimeout(() => {
                this.$refs.box.scrollTop = this.$refs.box.scrollHeight
            })
        }
    }
}
</script>

<style lang="less" scoped>
.item {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    .el-link {
        font-size: 16px;
    }
}
</style>
