import React,{ Component } from "react";
import { Input,Checkbox,Table, Pagination, Modal,Menu ,Spin, Tooltip , Divider, Popconfirm } from "antd";
import ClipboardJS from 'clipboard'
import '../css/Courses.css'
import '../css/members.css'
import CourseLayoutcomponent from '../common/CourseLayoutComponent'

import Titlesearchsection from '../common/titleSearch/TitleSearchSection'
import ColorCountText from '../common/titleSearch/ColorCountText'
import { WordsBtn, trigger, on, off, getRandomcode, getRandomNumber , sortDirections } from 'educoder'
import Modals from "../../modals/Modals";
import axios from 'axios'
import _ from 'lodash'
import NoneData from "../coursesPublic/NoneData"
import DownloadMessageysl from "../../modals/DownloadMessageysl";
import CreateGroupByImportModal from './modal/CreateGroupByImportModal'
import ChangeRolePop from './ChangeRolePop'
import "./studentsList.css"

const Search =Input.Search;
const TYPE_STUDENTS = 1
const TYPE_COURSE_GOURP_PARENT = 2
const TYPE_COURSE_GOURP_CHILD = 3
const buildColumns = (that,isParent) => {
  const { course_groups , sortedInfo } = that.state
  let showSorter = isParent==true
  const courseId = that.props.match.params.coursesId
  const columns=[{
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    align:'center',
    width:"8%",
    className:"color-grey-6",
    render: (id, student, index) => {
      return (that.state.page - 1) * 20 + index + 1
    }
  },
  // {
  //   title: '用户id',
  //   dataIndex: 'login',
  //   key: 'login',
  //   align:'center',
  //   width:"10%",
  //   className:"color-grey-6",
  //   render: (login, record) => {
  //     return <span className="color-dark overflowHidden1" style={{maxWidth: '160px'}}
  //       title={login && login.length > 10 ? login : ''}
  //     >{login}</span>
  //   }
  // },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    align:'center',
    width:"10%",
    className:"color-grey-6",
    render: (name, record) => {
      return <a className="color-dark overflowHidden1" target="_blank"
          style={{maxWidth: '120px'}} href={`/users/${record.login}`}>{name}</a>
    }
  }, {
    title: '学号',
    dataIndex: 'student_id',
    key: 'student_id',
    align:'center',
    width:"10%",
    className:"color-grey-6",
    sorter: true,
    sortDirections: sortDirections,
    sortOrder: sortedInfo.columnKey === 'student_id' && sortedInfo.order,
    render: (student_id, record) => {
      return <span className="color-dark overflowHidden1 " title={student_id && student_id.length > 10 ? student_id : ''}
          style={{maxWidth: '160px'}} >{student_id}</span>
    }
  }
  , {
    title: '手机号',
    dataIndex: 'user_phone',
    key: 'user_phone',
    align:'center',
    width:"10%",
    className:"color-grey-6",
    // sorter: true,
    // sortDirections: sortDirections,
    // sortOrder: sortedInfo.columnKey === 'user_phone' && sortedInfo.order,
    render: (user_phone, record) => {
      return <span className="color-dark overflowHidden1 " title={user_phone && user_phone.length > 10 ? user_phone : ''}
          style={{maxWidth: '160px'}} >{user_phone}</span>
    }
  }
  , {
    title: '邮箱',
    dataIndex: 'user_mail',
    key: 'user_mail',
    align:'center',
    width:"10%",
    className:"color-grey-6",
    // sorter: true,
    // sortDirections: sortDirections,
    // sortOrder: sortedInfo.columnKey === 'user_mail' && sortedInfo.order,
    render: (user_mail, record) => {
      return <span className="color-dark overflowHidden1 " title={user_mail && user_mail.length > 10 ? user_mail : ''}
          style={{maxWidth: '160px'}} >{user_mail}</span>
    }
  }
  ];

  if (that.hasGroupModule()) {
    that.isStudentPage && columns.push({
      title: '分班',
      dataIndex: 'course_group_name',
      key: 'course_group_name',
      align:'center',
      width:"25%",
      className:"color-grey-6",
      sorter:showSorter,
      sortDirections: sortDirections,
      sortOrder: sortedInfo.columnKey === 'course_group_name' && sortedInfo.order,
    })
  }
  const isAdminOrStudent = that.props.isAdminOrStudent()
  if (!isAdminOrStudent) {
    columns.some((item,key)=> {
      if (item.title === "学号") {
        columns.splice(key, 1)
        return true
      }
    })
  }
  const isAdmin = that.props.isAdmin()
  if (isAdmin) {
    !that.isStudentPage && columns.unshift({
      title: '',
      dataIndex: 'check',
      key: 'check',
      render: (text, item) => {
        return <Checkbox value={item.course_member_id} key={item.course_member_id} ></Checkbox>
      },
      width:"5%"
    })

    columns.push({
      title: '操作',
      key: 'action',
      width: '22%',
      align:'center',
      render: (text, record) => {
        return (
          <React.Fragment>
            <WordsBtn  onClick={() => that.onDelete(record)} style={'grey'}>删除学生</WordsBtn>
            {record.member_roles && record.member_roles.length && <ChangeRolePop
              style={{ marginLeft: '12px' }}
              courseId={courseId}
              record={record}
              member_roles={record.member_roles}
              onChangeRoleSuccess={that.onChangeRoleSuccess}
              showNotification={that.props.showNotification}
              getUserId={that.props.isUserid}
              fetchUser={that.props.fetchUser}
            ></ChangeRolePop>}
          </React.Fragment>
        )
      },
    })

  }

  return columns;
}

