<template>
    <div class="list_wrapper scrollbar">
        <ul class="list">
            <li v-for="item in gradesList" :key="item.id" @click="handleItemClick(item)">
                <a
                    href="javascript:;"
                    class="item"
                    :class="{ 'is-active': item.GradeId === currentId }"
                >{{ item.GradeName }}</a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'GradesSelector',
    props: {
        // 默认选中的选项
        defaultChecked: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    components: {},
    data () {
        return {
            currentId: '',
            gradesList: []
        }
    },
    computed: {},
    watch: {
        defaultChecked: {
            deep: true,
            handler (data) {
                if (data && Object.keys(data).length) {
                    this.currentId = data.GradeId
                }
            }
        }
    },
    created () {
        this.getCompanyGrades()
    },
    mounted () {
    },
    methods: {
        // 获取学校年级列表
        getCompanyGrades () {
            this.$api.commonApi.getCompanyGrades().then(res => {
                this.$handleResponse(res).then(data => {
                    this.gradesList = data
                    this.$emit('hasGetGroup', this.gradesList)
                })
            })
        },
        handleItemClick (data) {
            this.$emit('nodeClick', data)
        }
    }
}
</script>

<style lang="stylus" scoped>
.list_wrapper
    height calc(100% - 35px)
    overflow-y auto
    .list
        .item
            display block
            color #606266
            font-size 14px
            text-align center
            padding 5px 8px
        .item.is-active
            background #F5F7FA
</style>
