import React,{ Component } from "react";
import { Input,Checkbox,Table, Pagination, Modal,Menu ,Spin, Tooltip} 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 } 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'

const Search =Input.Search;

const buildColumns = (that) => {
  const { course_groups } = that.state
  const columns=[{
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    align:'center',
    width:"10%",
    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",
    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>
    }
  }];
  if (course_groups && course_groups.length) {
    columns.push({
      title: '分班',
      dataIndex: 'course_group_name',
      key: 'course_group_name',
      align:'center',
      width:"40%",
      className:"color-grey-6"
    })
  }
  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) {
    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%"
  })
  }

  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,
    }
  }
/// 确认是否下载
  confirmysl(url){
    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');
      }
    }).catch((error) => {
      console.log(error)
    });
  }

  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=()=>{

  }

  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() {
    const isAdmin = this.props.isAdmin()
    if (isAdmin) {
      off('addStudentSuccess', this.addStudentSuccessListener)
      off('updateNavSuccess', this.updateNavSuccess)
    }
  }
  updateNavSuccess = () => {
    this.fetchCourseGroups()
  }
  
  addStudentSuccessListener=(e, data)=>{
    const params = JSON.parse(data)
    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(`/courses/${coursesId}/course_groups/${params.course_group_id}`)
    }
    // 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: []})
      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 { order, searchValue }=this.state
    let url=`/courses/${id}/students.json?order=${order}&page=${page}&limit=20&course_group_id=${course_group_id}`;
    if(!!searchValue){
      url+='&search='+searchValue;
    }
    axios.get((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 (!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 = () => {
    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: this.state.checkBoxValues.map(item => {return {course_member_id: item} }),
        }).then((result)=>{
          if (result.data.status == 0) {
            this.props.showNotification('删除成功')
            this.fetchAll()
            this.setState({checkBoxValues: []})
            trigger('updatabanner')
          }
        }).catch((error)=>{
          console.log(error);
        })
      }
    })
  }
  addDir = () => {
    trigger('groupAdd', this.props.coursesids)
  }
  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 cid = this.props.match.params.coursesId
        const course_group_id = this.props.match.params.course_group_id

        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(response.data.right_url)
          }
        })
        .catch(function (error) {
          console.log(error);
        });    
      }
    })
  }
  jsCopy = () => {
      var e = document.getElementById("copy_invite_code");
      e.select();
      document.execCommand("Copy");
      this.props.showNotification('复制成功')
  }

  render(){
    const isAdmin = this.props.isAdmin()
    const isSuperAdmin = this.props.isSuperAdmin()
    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?`
    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;
    return(
      <React.Fragment >
        <DownloadMessageysl
          {...this.props}
          value={this.state.DownloadMessageval}
          modalCancel={this.Downloadcal}
          modalsType={this.state.DownloadType}
        />
        <Titlesearchsection
          title={isParent ? "学生列表" : 
            <React.Fragment>
              <span>{course_group_name || '未分班'}</span>
              {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> 
              { isSuperAdmin && <React.Fragment>
                  <CreateGroupByImportModal ref="createGroupByImportModal" {...this.props}></CreateGroupByImportModal>
                  <WordsBtn style="blue" className="mr30" onClick={()=> this.refs['createGroupByImportModal'].setVisible(true)}>导入创建分班</WordsBtn>
                </React.Fragment> }
              { isAdmin && isParent && <WordsBtn style="blue" className="mr30" onClick={()=>this.addDir()}>添加分班</WordsBtn> }
              { isAdmin && !isParent && course_group_id != 0 && <WordsBtn style="blue" className="mr30" onClick={()=>this.deleteDir()}>删除分班</WordsBtn> }
              { isAdmin && !isParent && course_group_id != 0 && <WordsBtn style="blue" className="mr30" onClick={()=>this.renameDir()}>分班重命名</WordsBtn> }
              { isAdmin && <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>
        {/* <div className="edu-back-white">
          <p className="clearfix padding30 bor-bottom-greyE">
            <span className="font-18 fl color-dark-21">学生列表</span>
            <span className="color-grey-9 fl font-16 ml10 lineh-15 mt3">邀请码：<span className="color-orange-tip">CKPYL</span></span>
            <li className="fr">
              <a href="javascript:void(0)" className="color-blue mr30">导入创建分班</a>
              <WordsBtn style="blue" className="mr30" onClick={()=>this.showStuNewBox(1)}>新建分班</WordsBtn>
              <a href="javascript:void(0)" className="color-blue mr30" onClick={()=>this.delClasses()}>删除分班</a>
              <a href="javascript:void(0)" className="color-blue mr30" onClick={()=>this.showStuNewBox(2)}>分班重命名</a>
              <a href="javascript:void(0)" className="color-blue">导出成绩</a>
            </li>
          </p>
          <div className="clearfix pl30 pr30">
            <span className="fl mt22">共<label className="color-orange-tip ml3 mr3">6</label>位学生</span>
            <div className="fr mt16 mb16 searchView">
              <Search 
              value={StudentList_value}
              placeholder="请输入姓名进行搜索"
              onInput={this.inputStudent}
              ></Search>
            </div>
          </div>

          <Modals
            modalsType={modalsType}
            modalsTopval={modalsTopval}
            modalsBottomval={modalsBottomval}
            modalCancel={this.cancelDelClasses}
            modalSave={this.sureDelClasses}
          >
          </Modals>
          <Modal
            title={n_And_e==1?"新建分班":"分班重命名"}
            visible={stu_new_flag}
            closable={false}
            footer={null}
            destroyOnClose={true}
            centered={true}
          >
            <div className="newupload_conbox clearfix">
              <div className="df">
                <span className="fl mr20 lineh-40">分班：</span>
                <Input placeholder="示例：分班（最佳4个字符）" className="input-flex-40"/>
              </div>
              <div className="mt30 marginauto clearfix edu-txt-center">
                <a onClick={this.hideStuNewBox} className="pop_close task-btn mr30">取消</a>
                <a className="task-btn task-btn-orange" id="submit_send_shixun">确定</a>
              </div>
            </div>
          </Modal>
        </div> */}



        {
          total_count > 0 || this.state.isSpin == true ?
          <div className="mt20 edu-back-white padding20">
            <div className="clearfix stu_head" style={{paddingLeft: '15px'}}>
              {isAdmin && <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 && <li className="li_line drop_down">
                  移动到...<i className="iconfont icon-xiajiantou font-12 ml2"></i>
                  <ul className="drop_down_menu" style={{"right":"0px","left":"unset", minWidth: '160px', 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 && <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)}>{item.name}</li>
                      )
                    }) }
                    { isAdmin &&
                      
                      <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">
              {!this.state.isSpin && <Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={checkBoxValues}>       
                <Table columns={buildColumns(this)} dataSource={students} 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;