/*
 * Create:      柿子
 * CreateDate:  2022/12/08
 * Describe：   界面加载
 * */
import React, { Component } from 'react';
import { Modal, Empty } from 'antd';
import asyncComponent from 'routers/AsyncComponent.js';

class InterfaceLoading extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      componentPath: '', // 组件路径
      componentName: '', // 组件名
      componentParams: '', // 组件参数
      otherObj: {}, // 介绍
    }
  }

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
  }

  // 修改弹窗状态
  modifyVisible = (visible, componentPath, componentName, componentParams, otherObj = {}) => {
    this.setState({ visible, componentPath, componentName, componentParams, otherObj }, () => {
      if (!(this.state.visible)) { // 清除当前查看界面的session
        this.props.clearSessionData && this.props.clearSessionData();
      }
    });
  }

  render() {
    const { visible, componentPath, componentName, componentParams, otherObj } = this.state;
    let DynamicComponent = componentPath && asyncComponent(() => import('./../../../' + componentPath));
    const introduceDesc = otherObj?.introduceDesc || '';
    return (
      <Modal
        title={(
          <div>
            {componentName || '查看界面轮廓'}
            <span style={{ display: introduceDesc ? 'inline-block' : 'none', fontSize: '12px', marginLeft: '4px' }}>【{introduceDesc}】</span>
          </div>
        )}
        style={{ top: '56px' }}
        bodyStyle={{ padding: 12 }}
        width={componentPath ? '94vw' : '800px'}
        footer={null}
        visible={visible}
        destroyOnClose={true}
        onCancel={() => this.modifyVisible(false)}
      >
        {componentPath ? (
          <div style={{ height: '80vh', overflow: 'auto', position: 'relative' }}>
            <DynamicComponent paras={{ params: componentParams }} />
            <div style={{ position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, margin: '0 auto', zIndex: '1002', cursor: 'no-drop' }}></div>
          </div>
        ) : (
          <div className="flex-center" style={{ padding: '100px 0' }}>
            <Empty description="暂无组件信息" />
          </div>
        )}
      </Modal>
    )
  }
};

export default InterfaceLoading;