import React,{ Component } from "react";
import { Input,Checkbox,Menu,Pagination,Spin} from "antd";
import CourseLayoutcomponent from '../common/CourseLayoutComponent';
import UseBank from './UseBank'

import '../css/members.css'
import '../css/busyWork.css'

import CoursesListType from '../coursesPublic/CoursesListType'
import CommonWorkItem from './CommonWorkItem'
import PublishRightnow from './PublishRightnow'
import ConnectProject from './ConnectProject'

import { WordsBtn, on, off } from 'educoder'
import Modals from '../../modals/Modals'
import NoneData from "../coursesPublic/NoneData"
import Titlesearchsection from '../common/titleSearch/TitleSearchSection';
import { RouteHOC } from './common'

import axios from 'axios';
import _ from 'lodash'

const Search = Input.Search;
const map={1:"普通作业",2:"",3:"分组作业"}
const COMMON_WORK = 1
// const COMMON_WORK = 2
class commonWork extends Component{
  constructor(props){
    super(props);
    this.state={
      modalsType:"",
      modalsTopval:"",
      modalsBottomval:"",
      modalCancel:"",
      mainList:undefined,
      selectedKeys: 'all',
      order:"",
      page:1,
      search:"",
      totalCount:0,
      checkAll:false,
      checkBoxValues:[],
      isSpin:false
    }
  }
  //输入搜索条件
  inputStudent=(e)=>{
    this.setState({
      search:e.target.value,
      page:1
    })
  }
  //搜索查询
  searchStudent=()=>{
    let {page,search,order}=this.state;
    this.getList(page,search,order);
  }
  openConnectionProject = (work) => {
    this.refs['connectProject'].openConnectionProject(work)
  }

  // 新建
  createCommonWork=(type)=>{
    this.props.toNewPage(this.props.match.params) 
  }

