import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import Loading from '../../../Loading';
import { WordsBtn, trigger, queryString, getRandomcode } from 'educoder';
import axios from 'axios';
import CoursesListType from '../coursesPublic/CoursesListType';
import AccessoryModal from "../coursesPublic/AccessoryModal";
import PublishRightnow from './PublishRightnow'
import '../css/Courses.css'
import CBreadcrumb from '../common/CBreadcrumb'
import DownloadMessageysl from "../../modals/DownloadMessageysl";
import ConnectProject from './ConnectProject'
import { Spin } from 'antd'

//引入对应跳转的组件

//新建分组/普通作业
const NewWork = Loadable({
  loader: () => import('./NewWork'),
  loading: Loading,
})

const CommonWorkSetting = Loadable({
  loader: () => import('./CommonWorkSetting'),
  loading: Loading,
})
//普通作业列表
const CommonWorkList = Loadable({
  loader: () => import('./CommonWorkList'),
  loading: Loading,
})
const CommonWorkQuestion = Loadable({
  loader: () => import('./CommonWorkQuestion'),
  loading: Loading,
})
const CommonWorkAnswer = Loadable({
  loader: () => import('./CommonWorkAnswer'),
  loading: Loading,
})
const CommonWorkAppraise = Loadable({
  loader: () => import('./CommonWorkAppraise'),
  loading: Loading,
})

const CommonWorkPost = Loadable({
  loader: () => import('./CommonWorkPost'),
  loading: Loading,
})

const CommonWork = Loadable({
  loader: () => import('./commonWork'),
  loading: Loading,
})
class CommonWorkDetailIndex extends Component {
  constructor(props) {
    super(props)
    this.publishModal = React.createRef();
    this.endModal = React.createRef();
    this.state = {
      DownloadType: false,
      DownloadMessageval: undefined,
      donwloading: false,
    }
  }
  initWorkDetailCommonState = (data) => {
    this.setState({
      ...data
    })
  }
  goback = () => {
    let workId = this.props.match.params.workId;
    if (window.location.pathname.indexOf('appraise') == -1) {
      let category_id = this.state.category.category_id;
      let category = this.state.category;

      let secondName = "";
      if (window.location.pathname.indexOf('group_homework') > -1) {
        secondName = category.main === 1 ? 'group_homeworks' : "group_homework";
        this.props.toListPage(this.props.match.params, category_id, secondName);
      }

      if (window.location.pathname.indexOf('common_homework') > -1) {
        secondName = category.main === 1 ? 'common_homeworks' : "common_homework";
        this.props.toListPage(this.props.match.params, category_id, secondName);
      }

    } else {
      this.props.toWorkListPage(this.props.match.params, workId);
    }
    // this.props.history.goBack()
  }

  // 补交附件
  Cancelvisible = () => {
    this.setState({
      accessoryVisible: false
    })
  }

  addAccessory = () => {
    this.setState({
      accessoryVisible: true
    })
  }
  setupdate = () => {

  }
  doWhenSuccess = () => {
    trigger('commonwork_fetch_all')
  }

  /// 确认是否下载
  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.slowDownload(getRandomcode(url))

