import React, {useEffect, useState} from 'react';
import { WhiteBack } from '../Component/layout';
import './ops.scss';
import devops from '../Images/devops.png';
import { Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import Loading from '../../Loading';
import axios from 'axios';

const About = Loadable({
  loader: () => import('./subIndex'),
  loading: Loading,
})
const New = Loadable({
  loader: () => import('./disposePipeline'),
  loading: Loading,
})
const Dispose = Loadable({
  loader: () => import('./Dispose'),
  loading: Loading,
})
const Stucture = Loadable({
  loader: () => import('./Structure'),
  loading: Loading,
})
const Mould = Loadable({
  loader: () => import('./Mould'),
  loading: Loading,
})
const Params = Loadable({
  loader: () => import('./Manage/Params'),
  loading: Loading,
})

export default ((props)=>{
  const {isManager, project, projectDetail} = props;
  const { projectsId, owner } = props.match.params;
  const [jianmu_devops, setJianmu_devops] = useState(undefined);

  useEffect(()=>{
    if(projectDetail){
      const { author, name} = projectDetail;
      document.title = `引擎-${author.name}/${name}`;
    }
  }, [projectDetail])

  useEffect(()=>{
    // 请求simple接口获取jianmu_devops
    const url = `/${owner}/${projectsId}/simple.json`;
    axios.get(url).then((result) => {
      if (result && result.data) {
        result.data.jianmu_devops && setJianmu_devops(encodeURIComponent(result.data.jianmu_devops));
      }
    })
  }, [])

  useEffect(() => {
    window.addEventListener("message", iframeHeight, false);
    return () => {
      window.removeEventListener("message", iframeHeight, false);
    }
  })


  function iframeHeight(e){
    if (e && e.data && typeof(e.data) === "string") {
      let myHeight = JSON.parse(e.data);
      if (document.querySelector("#devopsIframe")) {
        document.querySelector("#devopsIframe").height = myHeight.height;
      }
    }
  }

  function iframeLoad() {
    try {
      let myIframe = document.getElementById("devopsIframe");
      if (myIframe.contentDocument) {
        myIframe.height = myIframe.contentDocument.querySelector('.el-main').clientHeight + 260;
      }
    } catch (err) {
      console.error(err);
    }
  }

  return(
    <WhiteBack className={`opsPanel ${isManager ? 'main' : ''}`}>
      {/* 嵌入devops */}
      {jianmu_devops && project && isManager && <iframe title={`devopsIframe`} src={`${project.jianmu_devops_url}/oauth2/authorize?code=${jianmu_devops}`} id={`devopsIframe`} frameBorder="0" name={`devopsIframe`} width="100%" onLoad={iframeLoad} height={'auto'}></iframe>}
      {!isManager && <div className='nullJurisdictionBox'>
        <div className='jurTil font-16'>引擎配置</div>
        <div className='jurCont mt25'>
          <img src={devops} alt="" width={110}/>
          <div className='font-18 mt30'>暂无权限，仅仓库管理员可访问</div>
        </div>
      </div>}
      {/* 旧引擎页面 */}
      {/* <Switch {...props}>
        <Route path="/:owner/:projectsId/devops/params"
          render={
            (p) => (<Params {...props} {...p}/>)
          }
        ></Route>
        <Route path="/:owner/:projectsId/devops/mould"
          render={
            (p) => (<Mould {...props} {...p}/>)
          }
        ></Route>
        <Route path="/:owner/:projectsId/devops/new"
          render={
            (p) => (<New {...props} {...p}/>)
          }
        ></Route>
        <Route path="/:owner/:projectsId/devops/list/:branch"
          render={
            (p) => (<Stucture {...props} {...p}/>)
          }
        ></Route>
        <Route path="/:owner/:projectsId/devops/:disposeId"
          render={
            (p) => (<New {...props} {...p}/>)
          }
        ></Route>
        // 原本的两种合为一个
        <Route path="/:owner/:projectsId/devops"
          render={
            // (p) =>{return( p.location && p.location.state && p.location.state.open_devops?<Dispose {...props} {...p}/>:<About {...props} {...p}/>)}
            (p) =>{return(<About {...props} {...p}/>)}
          }
        ></Route>
      </Switch> */}
    </WhiteBack>
  )
})