<template>
<div class="container" v-show="show">
  <header class="bar bar-nav">
    <h1 class="title">选择学生</h1>
    <a href="javascript:void(0)" class="pull-right icon" @click="handleSubmitClick">确定</a>
  </header>
  <div class="content" ref="contentWrapper">
    <div>
      <div class="student-box" v-if="studentList && studentList.length > 0">
        <div class="all" @click="handleAllSelect" v-if="isMultiple">
          <span class="icon-uncheck" :class="isSelectAll ? 'icon-check' : ''"></span>
          全选
        </div>
        <ul>
          <li :class="index !== studentList.length - 1 ? 'vux-1px-b' : ''" v-for="(item, index) in studentList" :key="item.ID" @click="getSelectStu(index)">
            <span class="icon-uncheck" :class="item.isChecked ? 'icon-check' : ''"></span>
            <span class="student-name">{{item.RealName ? item.RealName : '暂无'}}</span>
            <span class="student-info">{{item.UserName ? item.UserName : '暂无'}}</span>
          </li>
        </ul>
      </div>
      <template v-else>
        <empty></empty>
      </template>
    </div>
  </div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
import { Loading, TransferDomDirective as TransferDom } from 'vux'
export default {
    name: 'ClassStudentSelector',
    directives: {
        TransferDom
    },
    components: {
        Empty: () => import('@/common/Empty'),
        Loading
    },
    props: {
    // 学生选择器显示隐藏
        show: {
            type: Boolean,
            default: false
        },
        // 是否多选，默认多选，非必须
        isMultiple: {
            type: Boolean,
            default: true
        },
        // 班id，必须
        classId: {
            type: String,
            default: ''
        },
        // 已经的学生
        defaultStu: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            studentList: [], // 当前班级所有学生
            isSelectAll: false // 是否全选
        }
    },
    methods: {
    /**
     * 点击全选
     */
        handleAllSelect () {
            this.isSelectAll = !this.isSelectAll
            this.studentList.forEach(item => {
                item.isChecked = this.isSelectAll
            })
        },
        /**
     * 点击确定
     */
        handleSubmitClick () {
            let selectedStus = []
            this.studentList.length > 0 ? selectedStus = this.studentList.filter(item => {
                return item.isChecked === true
            }) : selectedStus = []
            this.$emit('handleSubmitClick', selectedStus)
        },
        /**
     * 获取班级通知
     */
        getStudentInfoByClassId () {
            if (this.studentList.length > 0) return false // 如果已经请求过了就不用再请求了
            if (this.classId === '') return false // 如果班id为空的话，不请求
            this.$api.platBaseApi.getStudentInfoByClassId(this.classId).then(res => {
                let data = res.data
                if (data.Status && data.Data && data.Data.length > 0) {
                    this.studentList = data.Data.map(item => {
                        this.$set(item, 'isChecked', false)
                        return item
                    })
                } else {
                    this.studentList = []
                }
            })
        },
        /**
     * 改变学生选中状态
     */
        getSelectStu (index) {
            if (this.isMultiple) {
                this.studentList[index].isChecked = !this.studentList[index].isChecked
            } else {
                this.studentList.forEach((item, i) => {
                    if (index === i) {
                        item.isChecked = true
                    } else {
                        item.isChecked = false
                    }
                })
            }
        }
    },
    mounted () {
    },
    watch: {
        'show': { // 当显示组件的时候，就请求数据
            handler (newVal, oldVal) {
                if (newVal) {
                    this.getStudentInfoByClassId()
                    this.$nextTick(() => {
                        this.scroll = new BScroll(this.$refs.contentWrapper, {
                            click: true
                        })
                    })
                }
            }
        },
        'defaultStu': {
            handler (newVal, oldVal) {
                if (newVal && newVal.length > 0) {
                    this.studentList.forEach(item => {
                        newVal.forEach(inItem => {
                            if (item.ID === inItem.student_id) {
                                item.isChecked = true
                            }
                        })
                    })
                }
            },
            immediate: true
        },
        'studentList': {
            handler (newVal, oldVal) {
                let selectSum = 0
                if (newVal && newVal.length > 0) {
                    newVal.forEach(item => {
                        if (item.isChecked) {
                            selectSum++
                        }
                    })
                    selectSum === newVal.length ? this.isSelectAll = true : this.isSelectAll = false
                }
            },
            deep: true
        }
    }
}
</script>

<style lang="less" scoped>
.container{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #efeff4
}
.selector-bottom{
    border-top: 1px solid #ccc;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
}
.submit-btn{
    float: right;
    margin-top:6px;
    width: 72px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #1296db;
    color: #fff;
    border-radius: 5px;
}
.checkbox-wrapper{
    background: #fff;
    padding: 10px 27px;
    span{
      display: inline-block;
      vertical-align: middle;
    }
}
.search-wrapper{
    width: 100%;
    background: #efeff4;
    div{
      background: #fff;
      margin: 10px;
      height: 32px;
      line-height: 32px;
      border-radius: 5px;
      color: #ccc;
      text-indent: 12px;
      font: 14px;
    }
}
.search-panel{
    width: 100%;
    position: fixed;
    top:0;left: 0;
    height: 100%;
    background: #efeff4;
    z-index: 10;
    display: flex;
    flex-direction:column;
    .search-top{
      display: flex;
      margin: 0 10px 10px;
      input{
        flex:1;
        background: #fff;
        height: 32px !important;
        line-height: 32px !important;
        border-radius: 5px;
        text-indent: 12px;
        font: 14px;
        border: 0px;
      }
      a{
        height: 32px;
        line-height: 32px;
        padding: 0 5px 0 10px;
        color: #1296db
      }
    }
    .search-list{
      flex:1;
      overflow: hidden;
    }
}
.student-box{
  .all{
    background: #fff;
    display: flex;
    align-items: center;
    padding: 10px 15px 10px 0;
    margin: 10px 0;
    padding-left: 15px;
  }
  .icon-uncheck {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(./icon/uncheck.png) no-repeat 0 0;
    background-size: 100% 100%;
    margin: 0 10px;
  }
  .icon-check {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(./icon/check.png) no-repeat 0 0;
    background-size: 100% 100%;
    margin: 0 10px;
  }
  ul{
    padding: 15px 0;
    padding-left: 15px;
    background: #fff;
    li{
      display: flex;
      align-items: center;
      padding: 10px 15px 10px 0;
      .student-name{
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
