<template>
    <div>
        <div class="title">
            <div>选择用户 <span class="tx-primary">{{ selectList.length }}</span> 人</div>
            <el-checkbox
                v-model="isAll"
                @change="allChange"
                v-if="/checkbox/i.test(mode) && selectList.length"
            >{{ isAll ? '全不选' : '全选' }}</el-checkbox>
        </div>
        <div class="box" ref="box">
            <el-checkbox-group class="custom" v-model="check_list" v-if="/checkbox/i.test(mode)">
                <el-checkbox
                    v-for="item in selectList"
                    :key="item.id"
                    :label="item.id"
                    @change="listChange($event, item)"
                >
                    {{ item.realname }}
                    <span>{{ /teacher/.test(mode) ? item.mobile : item.studentCode }}</span>
                </el-checkbox>
            </el-checkbox-group>
            <el-radio-group class="custom" v-model="radio" @change="check_list = [$event]" v-else>
                <el-radio
                    v-for="item in selectList"
                    :key="item.id"
                    :label="item.id"
                    @change="listChange($event, item)"
                >
                    {{ item.realname }}
                    <span>{{ item.mobile }}</span>
                </el-radio>
            </el-radio-group>
        </div>
    </div>
</template>

<script>
import { removeRepeatByKey } from '@/assets/utils/util.js'
export default {
    props: {
        mode: { type: String, default: '' },
        selectList: { type: Array, default: () => [] },
        checkList: { type: Array, default: () => [] },
        checkedList: { type: Array, default: () => [] }
    },
    data () {
        return {
            isAll: false, // 是否全选
            radio: '' // 单选模式的值
        }
    },
    computed: {
        // checkList 代理
        check_list: {
            get () {
                return this.checkList
            },
            set (value) {
                this.$emit('update:checkList', value)
            }
        }
    },
    watch: {
        selectList () {
            this.getIsAll()
        },
        checkList () {
            this.getIsAll()
        },
        checkedList () {
            this.getRadio()
        },
        mode () {
            this.getRadio()
        }
    },
    created () {
        this.getRadio()
    },
    methods: {
        // 获取全选状态
        getIsAll () {
            // 如果 selectList 中的每一个都能在 checkList 找到就是全选
            const isAll = this.selectList.every(item => this.checkList.includes(item.id))
            this.isAll = !!this.selectList.length && isAll
        },
        // 获取单选状态（this.radio 表示当前选中的值，和 checkedList 保持同步）
        getRadio () {
            if (this.mode === 'teacherRadio') this.radio = this.checkedList.length ? this.checkedList[0].id : ''
        },
        // 全选或全不选
        allChange (isAll) {
            let list = []
            if (isAll) {
                // 合并两个列表并去重
                if (this.checkedList.length) this.$emit('add')
                list = removeRepeatByKey(this.selectList.concat(this.checkedList), 'id')
            } else {
                // 去除两个列表相同的 id
                this.checkedList.forEach(item => {
                    if (!this.selectList.find(n => n.id === item.id)) list.push(item)
                })
            }
            this.check_list = list.map(item => item.id)
            this.$emit('update:checkedList', list)
        },
        // 点击列表切换选中状态
        listChange (checked, item) {
            if (checked) {
                if (this.checkedList.length) this.$emit('add')
                ;/checkbox/i.test(this.mode) ? this.checkedList.push(item) : this.checkedList.splice(0, 1, item)
            } else {
                const index = this.checkedList.findIndex(cItem => cItem.id === item.id)
                this.checkedList.splice(index, 1)
            }
        },
        // 添加新数据滚动到底部，外部调用
        scrollBottom () {
            setTimeout(() => {
                this.$refs.box.scrollTop = this.$refs.box.scrollHeight
            })
        }
    }
}
</script>

<style lang="less" scoped>
</style>
