import React,{ Component } from "react";
import { Radio , Modal } from 'antd';
import './video.css';
import axios from 'axios';
class MoveBox extends Component{
  constructor(props){
    super(props);
    this.state={
      data:undefined,
      selectSubId:undefined
    }
  }

  componentDidUpdate=(prevProps)=>{
    if(this.props.id && this.props.visible && this.props.id !== prevProps.id){
      this.getSubList(this.props.mainId);
    }
  }

  getSubList=(id)=>{
    const url = `/course_modules/${id}.json`;
    axios.get(url).then(result=>{
      if(result){
        let list = result.data.course_module && result.data.course_module.course_second_categories;
        let defaultId = list.length>0 ? list[0].id : undefined;
        this.setState({
          data:result.data.course_module,
          selectSubId:defaultId
        })
      }
    }).catch(error=>{
      console.log(error);
    })
  }
  cancelMove=()=>{
    const { setMoveVisible } = this.props;
    setMoveVisible && setMoveVisible(false);
  }

  // 选择子目录
  selectSub=(e)=>{
    this.setState({
      selectSubId:e.target.value
    })
  }

  handleSubmit=()=>{
    const CourseId = this.props.match.params.coursesId;
    const { id } = this.props;
    const { selectSubId } = this.state;
    const url =  `/courses/${CourseId}/move_to_category.json`;
    axios.post(url,{
      video_ids:[id],
      new_category_id:selectSubId
    }).then(result=>{

      if(result){

        const { setMoveVisible , successFunc , updataleftNavfun} = this.props;
        updataleftNavfun && updataleftNavfun();
        setMoveVisible && setMoveVisible(false);
        successFunc && successFunc();

	      try {
					this.props.showNotification(result.data.message);
				}catch (e) {

				}

			}
    }).catch(error=>{
      console.log(error);
    })
  }

  render(){
    const { visible , id } = this.props;
    const { data , selectSubId } = this.state;

    let list = data && data.course_second_categories && data.course_second_categories.length>0?data.course_second_categories:undefined;

    return(
      <Modal
        visible={visible}
        width="560px"
        title={'移动到'}
        footer={null}
        closable={false}
      >
        <div>
          <style>
            {
              `
                .ant-radio-group.ant-radio-group-outline{
                  display: flex;
                  flex-direction: column;
                }
                .ant-radio-wrapper{
                  margin-bottom:5px;
                  display:flex;
                }
                .ant-radio{
                  margin-top:2px;
                }
                .ant-radio-group.ant-radio-group-outline span:last-child{
                  max-height: 450px;
                  display: block;
                  flex: 1;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;

                }
              `
            }
          </style>
          <Radio.Group onChange={this.selectSub} value={selectSubId}>
            {
              list && list.map((item,key)=>{
                return(
                  <Radio value={item.id} key={item.id}>
                    {item.name}
                  </Radio>
                )
              })
            }
          </Radio.Group>
          <div className="clearfix mt30 edu-txt-center">
            <a onClick={this.cancelMove} className="task-btn mr30">取消</a>
            <a type="submit" onClick={this.handleSubmit} className="task-btn task-btn-orange">确定</a>
          </div>
        </div>
      </Modal>
    )
  }
}
export default MoveBox;