import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
// import '@ant-design/compatible/assets/index.css';
import { Layout, Spin } from 'antd-v4';
import CommonListEvent from '../CommonListEvent';/* 继承销售模块业务功能 */
import * as commonFunc from '../commonFunc';/* 通用单据方法 */ /* 通用单据方法 */
import Toolbar from '../ToolBar/ToolBarNew';
import styles from '../../../index.less';
import GanttStyles from './index.less';
import CommonBase from '../CommonBase';/* 获取配置及数据 */
import * as commonBusiness from '../commonBusiness';/* 单据业务功能 */
import SearchComponent from '../SearchComponent';/* 搜索组件 */
import * as commonUtils from '../../../utils/utils';
// import SlaveMemo from './SlaveMemo';
import StaticEditTree from '../Tree/StaticTree';
import Eject from '../../../assets/eject.svg';/* 弹出图标 */
import Close from '../../../assets/close.svg';
import Gantt from '../../Charts/Gantt';
/* 关闭图标 */
const data = {
  data: [
    {
      id: 1, text: 'Task #1', start_date: '2021-01-20 08:30', end_date: '2021-01-20 12:30', duration: 3, progress: 0.6,
    },
    {
      id: 2, text: 'Task #2', start_date: '2021-01-20 09:30', end_date: '2021-01-20 14:30', duration: 3, progress: 0.4,
    },
  ],
  links: [
    {
      id: 1, source: 1, target: 2, type: '0',
    },
  ],
};
// const zoom = 'Minutes';

const { Header, Content } = Layout;
class CommonGatte extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  // ----------------------------数据修改回带end  ---------------------------- //
  handleEject = () => {
    const { currentPane, panes } = this.props.app;
    if (commonUtils.isNotEmptyArr(panes) && commonUtils.isNotEmptyObject(currentPane)) {
      // const index = panes.indexOf(currentPane);
      const index = panes.findIndex(item => item.formId === currentPane.formId && item.key === currentPane.key && item.notCurrentPane === currentPane.notCurrentPane && item.route === currentPane.route && item.title === currentPane.title && item.sModelsType === currentPane.sModelsType && item.sProcName === currentPane.sProcName);
      /* 当前页签 */
      let currentTab = document.getElementById('navTabWrap').children[index];
      if (commonUtils.isEmpty(currentTab)) {
        const oChildren = document.getElementById('navTabWrap').getElementsByClassName('ant-tabs-content')[0].children;
        for (const child of oChildren) {
          if (child.nodeName === 'DIV' && index !== undefined && child.getAttribute('id') === `navTabWrap-panel-${panes[index].key}`) {
            currentTab = child;
          }
        }
      }
      // const currentTab = document.getElementById('tabs').getElementsByClassName('ant-tabs-content-no-animated')[0].children[index];
      if (!commonUtils.isEmpty(currentTab)) {
        const filterTreeArr = currentTab.getElementsByClassName('xly-filter-tree');/* 获取当前页签下的树组件 */
        if (commonUtils.isNotEmptyArr(filterTreeArr)) {
          const filterTree = filterTreeArr[0];
          if (filterTree.style.display === 'block') {
            filterTree.style.display = 'none';
          } else {
            filterTree.style.display = 'block';
          }
        }
      }
    }
  };
  /**   树节点选中   */
  handleTreeSelect = (name, checkedKeys, e) => {
    this.props.onSelect(name, checkedKeys, e); /* 调用CommonListEvent通用处理 */
  };


  render() {
    const { pageLoading } = this.props;
    return (
      <div style={{ height: '100%' }}>
        <Spin spinning={pageLoading}>
          <div style={{ height: '100%' }}>
            <CommonGatteComponent
              {...this.props}
              {...this.state}
              onEject={this.handleEject}
              onSelectTree={this.handleTreeSelect}
            />
          </div>
        </Spin>
      </div>
    );
  }
}

const CommonGatteComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form);
    return obj;
  },
})((props) => {
  const {
    form, onReturnForm, slavePagination, slaveConfig, slaveColumn, isSmall, iHeight, charGanttData,
  } = props;
  // isSmall将分页变小，以及去掉跳转页面和总条数记录
  /*   回带表单   */
  if (commonUtils.isNotEmptyObject(slavePagination)) {
    if (isSmall) {
      slavePagination.showTotal = null;
    }
  }
  onReturnForm(form);
  // const pagination = {
  //   pageSize: commonConfig.pageSize,
  //   ...slavePagination,
  //   size: isSmall ? 'small' : 'large',
  //   pageSizeOptions: commonConfig.pageSizeOptions,
  //   showSizeChanger: !isSmall,
  //   showQuickJumper: !isSmall,
  // };
  // const tableProps = {
  //   ...commonBusiness.getTableTypes('slave', props),
  //   tableProps: { rowKey: 'sSlaveId', pagination, onChange: props.onTitleChange },
  //   onSaveState: props.onSaveState,
  //   clearArray: props.clearArray,
  //   readOnly: true,
  //   isSmall,
  //   sGroupByList: props.sGroupByList,
  // };
  let zoom = {};
  zoom.scale = 'Minutes';
  zoom.step = '10'; /* 间隔 */
  if (commonUtils.isNotEmptyObject(charGanttData)) {
    // eslint-disable-next-line prefer-destructuring
    zoom = charGanttData.zoom;
  }
  const ganttProps = {
    // ...commonBusiness.getGanttTypes('slave', props),
    tasks: commonUtils.isNotEmptyObject(charGanttData) ? charGanttData : data, /* 甘特图数据源 */
    zoom: commonUtils.isNotEmptyObject(zoom) ? zoom : {},
    onDataUpdated: props.onDataUpdated,
    slaveConfig,
    slaveColumn,
  };

  const name = 'filterTree';
  const treeProps = {
    ...commonBusiness.getTreeTypes('tree', props),
    isSearch: false,
    checkable: false,
    disabled: false,
    checkedAll: false,
    unChecked: false,
    [`${name}Column`]: props[`${name}Column`],
    [`${name}Config`]: props[`${name}Config`],
    [`${name}Data`]: props[`${name}Data`],
    getFloatNum: props.getFloatNum,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getDateFormat: props.getDateFormat,
    onDoubleClick: props.onDoubleClick,
    onSelect: props.onSelectTree,
    expandedKeys: props.expandedKeys,
  };
  return (
    <Form style={{ height: '100%' }}>
      <Layout style={{ height: '100%' }} className="xly-list">
        {!commonUtils.isEmpty(props.routing) ? '' :
        <Header className={styles.header}>
          <Toolbar {...props} className="billBtnGroup" style={{ backgroundColor: '#646464', color: 'rgb(255,255,255)' }} />
        </Header>}
        <Layout className={styles.clayout}>
          <div style={{ maxHeight: '100%', zIndex: 20 }}>
            <SearchComponent {...props} />
          </div>
          <Content style={{ height: iHeight || 'calc( 100vh - 160px)' }} className={GanttStyles.ganttList} >
            {/* <StaticEditTable {...tableProps} tableBelone="list" /> */}
            <div className="gantt-container" style={{ width: '100vm', height: '100%' }}><Gantt {...ganttProps} /></div>
          </Content>
        </Layout>
      </Layout>
      {/* {!commonUtils.isEmpty(props.routing) ? '' : <SlaveMemo {...props} />} */}
      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
      {commonUtils.isEmptyArr(treeProps.treeData) || !commonUtils.isEmpty(props.routing) ? '' : <div className="xly-eject"> <a onClick={props.onEject}> <img src={Eject} alt="eject" /></a> </div>}
      {commonUtils.isEmptyArr(treeProps.treeData) || !commonUtils.isEmpty(props.routing) ? '' :
      <div className="xly-filter-tree">
        <StaticEditTree {...treeProps} />
        <div className="xly-tree-close" >
          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
          <a onClick={props.onEject}> <img src={Close} alt="close" /></a>
        </div>
      </div>
      }
    </Form>
  );
});

export default CommonBase(CommonListEvent(CommonGatte));