<template>
    <div class="el-select-wrapper">
        <div class="el-select">
          <div class="el-input el-input--suffix" @click="getInputFocus" :class="isFocus ? 'focusInput' : ''">
            <input type="text" readonly="readonly" v-model="selectedVal" autocomplete="off" :placeholder="placeHolderVal" class="el-input__inner">
            <span class="el-input__suffix"><span class="el-input__suffix-inner"><i class="el-select__caret el-input__icon el-icon-arrow-up" :class="isFocus ? 'is-reverse' : ''"></i>
            </span>
            </span>
          </div>
          <div class="showCont" :style="{'max-height': maxHeight + 'px'}">
            <el-tree
              ref="tree"
              show-checkbox
              :data="classGradeList"
              :props="defaultProps"
              @check="handleTreeChange"
              @check-change="handleCheckChange">
            </el-tree>
          </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'DropDown',
    props: {
        selectedVal: { // 选中的值
            type: String,
            default: ''
        },
        placeHolderVal: { // 当没有值时的现实的内容
            type: String,
            default: '请选择'
        },
        defaultProps: {
            type: Object,
            default: () => {
                return {
                    children: 'ClassInfos',
                    label: 'ClassName'
                }
            }
        },
        // 内容最大高度，非必传，默认300
        maxHeight: {
            type: Number,
            default: 300
        }
    },
    data () {
        return {
            isFocus: false,
            classGradeList: [] // 班级列表
        }
    },
    methods: {
    /**
     * input 框获取焦点
     */
        getInputFocus () {
            this.isFocus = !this.isFocus
            this.getGradeClassList()
            // this.$emit('handleInputClick')
        },
        /**
     * 点击节点
     */
        handleCheckChange (data, checked, indeterminate) {
            // console.log(data, checked, indeterminate)
        },
        handleTreeChange (data, node) {
            if (node.checkedNodes) {
                this.$emit('handleTreeChange', node.checkedNodes)
            }
        },
        /**
     * 获取班级列表
     */
        getGradeClassList () {
            if (this.classGradeList.length > 0) return false
            let params = {
                isSelectAll: false,
                isResponseTree: true,
                roleCode: 8
            }
            this.$api.commonApi.getCurrentUserClassInfo(params).then(res => {
                let data = res.data
                if (data.Status) {
                    this.classGradeList = data.Data.map(item => {
                        item.ClassName = item.GradeName
                        return item
                    })
                } else {
                    this.classGradeList.length = 0
                }
            }).catch(err => {
                console.log(err)
            })
        }
    },
    created () {
        document.addEventListener('click', (e) => {
            if (!this.$el.contains(e.target)) {
                this.isFocus = false
            }
        })
    }
}
</script>
<style lang="less" scoped>

.el-select-wrapper{
  position: relative;
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-input__icon{
    line-height: 32px;
  }
  .is-reverse{
    transform: rotateZ(0);
  }
  .showCont{
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 5px 15px;
    border: 1px solid #E4E7ED;
    border-radius: 4px;
    background-color: #FFF;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
    max-height: 300px;
    overflow-y: scroll;
  }
  .focusInput + .showCont{
    display: block;
  }
}
</style>