// 1-按照学生学号 2-按照分班名称，
const ORDER_BY_NUM = 1;
const ORDER_BY_GROUP = 2;

class studentsList extends Component{
  constructor(props){
    super(props);
    this.state={
      page:1,
      order: ORDER_BY_NUM,
      searchValue: '',
      course_groups: [],
      students: [],
      checkBoxValues: [],

      stu_new_flag:false,
      StudentList_value:"",
      modalsType:"",
      modalsTopval:"",
      modalsBottomval:"",
      modalCancel:"",
      n_And_e:1,
      isSpin:false,
      DownloadType:false,
      DownloadMessageval:undefined,
      sortedInfo: {order:'ascend',columnKey: 'student_id'}
    }
  }
/// 确认是否下载
  confirmysl(url,urls){
    // this.props.showGlobalLoading('正在生成文件，请稍后...')
    axios.get(url + 'export=true').then((response) => {
      if(response === undefined){
        return
      }
      if(response.data.status&&response.data.status===-1){

      }else if(response.data.status&&response.data.status===-2){
        if(response.data.message === "100"){
          // 已超出文件导出的上限数量（100 ），建议：

          this.setState({
            DownloadType:true,
            DownloadMessageval:100
          })
        }else {
          //因附件资料超过500M
          this.setState({
            DownloadType:true,
            DownloadMessageval:500
          })
        }
      }else {

        // this.props.showNotification(`正在下载中`);
        // window.open("/api"+url, '_blank');
        this.props.slowDownload(getRandomcode(url))

        // getUrl() + "/api"+
        // const fileUrl = url;

        // this.props.slowDownload(fileUrl)
        // return;

        // downloadFile({
        //   url: fileUrl,
        //   successCallback: (url) => {
        //     console.log('successCallback')
        //   },
        //   failCallback: (responseHtml, url) => {
        //     console.log('failCallback')
        //   }
        // })
        // window.open(fileUrl, "_self");// , '_blank'
      }
    }).catch((error) => {
      console.log(error)
    });
  }
  hasGroupModule = () => {
    const { course_modules } = this.props;
    const result = course_modules && course_modules.filter( item => {
      return item.type == 'course_group'
    })
    return result && result.length > 0
  }

  Downloadcal=()=>{
    this.setState({
      DownloadType:false,
      DownloadMessageval:undefined
    })
  }

