/*
 * @Description: 
 * @Author: tangjiang
 * @Github: 
 * @Date: 2019-12-12 15:04:20
 * @LastEditors: tangjiang
 * @LastEditTime: 2019-12-13 11:25:22
 */
import './index.scss';
import React, { useEffect, useState } from 'react';
import { Spin, Button } from 'antd';
function RightPane (props) {
  const { 
    status,
    url,
    onReloadUrl,
    onSave,
    loading
  } = props;

  const [renderCtx, setRenderCtx] = useState(() => loadInit);
  // 重新获取 url
  const handleClickReload = () => {
    onReloadUrl && onReloadUrl();
  }

  const loadInit = (
    <div className="jupyter_loading_init">
        <Spin tip="加载中..."></Spin>
      </div>
  );

  const loadError = (
    <div className="jupyter_load_url_error">
      <span className="iconfont icon-jiazaishibai1 icon-error"></span>
      <p className="jupyter_error_txt">
        实训加载失败，
        <span 
          className="jupyter_reload"
          onClick={handleClickReload}
        >重新加载</span>
      </p>
    </div>
  );

  // 保存
  const handleClickSubmit = () => {
    console.log('调用了保存接口....');
    onSave && onSave();
  }

  useEffect(() => {
    if (status === -1) {
      setRenderCtx(() => loadInit);
    } else if (status === 0 && url) {
      setRenderCtx(() => (

        <div className="jupyter_result">
          <div className="jupyter_iframe">
            <iframe 
              title=" "
              width="100%"
              height="100%"
              src={url}
              className='jupyter_iframe_style'
            ></iframe>
          </div>
          <div className="jupyter_submit">
            <Button
              loading={loading}
              type="primary"
              onClick={handleClickSubmit}
            >保存</Button>
          </div>
        </div>
        
      ));
    } else {
      setRenderCtx(() => loadError);
    }
  }, [status, url, loading]);
  
  return (
    <div className="jupyter_right_pane_area">
      { renderCtx }
    </div>
  )
}

export default RightPane;