/* eslint-disable no-param-reassign */
import React, { Component } from 'react';
import { Card, Row, Col, Radio } from 'antd-v4';
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 EqualColumnarStack from '@/components/Charts/EqualColumnarStack';
// import styles from '../../Charts/index.less';
import * as utils from '@/utils/utils';
// import * as commonFunc from '../commonFunc';

class CustomizedCharComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      componentName: props.name,
      charConfigAndData: [], /* 总图表配置及数据 */
      charConfigList: [], /* 配置集 */
      gdsformconst: [], /* 常量 */
      charMenu: [], /* 图表右查询菜单 */
      bordered: true,
    };
  }

  componentWillMount() {
    const { charConfigAndData, charConfigList } = this.props;
    this.setState({ charConfigAndData, charConfigList });
  }

  componentWillReceiveProps(nextProps) {
    const { charConfigAndData, charConfigList, bordered } = nextProps;
    this.setState({ charConfigAndData, charConfigList, bordered });
  }

  shouldComponentUpdate(nextProps, nextState) {
    /*
    console.log('nextProps', nextProps);
    console.log('nextState', nextState);
    */
    const { charConfigList, charConfigAndData } = nextState;
    if (charConfigList !== this.state.charConfigList) return true;
    if (charConfigAndData !== this.state.charConfigAndData) return true;
    return false;
  }

  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 === 'sEqualColumnarStack') {
        content = <EqualColumnarStack {...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, commonChar, childChar } = this.state;
    return (
      <Row type="flex" className={commonChar} gutter={24} >
        {
          charConfigAndData.map((itemChar) => {
            const {
 showName, sId, iWidth, iOrder, childConfig,
} = itemChar;
            const extra = utils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null;
            return utils.isNotEmptyStr(showName) ? (
              <Col span={iWidth} key={sId} order={iOrder}>
                <Card id="commonChar" className={childChar} title={showName} extra={extra}>
                  {this.handleChar(itemChar)}
                </Card>
              </Col>
            ) : (
              <Col span={iWidth} key={sId} order={iOrder}>
                <Card id="commonChar" className={childChar} extra={extra} bordered={false}>
                  {this.handleChar(itemChar)}
                </Card>
              </Col>
            );
          })
        }
      </Row>
    );
  }
}

export default CustomizedCharComponent;