  inputStudent=(e)=>{
    this.setState({
      StudentList_value:e.target.value
    })
  }
  // 有关新建分班和分班重命名
  showStuNewBox=(index)=>{
    this.setState({
      stu_new_flag:true,
      n_And_e:index
    })
  }
  hideStuNewBox=()=>{
    this.setState({
      stu_new_flag:false
    })
  }
  // 有关删除分班
  delClasses=()=>{
    this.setState({
      modalsType:true,
      modalsTopval:"该分班的学生将被移动到“XX班”",
      modalsBottomval:"是否确认删除？",
      modalCancel:true
    })
  }
  cancelDelClasses=()=>{
    this.setState({
      modalsType:false,
      modalsTopval:"",
      modalsBottomval:"",
      modalCancel:false
    })
  }
  // 确认删除
  sureDelClasses=()=>{
    this.setState({
      modalsType:false,
      modalsTopval:"",
      modalsBottomval:"",
      modalCancel:false
    })
  }

  onChange=()=>{

  }
  onChangeRoleSuccess = () => {
    this.fetchAll()
  }
  componentDidMount() {
    this.setState({
      isSpin:true
    })
    this.fetchAll()
    const isAdmin = this.props.isAdmin()
    // if (isAdmin) {
      this.fetchCourseGroups();
    // }

    isAdmin && on('addStudentSuccess', this.addStudentSuccessListener)
    isAdmin && on('updateNavSuccess', this.updateNavSuccess)
  }
  componentWillUnmount() {
    if (this.clipboard) {
      this.clipboard.destroy()
    }
    const isAdmin = this.props.isAdmin()
    if (isAdmin) {
      off('addStudentSuccess', this.addStudentSuccessListener)
      off('updateNavSuccess', this.updateNavSuccess)
    }
  }
  createGroupImportSuccess = () => {
    this.props.updataleftNavfun()
  }
  updateNavSuccess = () => {
    this.fetchCourseGroups()
    this.fetchAll()
  }

