import React,{ Component } from "react";
import { WordsBtn,on, trigger ,publicSearchs} from 'educoder';

import { Menu, Spin } from 'antd';

import axios from 'axios';
import Videos from './Video';
import Lives from './Live';
import LivesNew from './LiveNew';
import VideoLink from './VideoLink';

import './video.css';
import '../css/Courses.css';
import '../publicNav/nav.css';
const PAGE_SIZE = 15;
const LIVE_PAGE_SIZE = 10;
const $ = window.$;

function getRight(){
  var right = parseInt($(".-task-sidebar").css("right"));
  return right===0?0:right;
}
class VideoIndex extends Component{
  constructor(props){
    super(props);
    this.state={
      page:1,
      upload:false,
      videos:undefined,
      videoData:undefined,
      otherLinkVisible:false,
      type:"video",
      isSpining:false,

      lives:undefined,
      liveData:undefined,

      liveId:undefined,

      liveVisible:false

    }
  }

  checkType=(type,page)=>{
    this.setState({
      type,
      isSpining:true
    })
    if(type === "video"){
      this.getList(page);
    }else{
      this.getLiveList(page);
    }
  }

  componentDidMount=()=>{
    const { search } = this.props.location;
    const { page } = this.state;
    if(search && search === "?open=live"){
      this.setState({
        type:"live"
      })
      this.checkType("live",page);
    }else{
      if(search === "?open=new"){
        this.setState({
          upload:true
        })
      }
      this.checkType("video",page);
    }
  }
  componentDidUpdate = (prevProps) => {
    if(this.props.match.params.videoId !== prevProps.match.params.videoId ){
      this.setState({
        upload:false
      })
      const { page } = this.state;
      this.checkType("video",page);
    }
  }
  // 获取直播列表
  getLiveList=(page)=>{
    const CourseId=this.props.match.params.coursesId;
    const url = `/courses/${CourseId}/live_links.json`;
    axios.get(url,{
      params:{
        page,
        limit:LIVE_PAGE_SIZE
      }
    }).then(result=>{
      if(result){
        this.setState({
          liveData:result.data,
          lives:result.data.lives,
          isSpining:false,
        })
      }
    }).catch(error=>{
      console.log(error);
    })
  }
  
