/* eslint-disable object-curly-newline */
import React, { Component } from 'react';
import { Card, Row, Col, Radio } from 'antd-v4';
import baseChar from '../Common/baseChar'; /* 获取图表配置及数据 */
import styles from '../Charts/index.less';
import * as commonUtils from '../../utils/utils';
import CommonList from '../Common/CommonList';
import Bar from '../Charts/Bar';
import Columnar from '../Charts/Columnar';
import ColumnarGroup from '../Charts/ColumnarGroup';
import BrokenLine from '../Charts/BrokenLine';
import WaterWave from '../Charts/WaterWave';
import Gauge from '../Charts/Gauge';
import ColumnarStack from '../Charts/ColumnarStack';
import PieGroup from '../Charts/PieGroup';
import Pie from '../Charts/Pie';
import TimeLineGroup from '../Charts/TimeLineGroup';
import ColorBlock from '../Charts/ColorBlock';


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

  componentWillMount() {
    this.timer = setInterval(() => {
      const pageNum = commonUtils.isEmpty(this.props.pageNum) ? 2 : this.props.pageNum + 1;
      this.props.onGetData({ ...this.props }, pageNum);
    }, 10000);
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ ...nextProps });
  }
  handleChar = (props) => {
    const { sCharType, child, iHeight } = props;
    let content = '';
    if (commonUtils.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} />;
      } else if (sCharType === 'ColorBlock') {
        content = <ColorBlock {...child} />;
      }
    } else if (sCharType === 'commonList') {
      const listProps = { ...this.props, ...child, formRoute: 'commonList', isSmall: true, iHeight, sModelsId: props.sActiveId, pageNum: this.state.pageNum, onToFirst: this.props.onToFirst };
      content = <div className="commonRollChar"><CommonList {...listProps} /></div>;
    }
    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 (commonUtils.isNotEmptyArr(child)) {
      const { sName } = child[0];
      each.sSqlCondition = {
        [sName]: radioType,
      };
    }
    this.props.onEachChar(each);
  };

  render() {
    const { charConfigAndData, commonChar, childChar, sModelsId } = this.state;
    if (sModelsId !== null && sModelsId !== undefined && sModelsId.toString() === '11811781131121915101184660940') {
      return (
        <Col className={commonChar} gutter={24} span="24" style={{ maxHeight: '700px', overflowY: 'auto' }}>
          {
            charConfigAndData.map((itemChar) => {
              const { showName, sId, iWidth, iOrder, childConfig } = itemChar;
              const extra = commonUtils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null;
              return (
                <Col span={iWidth} key={sId} order={iOrder}>
                  <Card id="commonChar" className={childChar} title={showName} extra={extra}>
                    {this.handleChar(itemChar)}
                  </Card>
                </Col>
              );
            })
          }
        </Col>
      );
    } else {
      return (
        <Row type="flex" className={commonChar} gutter={24} style={{ maxHeight: '700px' }}>
          {
            charConfigAndData.map((itemChar) => {
              const { showName, sId, iWidth, iOrder, childConfig } = itemChar;
              const extra = commonUtils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null;
              return (
                <Col span={iWidth} key={sId} order={iOrder}>
                  <Card id="commonChar" className={childChar} title={showName} extra={extra}>
                    {this.handleChar(itemChar)}
                  </Card>
                </Col>
              );
            })
          }
        </Row>
      );
    }
  }
}

export default baseChar(CommonRollChar);