        // this.props.showNotification(`正在下载中`);
        // this.setState({ donwloading: true })
        // downloadFile({
        //   url: url,
        //   successCallback: (url) => {
        //     this.setState({ donwloading: false })
        //     console.log('successCallback')
        //   },
        //   failCallback: (responseHtml, url) => {
        //     this.setState({ donwloading: false })
        //     console.log('failCallback')
        //   }
        // })
        // window.open("/api"+url, '_blank');
      }
    }).catch((error) => {
      console.log(error)
    });
  }

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

  // 关联项目
  openConnectionProject = (work) => {
    this.refs['connectProject'].openConnectionProject(work)
  }
  connectSuccess = () => {
    this.child.fetchData && this.child.fetchData()
  }

  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) {
        this.child.fetchData && this.child.fetchData()

        this.props.showNotification('取消关联成功')
      }
    }).catch((error) => {
      console.log(error)
    })
  }
  // 关联项目 END

  render() {
    let { course_name, homework_name, homework_status, noTab
      , view_answer, author_name, category, work_id

      , end_immediately, publish_immediately, work_statuses, accessoryVisible
    } = this.state;
    const { current_user } = this.props

    let courseId = this.props.match.params.coursesId;
    let category_id = category && category.category_id;
    let category_name = category && category.category_name;

    let workId = this.props.match.params.workId;
    const studentWorkId = this.props.match.params.studentWorkId

    const isGroup = this.props.isGroup()
    const moduleName = !isGroup ? "普通作业" : "分组作业";
    const moduleEngName = this.props.getModuleName()

    const childModuleName = this.state.moduleName
    const commonHandler = {
      initWorkDetailCommonState: this.initWorkDetailCommonState,
      triggerRef: this.bindRef
    }
    const isAdmin = this.props.isAdmin()


    let exportParams = {}
    const isListModule = childModuleName == '作品列表';
    // 是列表页
    let params = {}
    if (isListModule) {
      // TODO
      if (this.child && this.child._getRequestParams) {
        params = this.child._getRequestParams() !== undefined ? this.child._getRequestParams() : {};
      }
    }
    // console.log("普通作业176176176");
    // console.log(params);
    let exportUrl = `/homework_commons/${workId}/works_list.zip?${queryString.stringify(params)}`
    let exportResultUrl = `/homework_commons/${workId}/works_list.xlsx?${queryString.stringify(params)}`
    document.title = course_name === undefined ? "" : course_name;

    console.log(category_id)
    return (
      <div>
        <PublishRightnow ref={this.publishModal} showActionButton={false} {...this.props} checkBoxValues={[workId]}
          isPublish={true} doWhenSuccess={this.doWhenSuccess} checkBeforePost={this.saveWorkSetting}
          onToPublishClick={this.onToPublishClick}
        ></PublishRightnow>
        <DownloadMessageysl
          {...this.props}
          value={this.state.DownloadMessageval}
          modalCancel={this.Downloadcal}
          modalsType={this.state.DownloadType}
        />
        <PublishRightnow ref={this.endModal} showActionButton={false} {...this.props} checkBoxValues={[workId]}
          isPublish={false} doWhenSuccess={this.doWhenSuccess}></PublishRightnow>


        <div className="newMain clearfix worklist1">
          <div className={"educontent mt20"}>
            <style>{`
                .memoContent {
                  background: #fff;
                }
              `}</style>
            {current_user && <CBreadcrumb items={[
              { to: current_user && current_user.first_category_url, name: course_name },
              { to: `/classrooms/${courseId}/${moduleEngName}/${category_id}`, name: category_name },
              window.location.pathname.indexOf('appraise') == -1 ? {} : { to: `/classrooms/${courseId}/${moduleEngName}/${workId}/list`, name: '作业详情' },
              // 1.	与上一条联动，当匿评他人作品时，TA人作品的作者真实姓名切换为“匿名”
              window.location.pathname.indexOf('appraise') == -1 ? { name: '作业详情' } : { name: author_name },
              // window.location.pathname.indexOf('appraise') == -1 ? { } : { to: `/courses/${courseId}/${moduleEngName}/${workId}/list`, name: '作品列表' },
              // { name: childModuleName }
            ]}></CBreadcrumb>}

            <div style={{ width: '100%', height: '52px' }} >
              <span className=" fl color-black summaryname" title={`${homework_name && homework_name.length > 36 ? homework_name : ''}`}
                style={{ height: 'auto' }}
              >
                {homework_name}
                {/* <Link to={"/courses/"+courseId+"/graduation"+"/graduation_tasks/"}>{homework_name}</Link> */}
              </span>
              <CoursesListType
                typelist={homework_status}
                typesylename={"mt12"}
              />


              {category && <a className="color-grey-6 fr font-16 ml30 mt5 mr20" onClick={this.goback} style={{ marginRight: '26px' }}>返回</a>}

              {this.state.update_atta &&
                <React.Fragment>
                  {this.state.accessoryVisible === true ? <AccessoryModal
                    {...this.props}
                    modalname={"补交附件"}
                    visible={this.state.accessoryVisible}
                    Cancelname={"取消"}
                    Savesname={"确认"}
                    Cancel={this.Cancelvisible}
                    setupdate={this.setupdate}
                    seeworks={undefined}
                    reviseAttachmentUrl={`/student_works/${work_id || studentWorkId}/revise_attachment.json`}
                  /> : ""}
                  <a className={"fr color-blue font-16 "} href={"javascript:void(0)"}
                    onClick={this.addAccessory} style={{ 'marginTop': '-4px' }}
                  >补交附件</a>
                </React.Fragment>

              }
            </div>

            {noTab !== true && <div className="stud-class-set bor-bottom-greyE floatSpinParent">
              <div className="mt10 clearfix edu-back-white poll_list pl5">
                <Link
                  onClick={() => this.setState({ moduleName: '作品列表' })}
                  className={`${isListModule ? 'active' : ''} `}
                  to={`/classrooms/${courseId}/${moduleEngName}/${workId}/list`}>作品列表</Link>
                <Link
                  onClick={() => this.setState({ moduleName: '作业描述' })}
                  className={`${childModuleName == '作业描述' ? 'active' : ''} `}
                  to={`/classrooms/${courseId}/${moduleEngName}/${workId}/question`}>作业描述</Link>
                {view_answer == true && <Link
                  onClick={() => this.setState({ moduleName: '参考答案' })}
                  className={`${childModuleName == '参考答案' ? 'active' : ''} `}
                  to={`/classrooms/${courseId}/${moduleEngName}/${workId}/answer`}>参考答案</Link>}
                <Link
                  onClick={() => this.setState({ moduleName: '设置' })}
                  className={`${childModuleName == '设置' ? 'active' : ''} `}
                  style={{ paddingLeft: this.props.isAdmin() ? '38px' : '20px' }}
                  to={`/classrooms/${courseId}/${moduleEngName}/${workId}/setting`}>{this.props.isAdmin() ? "设置" : "得分规则"}</Link>


                {/* { this.props.tabRightComponents }  */}
                <React.Fragment>
                  <style>{`
                        .drop_down_menu li a {
                            padding: 0px;
                            font-size: 14px;
                        }
                        .drop_down_menu {
                            width: 121px;
                        }
                        .drop_down_menu li {
                            overflow: visible;
                            width: 121px;
                        }
                        .drop_down_menu, .drop_down_normal {
                            padding-top: 10px;
                            padding-bottom: 8px;
                        }

                        .floatSpinParent .ant-spin-nested-loading {
                          float: right;
                        }
                        `}</style>
                  {this.props.isAdmin() ? <Spin spinning={this.state.donwloading} style={{}}>
                    <li className="li_line drop_down fr color-blue font-16 mt20" style={{ "padding": "0 20px" }}>
                      导出<i className="iconfont icon-xiajiantou font-12 ml2"></i>
                      <ul className="drop_down_menu" style={{ "right": "-34px", "left": "unset", "height": "auto" }}>
                        <li>

                          <a href={"javascript:void(0)"} className="color-dark"
                            onClick={() => this.confirmysl(exportResultUrl)}
                          >导出成绩</a>

                        </li>
                        <li>
                          <a href={"javascript:void(0)"} className="color-dark"
                            onClick={() => this.confirmysl(exportUrl)}
                          >导出作品附件</a>
                        </li>
                      </ul>
                    </li>
                  </Spin> : ""}

                  {/* {isAdmin && <a className={"fr color-blue font-16"} href={exportUrl}>导出作品附件</a>}
                        {isAdmin && <a className={"fr color-blue font-16"} href={exportResultUrl}>导出成绩</a>} */}
                  {/*<a className={"fr color-blue font-16"}>导出</a>*/}
                  {end_immediately && <a className={"fr color-blue font-16"} onClick={() => { this.endModal.current.open() }}>立即截止</a>}
                  {publish_immediately && <a className={"fr color-blue font-16"} onClick={() => { this.publishModal.current.open() }} >立即发布</a>}

                  {/*<a className={"fr color-blue font-16"}>项目在线质量检测</a>*/}
                  {isAdmin && <a className={"fr color-blue font-16"} onClick={() => this.props.toEditPage(this.props.match.params, workId)}>编辑作业</a>}

                  { //
                    work_statuses && work_statuses.indexOf('关联项目') != -1 &&
                    <React.Fragment>
                      <ConnectProject ref="connectProject" {...this.props} connectSuccess={this.connectSuccess}></ConnectProject>
                      <WordsBtn style="blue" className={` font-16 fr`} onClick={() => this.openConnectionProject({ homework_id: workId })}>关联项目</WordsBtn>
                      <WordsBtn style="blue" className={` font-16 fr`} onClick={() => this.props.toCreateProject()}>创建项目</WordsBtn>
                    </React.Fragment>
                  }

                  { //
                    work_statuses && work_statuses.indexOf('取消关联') != -1 &&
                    <WordsBtn style="blue" className={` font-16 fr`} onClick={() => this.cancelConnectionProject({ homework_id: workId })}>取消关联</WordsBtn>
                  }

                  {work_statuses && work_statuses.indexOf('提交作品') != -1 && <a className={"fr color-blue font-16"} href={"javascript:void(0)"}
                    onClick={() => { this.props.toWorkPostPage(this.props.match.params) }}
                  >提交作品</a>}

                  {work_statuses && work_statuses.indexOf('补交作品') != -1 &&
                    <a className={"fr color-blue font-16"} href={"javascript:void(0)"}
                      onClick={() => { this.props.toWorkPostPage(this.props.match.params) }}>
                      补交作品</a>}

                  {work_statuses && work_statuses.indexOf('修改作品') != -1 && <a className={"fr color-blue font-16"} href={"javascript:void(0)"}
                    onClick={() => { this.props.toWorkPostPage(this.props.match.params, null, true, work_id) }}
                  >修改作品</a>}
                  {work_statuses && work_statuses.indexOf('补交附件') != -1 &&
                    <React.Fragment>
                      <AccessoryModal
                        {...this.props}
                        modalname={"补交附件"}
                        visible={accessoryVisible}
                        Cancelname={"取消"}
                        Savesname={"确认"}
                        Cancel={this.Cancelvisible}
                        setupdate={this.setupdate}
                        reviseAttachmentUrl={`/student_works/${work_id}/revise_attachment.json`}
                      />
                      <a className={"fr color-blue font-16"} href={"javascript:void(0)"}
                        onClick={this.addAccessory}
                      >补交附件</a>
                    </React.Fragment>

                  }
                </React.Fragment>

              </div>
            </div>}

            {/* 内容区 */}
            <Switch {...this.props}>

              {/* --------------------------------------------------------------------- */}

              {/* 作业设置 */}
              {/* http://localhost:3007/classrooms/1309/homework/9300/setting */}
              <Route exact path="/classrooms/:coursesId/common_homeworks/:workId/setting"
                render={
                  (props) => (<CommonWorkSetting {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>

              <Route exact path="/classrooms/:coursesId/common_homework/:workId/setting"
                render={
                  (props) => (<CommonWorkSetting {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>

              {/* 作品列表 */}
              <Route exact path="/classrooms/:coursesId/common_homeworks/:workId/list"
                render={
                  (props) => (<CommonWorkList ref="commonWorkList" triggerRef={this.bindRef} {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>

              {/* 作品列表 */}
              <Route exact path="/classrooms/:coursesId/common_homework/:workId/list"
                render={
                  (props) => (<CommonWorkList ref="commonWorkList" triggerRef={this.bindRef} {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>

              {/* 作业问答 */}
              <Route exact path="/classrooms/:coursesId/common_homeworks/:workId/question"
                render={
                  (props) => (<CommonWorkQuestion {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>
              <Route exact path="/classrooms/:coursesId/common_homework/:workId/question"
                render={
                  (props) => (<CommonWorkQuestion {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>

              <Route exact path="/classrooms/:coursesId/common_homeworks/:workId/answer"
                render={
                  (props) => (<CommonWorkAnswer {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>
              <Route exact path="/classrooms/:coursesId/common_homework/:workId/answer"
                render={
                  (props) => (<CommonWorkAnswer {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>


              <Route exact path="/classrooms/:coursesId/group_homeworks/:workId/setting"
                render={
                  (props) => (<CommonWorkSetting {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>
              <Route exact path="/classrooms/:coursesId/group_homework/:workId/setting"
                render={
                  (props) => (<CommonWorkSetting {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>
              {/* 作品列表 */}
              <Route exact path="/classrooms/:coursesId/group_homeworks/:workId/list"
                render={
                  (props) => (<CommonWorkList triggerRef={this.bindRef} {...this.props} {...props} {...this.state}  {...commonHandler} />)
                }
              ></Route>
              <Route exact path="/classrooms/:coursesId/group_homework/:workId/list"
                render={
                  (props) => (<CommonWorkList triggerRef={this.bindRef} {...this.props} {...props} {...this.state}  {...commonHandler} />)
                }
              ></Route>
              {/* 作业问答 */}
              <Route exact path="/classrooms/:coursesId/group_homeworks/:workId/question"
                render={
                  (props) => (<CommonWorkQuestion {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>
              <Route exact path="/classrooms/:coursesId/group_homework/:workId/question"
                render={
                  (props) => (<CommonWorkQuestion {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>
              <Route exact path="/classrooms/:coursesId/group_homeworks/:workId/answer"
                render={
                  (props) => (<CommonWorkAnswer {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>
              <Route exact path="/classrooms/:coursesId/group_homework/:workId/answer"
                render={
                  (props) => (<CommonWorkAnswer {...this.props} {...props} {...this.state} {...commonHandler} />)
                }
              ></Route>
            </Switch>
          </div>
        </div>
      </div>

    )
  }
}

export default (CommonWorkDetailIndex);