  cancelDelClasses=()=>{
    this.setState({
      modalsType:false,
      modalsTopval:"",
      modalsBottomval:"",
      modalCancel:false
    })
  }
  sureDelClasses(){

  }
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.match.path != this.props.match.path) {
      this.clearSelection()
      this.setState({ selectedKeys: 'all', order: '' }, () => {
        this._getList()
      })
    }
  }
  
  _getList = () => {
    this.setState({
      isSpin:true
    })
    let {page,search,order}=this.state;
    this.getList(page,search,order);
  }
  componentDidMount(){
    this._getList()

    on('updateNavSuccess', this.updateNavSuccess)
  }
  componentWillUnmount() {
    off('updateNavSuccess', this.updateNavSuccess)
  }
  updateNavSuccess = () => {
    this._getList()
  }
  
  useBankSuccess = (checkBoxValues, newWorkIdArray) => {
    this.setState({
      page:1,
      checkBoxValues: newWorkIdArray
    }, () => {
      this.refs['publishModalRef'].open()
    })
    
    let {search, order}=this.state;
    this.getList(1, search, order);
  }

  getList=(page,search,order)=>{
    this.setState({
      isSpin:true
    })
    let id=this.props.match.params.coursesId;
    let workType = this.props.getModuleType()
    let url="/courses/"+id+"/homework_commons.json?type="+workType+"&page="+page;
    if(order!=""){
      url+="&order="+order;
    }
    if(search!=""){
      url+="&search="+search;
    }
    axios.get(encodeURI(url)).then((result)=>{
      if(result.status==200){
        this.setState({
          mainList:result.data,
          totalCount:result.data.task_count,
          isSpin:false,
          ...result.data
        })
      }
    }).catch((error)=>{
      console.log(error);
    })
  }
  //筛选条件
  selectedStatus=(e)=>{
    this.clearSelection()
    this.setState({
      order:e.key==="all"?"":e.key,
      selectedKeys: e.key,
      page:1,
      isSpin:true,
      checkBoxValues:[],
      checkAll:false
    })
    let {search}=this.state;
    this.getList(1,search,e.key==="all"?"":e.key);
  }

  onPageChange=(pageNumber)=>{
    this.setState({
      page:pageNumber,
			checkBoxValues:[]
    })
    let {search,order}=this.state;
    this.getList(pageNumber,search,order);
  }

  // 全选和反选
  changeAll=(e)=>{
    this.setState({
      checkAll: e.target.checked
    })

    const valueId=this.state.mainList.homeworks.map(item=>{
      return item.homework_id
    })
    if (e.target.checked) {
      const concated = this.state.checkBoxValues.concat(valueId);
      const sortedUniqed = _.uniq(concated)
      this.setState({
        checkBoxValues: sortedUniqed
      })
    } else {
      this.setState({
        checkBoxValues: _.difference(this.state.checkBoxValues, valueId)
      })
    }
  }

  onChangeSelect=(checkedValues)=>{
    this.setState({
      checkBoxValues: checkedValues,
      checkAll: checkedValues.length == this.state.mainList.homeworks.length
    })
  }

  onWorkDelete = () => {
    const { checkBoxValues } = this.state;
    const len = checkBoxValues.length;
    if (len == 0) {
      this.props.showNotification('请先选择要删除的作业')
      return;
    }
    this.props.confirm({
      // content: `确认要删除所选的${len}个作业吗？`,
      content: <div>
        <div>已提交作品将全部被删除，不可恢复</div>
        <div>是否确认删除?</div>
      </div>,
      onOk: () => {
        let coursesId=this.props.match.params.coursesId;
        const url = `/courses/${coursesId}/homework_commons/multi_destroy.json`
        axios.post(url, {
          homework_ids: checkBoxValues,
          all_check: 0,
          // group_ids
        }).then((response) => {
          if (response.data.status == 0) { 
            this.props.showNotification('删除成功')
            this.clearSelection()
            let {search,order}=this.state;
            this.getList(1,search,order);
            this.props.updataleftNavfun()
          }
          console.log(response)
        }).catch((error) => {
          console.log(error)
        })
      }
    })
    
  }
  clearSelection = () => {
    this.setState({ checkBoxValues: [], checkAll: false })
  }
  // 
  onSetPublic = () => {
    const { checkBoxValues } = this.state;
    const len = checkBoxValues.length;
    if (len == 0) {
      this.props.showNotification('请先选择要公开的作业')
      return;
    }
    this.props.confirm({
      content: <div>
        <div>设为公开后，非课堂成员也可以访问查看</div>
        <div>是否确认设为公开？</div>
      </div>,
      onOk: () => {
        let coursesId=this.props.match.params.coursesId;
        const url = `/courses/${coursesId}/homework_commons/set_public.json`
        axios.post(url, {
          homework_ids: checkBoxValues,
          all_check: 0
        }).then((response) => {
          if (response.data.status == 0) { 
            this.props.showNotification('设为公开操作成功')
            let {search,order, page}=this.state;
            this.getList(page,search,order);
          }
          console.log(response)
        }).catch((error) => {
          console.log(error)
        })
      }
    })
  }
  doWhenSuccess = () => {
    let {search,order, page}=this.state;
    this.getList(page,search,order);
    this.setState({
			checkBoxValues:[]
		})
  }
  onItemClick = (item) => {
    const checkBoxValues = this.state.checkBoxValues.slice(0);
    const index = checkBoxValues.indexOf(item.id);
    if (index != -1) {
      _.remove(checkBoxValues, (listItem)=> listItem === item.id)
    } else {
      checkBoxValues.push(item.id)
    }
    this.onChangeSelect(checkBoxValues)
  }
  addToBank = () => {
    const { checkBoxValues } = this.state;
    const len = checkBoxValues.length;
    if (len == 0) {
      this.props.showNotification('请先选择要加入题库的作业')
      return;
    }
    const coursesId = this.props.match.params.coursesId
    const url = `/courses/${coursesId}/homework_commons/add_to_homework_bank.json`
    axios.post(url, {
      homework_ids: checkBoxValues,
      all_check: 0
    }).then((response) => {
      if (response.data.status == 0) { 
        this.props.showNotification('加入成功')
        let {search,order}=this.state;
        this.getList(1,search,order);
      }
      console.log(response)
    }).catch((error) => {
      console.log(error)
    })
  }
  connectSuccess = () => {
    let {page,search,order}=this.state;
    this.getList(page,search,order);
  }

  cancelConnectionProject = (work) => {
    let workId=this.props.match.params.workId;
    let courseId=this.props.match.params.coursesId;

    const url = `/homework_commons/${work.homework_id}/student_works/cancel_relate_project.json`
    axios.get(url).then((response)=> {
      if (response.data.status == 0) {
        let {page,search,order}=this.state;
        this.getList(page,search,order);
        this.props.showNotification('取消关联成功')
      }
     }).catch((error)=>{
       console.log(error)
     })
  }
  
  
  render(){
    let {
      search,
      page,
      modalsType,
      modalsTopval,
      modalsBottomval,
      mainList,
      totalCount,
      checkAll,
      checkBoxValues,

      task_count,
      published_count,
      unpublished_count,
      main_category_name,
    }=this.state;
    const { coursedata } = this.props;
    if (!coursedata) {
      return ''
    }
    let workType = this.props.getModuleType()
    const moduleChineseName = this.props.getModuleName(true)
    const { course_public } = coursedata;

    const isGroup = this.props.isGroup()
    const isAdmin = this.props.isAdmin()

    // <CourseLayoutcomponent {...this.props}>
    // </CourseLayoutcomponent>
    return(
      
      <div>
        {/* <div className="edu-back-white">
          <p className="clearfix padding30 bor-bottom-greyE">
            <span className="font-18 fl color-dark-21">{moduleChineseName}</span>
            
          </p>
          <div className="clearfix pl30 pr30">
            <div className="fl mt6 task_menu_ul">
              <Menu mode="horizontal" defaultSelectedKeys="all" onClick={this.selectedStatus}>
                <Menu.Item key="all">全部</Menu.Item>
                {isAdmin && <Menu.Item key="0">未发布</Menu.Item>}
                <Menu.Item key="1">提交中</Menu.Item>
                <Menu.Item key="2">补交中</Menu.Item>
                <Menu.Item key="3">匿评中</Menu.Item>
                <Menu.Item key="4">申诉中</Menu.Item>
                <Menu.Item key="5">评阅中</Menu.Item>
              </Menu>
            </div>
            <div className="fr mt16 mb16 searchView">
              <Search 
              value={search}
              placeholder="请输入姓名进行搜索"
              onInput={this.inputStudent}
              onSearch={this.searchStudent}
              ></Search>
            </div>
          </div>
        </div> */}
        <ConnectProject ref="connectProject" {...this.props} connectSuccess={this.connectSuccess}></ConnectProject>


        <Titlesearchsection
            title={main_category_name}
            searchValue={ search }
            // searchtype={this.props.isAdmin||this.props.isStudent ?true:false}
            onInputSearchChange={this.inputStudent}
            onPressEnter={this.searchStudent}

            firstRowRight={
              <React.Fragment>
                { isAdmin && <WordsBtn style="blue" className="fr" onClick={()=>this.createCommonWork(1)}>新建</WordsBtn>}
                { isAdmin && <li className="fr">
                  <UseBank {...this.props} {...this.state} object_type={isGroup ? "group" : "normal"} useBankSuccess={this.useBankSuccess}></UseBank>
                </li> }
              </React.Fragment>
            }
            secondRowBotton={
              <div className="fl mt6 task_menu_ul">
                <Menu mode="horizontal" selectedKeys={this.state.selectedKeys} onClick={this.selectedStatus}>
                  <Menu.Item key="all">全部</Menu.Item>
                  {isAdmin && <Menu.Item key="0">未发布</Menu.Item>}
                  <Menu.Item key="1">提交中</Menu.Item>
                  <Menu.Item key="2">补交中</Menu.Item>
                  <Menu.Item key="3">匿评中</Menu.Item>
                  <Menu.Item key="4">申诉中</Menu.Item>
                  <Menu.Item key="5">评阅中</Menu.Item>
                </Menu>
              </div>
            }
            secondRowLeft={
              <div style={{"display":"inline-block", "marginTop": "22px"}}>
                <span>共 {mainList&&mainList.all_count} 个{moduleChineseName}</span>
                <span style={{"marginLeft":"16px"}}>已发布：{published_count}个</span>
                {/* {this.props.isAdmin()?:""} */}
                <span style={{"marginLeft":"16px"}}>未发布：{unpublished_count}个</span>
              </div>
            }
            searchPlaceholder={"请输入名称进行搜索"}
            showSearchInput={true}
        ></Titlesearchsection>
        <PublishRightnow ref="publishModalRef" showActionButton={true} {...this.props} checkBoxValues={checkBoxValues} 
                showActionButton={false}
                isPublish={true}
						    isPublishtype={1}
								doWhenSuccess={this.doWhenSuccess} fromListPage={true}></PublishRightnow>
          {
            mainList && mainList.course_identity < 5 && mainList.homeworks.length>0 &&
          <div className="mt20 edu-back-white padding20-30">
            <div className="clearfix" >
              <Checkbox className="fl" onChange={this.changeAll}  checked={checkAll}>已选 {checkBoxValues.length} 个     （不支持跨页勾选）</Checkbox>
              <div className="studentList_operation_ul">
                <li className="li_line">
                  <a href="javascript:void(0)" className="color-grey-9"
                      onClick={this.onWorkDelete}>删除</a>
                </li>
                <li className="li_line">
                  <a href="javascript:void(0)" className="color-grey-9" onClick={() => this.refs['publishModalRef'].homeworkstart()}>{ "立即发布" }</a>
                </li>
                <li className="li_line">
                  <PublishRightnow showActionButton={true} {...this.props} checkBoxValues={checkBoxValues} 
                     isPublish={false} doWhenSuccess={this.doWhenSuccess} fromListPage={true}></PublishRightnow>
                </li>
                
                { !!course_public && <li className="li_line"><a href="javascript:void(0)" onClick={this.onSetPublic} className="color-grey-9">设为公开</a></li>}
                <li><a href="javascript:void(0)" className="color-grey-9"
                  onClick={this.addToBank}
                >加入题库</a></li>
              </div>
              {/* 设为公开 */}
              <Modals
                modalsType={modalsType}
                modalsTopval={modalsTopval}
                modalsBottomval={modalsBottomval}
                modalCancel={this.cancelDelClasses}
                modalSave={this.sureDelClasses}
              >
              </Modals>
            </div>
          </div>
          }


        <Spin size="large" spinning={this.state.isSpin}>
          <Checkbox.Group style={{"width":"100%"}} onChange={this.onChangeSelect} value={checkBoxValues}>
            <CommonWorkItem mainList={mainList} {...this.props} workType={workType} onItemClick={this.onItemClick}
              openConnectionProject={this.openConnectionProject}
              cancelConnectionProject={this.cancelConnectionProject}
            ></CommonWorkItem>
          </Checkbox.Group>
        </Spin>

        {
          mainList && mainList.homeworks && mainList.homeworks.length==0 && <NoneData></NoneData>
        }

        {
          !!totalCount && totalCount > 15 &&
          <div className="edu-txt-center pt30 pb10 clearfix">            
            <Pagination current={page} showQuickJumper pageSize={15} total={totalCount} onChange={this.onPageChange}></Pagination>
          </div>
        }
      </div>
    )
  }
}
export default RouteHOC() (commonWork);