/* eslint-disable object-curly-newline */
import React, { Component } from 'react';
import { Radio } from 'antd';
import baseChar from '../../components/Common/baseChar'; /* 获取图表配置及数据 */
// import { Bar, Columnar, ColumnarGroup, BrokenLine, WaterWave, Gauge, ColumnarStack, PieGroup, Pie, TimeLineGroup } from '../../components/Charts';
import Bar from '../../components/Charts/Bar';
import Columnar from '../../components/Charts/Columnar';
import ColumnarGroup from '../../components/Charts/ColumnarGroup';
import BrokenLine from '../../components/Charts/BrokenLine';
import WaterWave from '../../components/Charts/WaterWave';
import Gauge from '../../components/Charts/Gauge';
import ColumnarStack from '../../components/Charts/ColumnarStack';
import PieGroup from '../../components/Charts/PieGroup';
import Pie from '../../components/Charts/Pie';
import TimeLineGroup from '../../components/Charts/TimeLineGroup';

import styles from '../../components/Charts/index.less';
import * as utils from '../../utils/utils';

class CommobileChar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ...props,
      commonChar: styles.commonChar,
      childChar: styles.childChar,
    };
  }


  componentWillReceiveProps(nextProps) {
    this.setState({ ...nextProps });
  }


  handleChar = (props) => {
    const { sCharType, child } = props;
    let content = '';
    if (utils.isNotEmptyObject(child)) {
      child.height = props.iHeight;
      if (sCharType === 'sBar') {
        /* 横向条形图 */
        content = <Bar {...child} />;
      } else if (sCharType === 'sColumnar') {
        /* 纵向条形图 */
        content = <Columnar {...child} />;
      } else if (sCharType === 'sColumnarGroup') {
        /* 纵向条形图 */
        content = <ColumnarGroup {...child} />;
      } else if (sCharType === 'sBrokenLine') {
        content = <BrokenLine {...child} />;
      } else if (sCharType === 'sWaterWave') {
        content = <WaterWave {...child} />;
      } else if (sCharType === 'sGauge') {
        content = <Gauge {...child} />;
      } else if (sCharType === 'sColumnarStack') {
        content = <ColumnarStack {...child} />;
      } else if (sCharType === 'sPieGroup') {
        content = <PieGroup {...child} />;
      } else if (sCharType === 'sPie') {
        content = <Pie {...child} />;
      } else if (sCharType === 'TimeLineGroup') {
        content = <TimeLineGroup {...child} />;
      }
    }
    return content;
  };

  handleExtra = (menuTypeId) => {
    const { charMenu } = this.state;
    let content = '';
    const index = charMenu.findIndex(item => item.sId === menuTypeId);
    if (index > -1) {
      const { childConfig, radioType } = charMenu[index];
      const props = { ...this.state, index };
      content = (
        <Radio.Group value={radioType} onChange={e => this.handleChangeType(e, props)}>
          {
            childConfig.map((item) => {
              const { sTypeValue, showName, sId } = item;
              return (
                <Radio.Button value={sTypeValue} key={sId}>{showName}</Radio.Button>
              );
            })
          }
        </Radio.Group>);
    }
    return content;
  };

  handleChangeType = (e, props) => {
    const { charMenu, charConfigAndData, index } = props;
    const { childConfig } = charMenu[index];
    const radioType = e.target.value; /* 更改后的菜单 */
    charMenu[index].radioType = radioType;
    this.setState({ charMenu });
    const each = charConfigAndData[index]; /* 当前图表的配置 */
    const child = childConfig.filter(item => item.sType === 'searchType' && item.sTypeValue === radioType);
    if (utils.isNotEmptyArr(child)) {
      const { sName } = child[0];
      each.sSqlCondition = {
        [sName]: radioType,
      };
    }
    this.props.onEachChar(each);
  };

  render() {
    const { charConfigAndData, childChar, sModelsId } = this.props;
    if (utils.isNotEmptyArr(charConfigAndData) && sModelsId !== null && sModelsId !== undefined && sModelsId.toString() === '101251240115015915037520030') {
      return (
        <div>
          {
            <div style={{ maxHeight: '700px' }}>
              {
                charConfigAndData.map((itemChar, index) => {
                  const { showName } = itemChar;
                  return (
                    // eslint-disable-next-line react/no-array-index-key
                    <div key={index} style={{ padding: '10px', borderRadius: '15px', backgroundColor: 'white', marginBottom: '10px' }} >
                      <div className={childChar} id="commonChar">
                        <div style={{ fontSize: '14px', fontWeight: 'bold' }}>{showName}</div>
                        {this.handleChar(itemChar)}
                      </div>
                    </div>
                  );
                })
              }
            </div>
          }
        </div>
      );
    } else {
      return (
        <div>
          {
            <div style={{ maxHeight: '700px' }}>
              {
                charConfigAndData.map((itemChar, index) => {
                  const { showName } = itemChar;
                  return (
                    // eslint-disable-next-line react/no-array-index-key
                    <div key={index} style={{ padding: '10px', borderRadius: '15px', backgroundColor: 'white', marginBottom: '10px' }} >
                      <div className={childChar} >
                        <div id="commonChar" style={{ fontSize: '14px', fontWeight: 'bold' }}>{showName}</div>
                        {this.handleChar(itemChar)}
                      </div>
                    </div>
                  );
                })
              }
            </div>
          }
        </div>

      );
    }
  }
}

export default baseChar(CommobileChar);