<template>
    <div class="flex-column user_wrapper">
        <el-input placeholder="搜索" v-model="userName" class="search-input" @input="handleSearchInput"></el-input>
        <div class="flex-1 user-list_wrapper scrollbar">
            <ul class="user-list">
                <li v-for="(item,index) in renderUserList"  :key="item.id" @click="handleUserItemClick(index)" >
                    <a href="javascript:;" class="user-item" :class="{ 'is-active': item.id === currentId }"> {{ item.name }}</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TeacherSelector',
    props: {
        // 默认选中的选项
        defaultChecked: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    components: {},
    data () {
        return {
            userName: '',
            currentId: '',
            renderUserList: [],
            userList: []
        }
    },
    computed: {},
    watch: {
        defaultChecked: {
            deep: true,
            handler (data) {
                if (data && Object.keys(data).length) {
                    this.currentId = data.id
                }
            }
        }
    },
    created () {
        this.getSchoolTeachers()
    },
    mounted () {
    },
    methods: {
        // 获取学校教师列表
        getSchoolTeachers () {
            this.$api.commonApi.getSchoolTeachers().then(res => {
                let data = res.data
                if (data.Status) {
                    this.userList = this.renderUserList = data.Data.map(item => {
                        return {
                            id: item.Id,
                            name: item.RealName
                        }
                    })
                }
                this.$emit('hasGetGroup', this.userList)
            }).catch(err => {
                console.log(err)
            })
        },
        handleSearchInput (val) {
            let userList = JSON.parse(JSON.stringify(this.userList))
            this.renderUserList = userList.filter(item => { return item.name.indexOf(val) > -1 })
        },
        handleUserItemClick (i) {
            let data = Object.assign(this.renderUserList[i], { category: 'teacher' })
            this.$emit('nodeClick', data)
        }
    }
}
</script>

<style lang="less" scoped>
.user_wrapper {
    height: calc(100% - 35px);
    .search-input {
        margin: 10px 0;
    }
    .user-list_wrapper {
        height: calc(100% - 52px);
        overflow-y: auto;
        .user-list {
            .user-item {
                display: block;
                color: #606266;
                font-size: 14px;
                text-align: center;
                padding: 5px 8px;
            }
            .user-item.is-active {
                background: #F5F7FA;
            }
        }
    }
}

</style>