  // 获取视频列表
  getList=(page)=>{
    const { coursesId , videoId }=this.props.match.params;
    const fetchUrl = `/courses/${coursesId}/course_videos.json`;
    axios.get(fetchUrl, {
      params: {
        page,
        limit: PAGE_SIZE,
        category_id:videoId
      }
    })
    .then((response) => {
      if(response){
        this.setState({
          videos:response.data.videos,
          videoData:response.data,
          isSpining:false
        })
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  changeType=(e)=>{
    this.setState({
      type:e.key,
      upload:false,
      page:1
    })
    this.checkType(e.key,1);
  } 

  changePage=(page,type)=>{
    this.setState({
      page
    })
    this.checkType(type,page);
  }

  onEditVideo=(item)=>{
    let videoId = {
      videoId: item.id,
      title: item.title
    }
    this.setState({
      videoId,
    })
    this.setVisible(true);
  }
  uploadVideo=(upload)=>{
    
    this.setState({
      upload,
      isSpining:true
    })
    const { page } = this.state;
    setTimeout(()=>{
      this.getList(page);
    },500)
  }

  toUpload =()=> {
    const { admin , is_teacher,business} = this.props.user;
    if (admin || business || (is_teacher && this.props.checkIfProfessionalCertification())) {
      this.setState({
        type:"video",
        upload:true,
        page:1
      })
    } else {
      this.props.showProfessionalCertificationDialog();
    }
  }

  // 直播设置后回调的方法
  // successFunc=()=>{
  //   this.setState({
  //     type:"live",
  //     page:1
  //   })
  //   this.checkType("live",1);
  // }
  // 直播设置
  liveSetting=()=>{
    this.setState({
      liveId:undefined
    })
    this.setliveVisibel(true);
  }
  //直播设置弹框
  setliveVisibel=(flag,changetypeFlag)=>{
    this.setState({
      liveVisible:flag
    })
    if(flag === false){
      this.setState({
        liveId:undefined
      })
    }
    if(changetypeFlag){
      this.checkType("live",1);
    }
  }
  // 列表-编辑（修改传到编辑的id）
  setLiveId=(id)=>{
    this.setState({
      liveId:id
    })
    this.setliveVisibel(true);
  }

  // 新增目录
  addDir=()=>{
    let {videoData}=this.state;
    trigger('videoAdd', parseInt(videoData.course_module_id));
  }
  // 目录重命名
  editDir=(name,id)=>{
    let data={id,name,update:this.getList}
    trigger('editVideo',data);
  }
  // 增加外链
  setLinkeVisible=(flag,refresh)=>{
    this.setState({
      otherLinkVisible:flag
    })
    if(refresh){
      const { page } = this.state;
      this.getList(page);
    }
  }
  render(){
    const { videos , upload , videoData , type , liveData , lives , page , liveVisible , isSpining , liveId , otherLinkVisible } = this.state;
    const { admin , is_teacher , business } = this.props.user;
    const { coursesId , videoId }=this.props.match.params;

    const {course_identity} = this.props.coursedata;
    const flag = parseInt(course_identity) < 4;
    console.log(flag);
    const newOperation = flag;
    const new_upload = flag || admin || is_teacher;
    // console.log("p",this.props);
    return(
      <React.Fragment>
        <VideoLink
          coursesId={coursesId}
          videoId={videoId}
          visible={otherLinkVisible}
          notification={this.props.showNotification}
          setVisible={this.setLinkeVisible}
        ></VideoLink>
        <LivesNew 
          visible={liveVisible} 
          liveId={liveId}
          setliveVisibel={this.setliveVisibel} 
          {...this.props} 
          {...this.state}
        ></LivesNew>
        {
          liveVisible ?
          <style>{
          `
          body{
            width: calc(100% - 7px)!important;
            overflow: hidden!important;
          }
          .-task-sidebar{
            right:${getRight()+7}px!important;
          }
          `}</style>:
          <style>{
            `
            body{
              width: 100%!important;
            }
            `}</style>
        }
        <div className="edu-back-white" style={{marginBottom:"1px"}}>

          <div className="clearfix pl30 pr30 menuDiv">
            {
              videoData && videoData.category_name && type === "video" ?
              <span className="font-18 fl color-dark-21 mt20 mb20">{videoData.category_name}</span>
              :
              <div className="task_menu_ul fl mt2" style={{width:"400px"}}>
                <Menu mode="horizontal" selectedKeys={[type]} onClick={this.changeType}>
                  <Menu.Item key="video">视频</Menu.Item>
                  <Menu.Item key="live">直播</Menu.Item>
                </Menu>
              </div>
            }
            <li className="fr mt20 mb20">
              {
                type === "video" ?
                  <React.Fragment>
                    {
                      newOperation ?
                      <span>
                      {
                        videoId ?
                        <WordsBtn style="blue" onClick={()=>this.editDir(videoData && videoData.category_name,videoId)} className={"mr30 font-16"}>目录重命名</WordsBtn>
                        :
                        <WordsBtn style="blue" className="mr30 font-16" onClick={this.addDir}>新建目录</WordsBtn>
                      }
                      <WordsBtn style="blue" className="mr30 font-16" onClick={()=>this.setLinkeVisible(true)}>增加外链</WordsBtn>
                      </span>:""
                    }
                    {
                      new_upload ?
                      <span>
                        {
                          upload ?
                          <WordsBtn style="grey" className="font-16" onClick={()=>this.uploadVideo(false)}>取消</WordsBtn>
                          :
                          <WordsBtn style="blue" className="font-16" onClick={this.toUpload}>上传视频</WordsBtn>
                        }
                      </span>:""
                    }
                  </React.Fragment>
                :
                <WordsBtn style="blue" className="font-16 ml30" onClick={this.liveSetting}>添加直播</WordsBtn>
              }
            </li>
          </div>
        </div>
        <Spin spinning={isSpining}>
        {
          type === "video" ? 
            <Videos 
              upload={upload} 
              videos={videos} 
              page={page}
              data={videoData}
              pageSize={PAGE_SIZE}
              uploadVideo={this.uploadVideo}
              listFunc={this.getList}
              changePage={this.changePage}
              {...this.props} 
              {...this.state}
            ></Videos>
            :
            <Lives
              lives={lives}
              liveData={liveData}
              page={page}
              pageSize={LIVE_PAGE_SIZE}
              successFunc={this.getLiveList}
              changePage={this.changePage}
              setLiveId={this.setLiveId}
              {...this.props}
              {...this.state}
            ></Lives>
        }
        </Spin>
      </React.Fragment>
    )
  }
}
export default VideoIndex;