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 = () => {
    const { page, searchValue } = this.state;
    this.fetchAll(page, searchValue);
  }
  componentDidMount() {
    this.setState({
      isSpin: true
    })
    const { page, searchValue } = this.state;
    this.fetchAll(page, searchValue);
    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();
    const { page, searchValue } = this.state;

    this.fetchAll(page, searchValue);
  }

  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;
    const { searchValue } = this.state;
    if (params.course_group_id === course_group_id) {
      this.fetchAll(1, searchValue);
    } 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, this.state.searchValue)
    }
    // 加载了2次
    // else if (prevProps.coursesids != this.props.coursesids) {
    //   this.fetchAll(1)
    // }
  }
  fetchAll = (argPage, searchValue) => {
    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 { 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) => {
    const { page, searchValue } = this.state;
    this.setState({ order: order }, () => {
      this.fetchAll(page, searchValue)
    })
  }
  onPageChange = (page) => {
    const { searchValue } = this.state;
    this.fetchAll(page, searchValue)
    this.setState({ checkAllValue: false })
  }

  onPressEnter = (e) => {
    this.setState({
      page: 1,
      searchValue: e
    })
    this.fetchAll(1, e)
  }

  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, page } = 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(page, searchValue);
        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;
      }
    }
    const { page, searchValue } = this.state;

    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(page, searchValue);
            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
    })
    const { page, searchValue } = this.state;

    if (response && response.data.status == 0) {
      this.props.showNotification(`已加入分班：${this.state.course_group_name}`)
      this.props.updataleftNavfun()
      this.fetchAll(page, searchValue)
    }
  }
  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) => {
    const { page, searchValue } = this.state;

    this.setState({
      sortedInfo: sorter,
    }, () => {
      this.fetchAll(page, searchValue);
    });
  }


  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 className="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}
          allowClearonChange={this.onInputSearchChange}
          showSearchInput={total_count >= 10}
          onPressEnter={this.onPressEnter}
          searchPlaceholder={'请输入姓名、学号进行搜索'}
          firstRowRight={
            <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> : ''
          }
        ></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   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 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;