  addStudentSuccessListener=(e, data)=>{
    const params = JSON.parse(data)
    this.props.updataleftNavfun()
    const course_group_id = this.props.match.params.course_group_id
    const coursesId = this.props.match.params.coursesId
    if (params.course_group_id == course_group_id) {
      this.fetchAll(1)
    } else {
      this.props.history.push(`/classrooms/${coursesId}/course_groups/${params.course_group_id || '0'}`)
    }
    // console.log('addStudentSuccessListener', data)
  }
  fetchCourseGroups = () => {
    const courseId = this.props.match.params.coursesId

    let url = `/courses/${courseId}/all_course_groups.json`

    axios.get(url, {
    })
    .then((response) => {
      if (response.data.course_groups && response.data.course_groups.length) {
        this.setState({
          course_groups: response.data.course_groups
        })
      } else {
        // showNotification('')
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  componentDidUpdate(prevProps) {
    if (prevProps.match.params.course_group_id != this.props.match.params.course_group_id) {
      this.setState({checkBoxValues: [], checkAllValue: false })

      this.fetchAll(1)
    }
    // 加载了2次
    // else if (prevProps.coursesids != this.props.coursesids) {
    //   this.fetchAll(1)
    // }
  }
  fetchAll = (argPage) => {
    this.setState({
      isSpin:true
    })
    let id = this.props.match.params.coursesId
    let course_group_id = this.props.match.params.course_group_id

    const { coursesids } = this.props
    // if (!coursesids) {
    //   return;
    // }
    if (!course_group_id || course_group_id == coursesids) {
      course_group_id = ''
    }
    if (argPage) {
      this.setState({ page: argPage })
    }
    let page = argPage || this.state.page
    let { searchValue , sortedInfo }=this.state
    let order = 1;
    if (sortedInfo.columnKey == 'student_id') {
      order = 1;
    } else if (sortedInfo.columnKey == 'course_group_name') {
      order = 2;
    }
    let sort = 'desc';
    if (sortedInfo.order == 'ascend') {
      sort = 'asc'
    }

    let url=`/courses/${id}/students.json?order=${order}&sort=${sort}&page=${page}&limit=20&course_group_id=${course_group_id}`;
    if(!!searchValue){
      url+='&search='+searchValue;
    }
    axios.get(encodeURI(url)).then((result)=>{
      if (result.data.students) {
        this.setState({
          students: result.data.students,
          total_count: result.data.students_count,
          course_group_name: result.data.course_group_name,
          invite_code: result.data.invite_code,
           isSpin:false
        }, () => {
          if (course_group_id) {
            if (!this.clipboard) {
              const clipboard = new ClipboardJS('.copybtn');
              clipboard.on('success', (e) => {
                this.props.showNotification('复制成功')
              });
              this.clipboard = clipboard
            }
          }
        })
      }
    }).catch((error)=>{
      console.log(error);
      this.setState({
        isSpin:false
      })
    })
  }

  onInputSearchChange = (e) => {
    this.setState({
      searchValue: e.target.value
    })

    // if (this.timeoutHandler) {
    //   clearTimeout(this.timeoutHandler)
    // }
    // this.timeoutHandler = setTimeout(() => {
    //   this.fetchAll(1)
    // }, 1200)
  }
  onSortTypeChange = (order) => {
    this.setState({ order: order }, () => {
      this.fetchAll()
    })
  }
  onPageChange = (page) => {
    this.fetchAll(page)
    this.setState({ checkAllValue: false })
  }

  onPressEnter = (e) => {
    this.fetchAll(1)
  }

  onCheckBoxChange = (checkedValues) => {
    this.setState({
      checkBoxValues: checkedValues,
      checkAllValue: checkedValues.length == this.state.students.length
    })
  }
  // 多选
  moveToGroup = (group) => {
    const len = this.state.checkBoxValues.length
    if (len == 0) {
      this.props.showNotification('请从列表先选择要移动的学生')
      return;
    }

    let id = this.props.match.params.coursesId
    let { order, searchValue }=this.state
    let url=`/courses/${id}/transfer_to_course_group.json`;
    axios.post((url), {
      students: this.state.checkBoxValues.map(item => {return {course_member_id: item} }),
      course_group_id: group.id
    }).then((result)=>{
      if (result.data.status == 0) {
        this.props.showNotification('移动成功')
        this.setState({checkBoxValues: []})
        this.fetchAll()
        this.props.updataleftNavfun()

      }
    }).catch((error)=>{
      console.log(error);
    })
  }
  onCheckAll = (e) => {
    this.setState({
      checkAllValue: e.target.checked
    })
    const values = this.state.students.map(item => {
      return item.course_member_id
    })
    if (e.target.checked) {
      const concated = this.state.checkBoxValues.concat(values);
      const sortedUniqed = _.uniq(concated)
      this.setState({
        checkBoxValues: sortedUniqed
      })
    } else {
      this.setState({
        checkBoxValues: _.difference(this.state.checkBoxValues, values)
      })
    }
  }
  // 多选
  onDelete = (record) => {
    if (!record) {
      const len = this.state.checkBoxValues.length
      if (len == 0) {
        this.props.showNotification('请先从列表选择要删除的学生')
        return;
      }
    }

    this.props.confirm({
      // content: `确认要删除所选的${len}个学生吗？`,
      content: `是否确认删除?`,
      onOk: () => {
        let id = this.props.match.params.coursesId
        let url=`/courses/${id}/delete_from_course.json`;
        axios.post((url), {
          students: [{course_member_id: record.course_member_id}] // this.state.checkBoxValues.map(item => {return {course_member_id: item} }),
        }).then((result)=>{
          if (result.data.status == 0) {
            this.props.showNotification('删除成功')
            this.props.updataleftNavfun()
            this.fetchAll()
            this.setState({checkBoxValues: []})
            trigger('updatabanner')
          }
        }).catch((error)=>{
          console.log(error);
        })
      }
    })
  }
  addDir = () => {
    trigger('groupAdd', this.props.coursesids)
  }
  doAddToDir = async () => {
    const courseId = this.props.match.params.coursesId
    const url = `/courses/${courseId}/join_course_group.json`
    const course_group_id = this.props.match.params.course_group_id

    const response = await axios.post(url, {
      course_group_id
    })
    if (response && response.data.status == 0) {
      this.props.showNotification(`已加入分班：${this.state.course_group_name}`)
      this.props.updataleftNavfun()
      this.fetchAll()
    }
  }
  addToDir = (record) => {
      this.props.confirm({

          content: `是否确认加入分班: ${this.state.course_group_name}?`,

          okText: '确认',
          cancelText: '取消',

          onOk: () => {
              this.doAddToDir()
          },
          onCancel() {
              console.log('Cancel');
          },
      });
  }
  renameDir = () => {
    const course_group_id = this.props.match.params.course_group_id
    trigger('groupRename', { id: parseInt(course_group_id), name: this.state.course_group_name})
  }
  deleteDir = () => {
    this.props.confirm({
      content: <div>
          <div>该分班的学生将被移动到“未分班”</div>
          <div>是否确认删除?</div>
        </div>,
      onOk: () => {
        const course_group_id = this.props.match.params.course_group_id
        const courseId = this.props.match.params.coursesId

        const url = `/course_groups/${course_group_id}.json`
        axios.delete(url)
        .then((response) => {
          if (response.data.status == 0) {
            this.props.showNotification('删除成功')
            this.props.history.push(`/classrooms/${courseId}/course_groups`)
          }
        })
        .catch(function (error) {
          console.log(error);
        });
      }
    })
  }
  jsCopy = () => {
      var e = document.getElementById("copy_invite_code");
      e.select();
      document.execCommand("Copy");
      this.props.showNotification('复制成功')
  }

  onTableChange = (pagination, filters, sorter) =>{
    this.setState({
      sortedInfo: sorter,
    }, () => {
      this.fetchAll();
    });
  }


  render(){
    const isAdmin = this.props.isAdmin()
    const isStudent = this.props.isStudent()
    const isSuperAdmin = this.props.isSuperAdmin()
    const isCourseEnd = this.props.isCourseEnd()
    let {
      page,

      order,
      StudentList_value,
      stu_new_flag,
      modalsType,
      modalsTopval,
      modalsBottomval,
      n_And_e  ,

      students,
      searchValue,
      total_count,
      course_groups,
      checkBoxValues,
      checkAllValue
    }=this.state;
    let currentOrderName = '学生学号排序'
    if (order == ORDER_BY_GROUP) {
      currentOrderName = '分班名称排序'
    }
    const { coursesids } = this.props
    const course_group_id = this.props.match.params.course_group_id
    const isParent = !course_group_id || course_group_id == coursesids
    const { course_group_name, invite_code } = this.state;

    const courseId = this.props.match.params.coursesId
    let exportUrl = `/courses/${courseId}/export_member_scores_excel.xlsx?`; //总成绩
    let exportUrltwo = `/courses/${courseId}/export_couser_info.xlsx?`; //课堂信息
    let exportUrlthree = `/courses/${courseId}/export_member_act_score.xlsx?`; //活跃度



    const params = {}
    if (course_group_id) {
        params.group_id = course_group_id
    }
    if (searchValue) {
      searchValue = searchValue.trim()
      if (searchValue) {
        params.search = searchValue
      }
    }
    let paramsString = ''
    for (let key in params) {
      paramsString += `&${key}=${params[key]}&`
    }
    exportUrl += paramsString;
    exportUrltwo+=paramsString;
    exportUrlthree += paramsString;


    // console.log(paramsString);
    // console.log(checkBoxValues);
    // console.log(searchValue);
    let pageType = TYPE_STUDENTS
    if (this.props.match.path.endsWith('students')) {

    } else if (course_group_id) {
      pageType = TYPE_COURSE_GOURP_CHILD
    } else {
      pageType = TYPE_COURSE_GOURP_PARENT
    }
    // 本页面有2个状态，学生列表、具体分班
    const isStudentPage = pageType == TYPE_STUDENTS
    this.isStudentPage = isStudentPage
    const isGroupChildPage = pageType == TYPE_COURSE_GOURP_CHILD
		let studentlist=buildColumns(this,isParent);
    if(this.props.isexcellent===true){
			studentlist.some((item,key)=> {
					if (item.title === "手机号") {
						studentlist.splice(key, 1)
						return true
					}
				}
			)
		}

		if(this.props.isexcellent===true){
			studentlist.some((item,key)=> {
					if (item.title === "邮箱") {
						studentlist.splice(key, 1)
						return true
					}
				}
			)
		}

    return(
      <React.Fragment >
        <DownloadMessageysl
          {...this.props}
          value={this.state.DownloadMessageval}
          modalCancel={this.Downloadcal}
          modalsType={this.state.DownloadType}
        />
        <Titlesearchsection
          title={isParent ? (pageType == TYPE_STUDENTS ? "全部学生" : "学生列表"):
            <React.Fragment>
              {
                course_group_name ?
                <span>
                  <Tooltip title="返回至分班列表">
                    <i className="icon-zuojiantou iconfont font-14" onClick={() => { this.props.history.push(`/classrooms/${courseId}/course_groups`)}}
                      style={{color: '#212121', verticalAlign: 'initial', marginRight: '14px' }}
                    ></i>
                  </Tooltip>{course_group_name}
                </span>
                :
                <ul className="course_publicNav">
                  <li onClick={() => { this.props.history.push(`/classrooms/${courseId}/course_groups`)}}>分班列表</li>
                  <li className="active">未分班</li>
                </ul>
              }

              {isAdmin && invite_code && <React.Fragment>
                <span className="color-grey-9 font-16 ml10">邀请码：</span>
                <span className="color-orange font-16">
                  {invite_code}
                </span>
                <Tooltip title={<div>
                    <div>成员可以通过邀请码主动加入分班</div>
                    <div>点击立刻复制邀请码</div>
                  </div>}>
                  <span>
                  <i class="iconfont icon-fuzhi font-14 ml10 copybtn" style={{color: '#FF6800', cursor: 'pointer', verticalAlign: 'baseline'}} data-clipboard-text={invite_code} ></i>
                  </span>
                </Tooltip>
              </React.Fragment>
              }

            </React.Fragment>
          }
          searchValue={ searchValue }
          onInputSearchChange={this.onInputSearchChange}
          showSearchInput={total_count >= 10}
          searchPlaceholder={ '请输入姓名、学号进行搜索' }
          firstRowRight={
            <React.Fragment>
              {/* {
                // pageType !== TYPE_STUDENTS &&
                !isStudentPage && isSuperAdmin && <React.Fragment>
                  <CreateGroupByImportModal ref="createGroupByImportModal" {...this.props}
                    createGroupImportSuccess={this.createGroupImportSuccess}
                  ></CreateGroupByImportModal>
                  <WordsBtn style="blue" className="mr30" onClick={()=> this.refs['createGroupByImportModal'].setVisible(true)}>导入创建分班</WordsBtn>
                </React.Fragment> } */}

              {
                  !isStudentPage && isAdmin && !isParent && course_group_id != 0 && <WordsBtn style="blue" className="mr30" onClick={()=>this.deleteDir()}>删除分班</WordsBtn> }
              {
                  !isStudentPage && isAdmin && !isParent && course_group_id != 0 && <WordsBtn style="blue" className="mr30" onClick={()=>this.renameDir()}>分班重命名</WordsBtn> }
              {
                  !isStudentPage && !isCourseEnd && isAdmin  && <WordsBtn style="blue" className="mr30" onClick={()=>this.addDir()}>新建分班</WordsBtn> }

              {
                  !isStudentPage && isStudent && !isParent && course_group_id != 0 && <WordsBtn style="blue" className="" onClick={()=>this.addToDir()}>加入分班</WordsBtn> }
              <style>{`
                .drop_down_menu li a {
                    padding: 0px;
                    font-size: 14px;
                }
                .drop_down_menu {
                    /*width: 93px;*/
                }
                .drop_down_menu li {
                    width:100%;
                    box-sizing:boder-box;
                    float:unset;
                    line-height:30px!important;
                    flex: 0 0 30px;
                }
                .drop_down_menu, .drop_down_normal {
                    padding-top: 10px;
                    padding-bottom: 8px;
                }
                .drop_down_menu .drop_down_btn{
                  border-top:none;
                }
                .dividerStyle.ant-divider-horizontal{
                  margin: 0px;
                }
                `}</style>
              { isAdmin &&
              <li className="li_line drop_down fr color-blue font-16">
                导出<i className="iconfont icon-xiajiantou font-12 ml2"></i>
                <ul className="drop_down_menu" style={{"right": "-20px", "left": "unset", "height": "auto"}}>

                  <li><a
                  	onClick={(i) => this.confirmysl(exportUrltwo)}>课堂信息</a>
                  </li>
                  <li><a
                    onClick={(i) => this.confirmysl(exportUrlthree)}>活跃度</a>
                  </li>
                  <li><a
                    onClick={(i) => this.confirmysl(exportUrl)}>总成绩</a>
                  </li>

                </ul>
              </li>
              }
              {/*<WordsBtn style="blue" className=""  onClick={(url)=>this.confirmysl(exportUrl)} >导出成绩</WordsBtn>*/}
              {/*  */}
            </React.Fragment>
          }
          secondRowLeft={
            total_count ? <ColorCountText count={total_count} name="个学生"></ColorCountText> : ''
          }
          onPressEnter={this.onPressEnter}
        ></Titlesearchsection>
        {
          total_count > 0 || this.state.isSpin == true ?
          <div className="mt20 edu-back-white padding20">
            <div className="clearfix stu_head" style={{paddingLeft: '5px'}}>
              {isAdmin && !isStudentPage && <Checkbox className="fl" onChange={this.onCheckAll} checked={checkAllValue} >已选 {checkBoxValues.length} 个</Checkbox>}
              <div className="studentList_operation_ul">
                {/* {isAdmin && <li className="li_line"><a href="javascript:void(0)" className="color-grey-9" onClick={this.onDelete}>删除</a></li>} */}
                {isAdmin && !isStudentPage && <li className="drop_down">
                  移动到...<i className="iconfont icon-xiajiantou font-12 ml2"></i>
                  <ul className="drop_down_menu" style={{"right":"0px","left":"unset", width: '200px', maxHeight: '324px', overflowY: 'auto'}}>
                    {
                      course_groups && course_groups.length > 9 ?
                      (<p className="drop_down_search">
                        <Input placeholder="搜索" value={this.state.groupSearchValue} onChange={(e) => {this.setState({groupSearchValue: e.target.value})}}/>
                      </p>):
                      ''
                    }
                    {
                      course_group_id != 0 && course_groups && course_groups.length > 0 &&
                      <li key={0} onClick={() => this.moveToGroup({id: 0})}>未分班</li>
                    }
                    { course_groups.filter((item)=> {
                      return item.id != course_group_id && (!this.state.groupSearchValue || item.name.indexOf(this.state.groupSearchValue) != -1)
                    }).map( item => {
                      return (
                        <li key={item.id} onClick={() => this.moveToGroup(item)} title={item.name}>{item.name}</li>
                      )
                    }) }
                    { course_groups && course_groups.length > 0 && <Divider className="dividerStyle"></Divider> }
                    { isAdmin && !isCourseEnd &&

                      <p className="drop_down_btn">
                        <a href="javascript:void(0)" className="color-grey-6"
                            onClick={()=>this.addDir()}
                        >新建分班...</a>
                      </p>

                    }
                  </ul>
                </li>}

                {/* <li className="drop_down">
                  {currentOrderName}
                  { course_groups && !!course_groups.length &&
                  <React.Fragment>
                  <i className="iconfont icon-xiajiantou font-12 ml2"></i>
                  <ul className="drop_down_normal" style={{width: '124px'}}>
                    <li onClick={() => this.onSortTypeChange(ORDER_BY_NUM)} >学生学号排序</li>
                    <li onClick={() => this.onSortTypeChange(ORDER_BY_GROUP)} >分班名称排序</li>
                  </ul>
                  </React.Fragment>
                   }
                </li> */}
              </div>
            </div>
            <Spin size="large" spinning={this.state.isSpin}>
            <div className="clearfix stu_table">
              {students && !!students.length && <Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={checkBoxValues}>
                <Table columns={studentlist} dataSource={students} onChange={this.onTableChange} pagination={false}></Table>
              </Checkbox.Group> }
            </div>
            </Spin>
          </div>
          :
          <NoneData></NoneData>
        }
        {/* showQuickJumper */}
        { total_count > 20 && <div className="clearfix mt30 mb50 edu-txt-center">
          <Pagination showQuickJumper defaultCurrent={page} current={page} pageSize={20} total={total_count} onChange={this.onPageChange} />
        </div> }
      </React.Fragment>
    )
  }
}
export default studentsList;