<template>
<div className={`play ${this.state.sidebar ? '' : 'sidebar-hide'}`}>
  <div className="left-content">
      <div className="play-top cl" style={this.state.sidebar ? {} : {marginRight: 0}}>
          <Link className="play-back" to={`/courses/${params.semesterId}/${params.courseId}/cont`} onClick={this.onClickToDetail}>&lt;</Link>
          <p>{course.course_name}</p>
          <p>{chapter.chapter_name}</p>
      </div>
      <div className="play-content">
          {params.chapterId === 'work' ?
              <CourseWork
                  course={course}
                  semesterId={course.semester_id}
                  course_work={this.props.course_work}
                  dispatch={this.props.dispatch}
                  action={this.props.action}
                  handleSubmited={this.chapterSubmited}
              />
              : params.chapterId === 'info' ?
              <CourseInfo
                  courseId={params.courseId}
                  files={course.files}
              />
              : chapter.type === chapterType.VIDEO ?
              <ChapterVideo
                  ref="chapterVideo"
                  courseId={params.courseId}
                  semesterId={course.semester_id}
                  ppts={ppts}
                  chapter={chapter}
                  username={user.data && user.data.username || ''}
                  prevChapterId={prevChapterId}
                  nextChapterId={nextChapterId}
                  curProgress={curProgress}
                  handlePlayTime={this.handlePlayTime}
                  handleOver={this.handleOver}
                  lastTime={cpt}
              />
              : chapter.type === chapterType.WORKOREXAM ?
              (chapter.homework && chapter.homework.work_type === chapterType.WORK_HOME ?
                  <ChapterWork
                      chapter={chapter}
                      chapter_work={this.props.chapter_work}
                      courseId={params.courseId}
                      semesterId={course.semester_id}
                      action={this.props.action}
                      dispatch={this.props.dispatch}
                      handleSubmited={this.chapterSubmited}
                  />
                  :
                  <ChapterExam
                      chapter={chapter}
                      chapter_work={this.props.chapter_work}
                      courseId={params.courseId}
                      semesterId={course.semester_id}
                      action={this.props.action}
                      dispatch={this.props.dispatch}
                      handleSubmited={this.chapterSubmited}
                  />
              )
              :
              <ChapterRead
                  chapter={chapter}
                  handleReaded={this.sendReaded}
              />
          }
      </div>
  </div>
  <div className="right-content" style={{ right: this.state.sidebar ? 0 : -388 }}>
      <p className="right-arrow" onClick={this.handleHideSidebar}><span>&gt;</span></p>
      <div className="control-panel">
          <ul className="nav-tabs play-nav cl">
              <li className={`videoChapter ${this.state.sidebar === SIDEBAR_CHAPTER ? 'current' : ''}`}><a href="#sidebar_chapter" onClick={this.handleShowSidebarChapter}>章节</a></li>
              {ppts.length ?
                  <li className={`videoJy ${this.state.sidebar === SIDEBAR_PPT ? 'current' : ''}`}><a href="#sidebar_ppt" onClick={this.handleShowSidebarPpt}>讲义</a></li>
                  : null
              }
          </ul>
          <div className="tab-content">
              {this.state.sidebar === SIDEBAR_CHAPTER ?
                  <SideList
                      chapters={chapters}
                      getProgressByChapterId={this.getProgress}
                      courseId={params.courseId}
                      semesterId={params.semesterId}
                      chapterId={params.chapterId}
                      progress={curProgress}
                      handleClickItem={IS_PHONE ? this.handleHideSidebar1 : this.reloadPages}
                  />
                  :
                  <SidePpt
                      ref="sidePpt"
                      ppts={ppts}
                      handleClickPpt={this.handleClickSidePpt}
                  />
              }
          </div>
      </div>
  </div>
  {this.state.sidebar ? null :
      <div className="switch">
          <a href="#sidebar_chapter" className="switch-chapter" onClick={this.handleShowSidebarChapter}></a>
          {isVideo && ppts.length ?
              <a href="#sidebar_ppt" className="switch-handout" onClick={this.handleShowSidebarPpt}></a>
              : null
          }
      </div>
  }
</div>
</template>

<style lang="scss" scoped>
  @import './index.css';
</style>
