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

class CommonChar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sModelsId: props.sModelsId,
      charConfigAndData: [],
      commonChar: styles.commonChar,
      commonCharPage: styles.commonCharPage,
      childChar: styles.childChar,
    };
  }

  componentWillReceiveProps(nextProps) {
    const { charConfigAndData } = nextProps;
    this.setState({ charConfigAndData: JSON.parse(JSON.stringify(charConfigAndData)) });
  }

  shouldComponentUpdate(nextProps, nextState) {
    return JSON.stringify(nextState.charConfigAndData) !== JSON.stringify(this.state.charConfigAndData);
  }

  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} />;
      } else if (sCharType === 'commonList') {
        content = <CommonList {...child} />;
      } else if (sCharType === 'ColorBlock') {
        content = <ColorBlock {...child} />;
      }
    }
    return content;
  };

  handleExtra = (menuTypeId) => {
    const { charMenu } = this.state;
    let content = '';
    if (charMenu !== undefined && charMenu !== null) {
      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 { commonChar, commonCharPage, childChar, sModelsId } = this.state;
    let { charConfigAndData } = this.state;
    if (sModelsId !== null && sModelsId !== undefined && sModelsId.toString() === '11811781131121915101184660940') {
      charConfigAndData = [];
      return (
        <Row className={commonChar} gutter={[24, 24]} span="24" style={{ maxHeight: '100vh', overflowY: 'auto' }}>
          {
            charConfigAndData.map((itemChar) => {
              const { showName, sId, iWidth, iOrder, childConfig } = itemChar;
              const extra = utils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null;
              return (
                <Col span={iWidth} key={sId} order={iOrder}>
                  <Card className={`${childChar} commonCharContainer`} title={showName} extra={extra}>
                    {this.handleChar(itemChar)}
                  </Card>
                </Col>
              );
            })
          }
        </Row>
      );
    } else {
      return (
        <Row type="flex" className={this.props.indexCenter ? commonChar : `${commonChar} ${commonCharPage}`} gutter={[24, 24]} style={{ maxHeight: '100vh', overflowY: 'auto' }}>
          {
            charConfigAndData.map((itemChar) => {
              const { showName, sId, iWidth, iOrder, childConfig } = itemChar;
              const extra = utils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null;
              return (
                <Col span={iWidth} key={sId} order={iOrder}>
                  <Card className={`${childChar} commonCcommonCharContainerhar`} title={showName} extra={extra}>
                    {this.handleChar(itemChar)}
                  </Card>
                </Col>
              );
            })
          }
        </Row>
      );
    }
  }
}

export default baseChar(CommonChar);