/* eslint-disable */
/* eslint-disable function-paren-newline */
import React, { Component } from 'react';
// import '@ant-design/compatible/assets/index.css';
import { Row, Col, List, Card, Checkbox, Select, Form, Tree } from 'antd-v4';
import ShowType from '@/components/Common/CommonComponent';
import * as commonUtils from '@/utils/utils';
import splitstyles from '../SplitPaste.less';
import commonConfig from '../../../utils/config';
const { TreeNode } = Tree;
import file from '@/assets/file.svg';
import file_single from '@/assets/file_single.svg';
// import * as commonServices from '../../../services/services';

const FormItem = Form.Item;

class SplitPaste extends Component {
  constructor(props) {
    super(props);
    this.activeTree = [];
  }

  componentDidMount() {
    this.props.onSaveState({
      masterData: {...this.props.masterData, sAllParam: undefined,
        sAllPartsName: undefined,
        sFormulaLengthSize: undefined,
        sFormulaWidthSize: undefined,
        sProductClassifyId: undefined,
        sProductClassifyName: undefined,
      },
      sBackProcessClassifyData: undefined
    })
    this.getTreeData();
    // const height = document.getElementsByClassName('split-container')[0].offsetHeight;
    // document.getElementsByClassName('split-tree')[0].style.height = height > 50 ? `${height + 0.5}px` : 200 + 'px';
  }

  componentDidUpdate() {
    // document.getElementsByClassName('split-tree')[0].style.height = 0 + 'px';
    // const height = document.getElementsByClassName('split-container')[0].offsetHeight;
    // document.getElementsByClassName('split-tree')[0].style.height = height > 50 ? `${height + 0.5}px` : 200 + 'px';
  }

  getTreeData = async () => {
    const {
      masterConfig, slaveFilterCondition,
    } = this.props;
    const filterTreeConfigArr = masterConfig.gdsconfigformslave.filter(item => item.bTree);
    if (commonUtils.isNotEmptyArr(filterTreeConfigArr)) {
      const filterTreeConfig = filterTreeConfigArr[0];
      this.handleGetFilterTreeData(filterTreeConfig, slaveFilterCondition, 1);
    }
  }

  handleGetFilterTreeData = async (masterConfig, slaveFilterCondition, page, slaveOrderBy) => {
    const pageNum = commonUtils.isEmpty(page) ? 1 : page;
    await this.props.handleGetTreeDataSet({
      name: 'master',
      configData: masterConfig,
      condition: {
        pageNum,
        pageSize: commonConfig.pageSize,
        bFilter: slaveFilterCondition,
        sFilterOrderBy: slaveOrderBy,
      },
      flag: true,
      clearSelectData: true,
    });
    if(this.props.treeData[0] && this.props.treeData[0].children[0]) {
      this.handleTreeSelect([this.props.treeData[0].children[0].sId],
  {
          node: { treeNode: this.props.treeData[0].children[0] }
        }
      )
    }
  };

  handleTreeSelect = async (e, select) => {
    if (e[0]) {
      this.activeTree = e;
      const selected = select.node.treeNode;
      this.props.onMasterChange('master', 'sProductClassifyName', {
        sAllParam: undefined,
        sAllPartsName: selected.sAllPartsName,
        sFormulaLengthSize: undefined,
        sFormulaWidthSize: undefined,
        sProductClassifyId: selected.sId,
        sProductClassifyName: selected.sName,
      });
    }
  }

  handleToggle = () => {
    this.props.onToggle();
  };

  handleViewClick = (name, sName, record) => {
    this.props.onViewClick(name, sName, record);
    this.props.onSaveState({ fastOrderModalVisible: false });
  };

  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children && item.children.length > 0) {
        return (
          <TreeNode
            title={item.showName}
            key={item.sId}
            treeNode={item}
            isLeaf={item.isLeaf}
          >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return (<TreeNode
        title={item.showName}
        key={item.sId}
        treeNode={item}
        switcherIcon={<img src={file_single} width={13} alt="svg" />}
      />);
    });
  };

  render() {
    const {
      masterConfig, enabled, sBackProcessClassifyData, checkProcessClassifyData, sModelsId,
    } = this.props;
    let { masterData } = this.props;
    masterData = masterData === undefined ? {} : masterData;
    const expand = true;
    const { getFieldDecorator } = this.props.form;
    const { sAllPartsName } = masterData;
    let allPartsName = [];
    if (sAllPartsName !== undefined) {
      allPartsName = sAllPartsName.split(',');
    }

    const newConfig = {};
    if (commonUtils.isNotEmptyObject(masterConfig) && masterConfig.gdsconfigformslave.length > 0) {
      const filterConfig = masterConfig.gdsconfigformslave.filter(item => (item.sName.indexOf('dSumPQty') > -1 || item.sName.indexOf('sMaterialsName') > -1 || item.sName.indexOf('iPrintModePo') > -1 || item.sName.indexOf('iPositiveColor') > -1));
      filterConfig.forEach((childNew) => {
        const child = { ...childNew };
        child.bVisible = true;
        if (child.sName.indexOf('dSumPQty') > -1) {
          child.placeholder = 'P数';
        } else if (child.sName.indexOf('sMaterialsName') > -1) {
          child.placeholder = '选择材料';
        } else if (child.sName.indexOf('iPrintModePo') > -1) {
          child.placeholder = '选择单双面';
        } else if (child.sName.indexOf('iPositiveColor') > -1) {
          child.placeholder = '印刷颜色';
        }
        let enabledNew = (enabled && !child.bReadonly && !child.specialControl);
        if (child.iTag === 1) {
          enabledNew = false;
        } else if (child.iTag === 3) {
          enabledNew = true;
        }
        const sMemo = child.sName.toLowerCase().endsWith('memo');
        const formItemLayout = { labelCol: { span: 2 }, wrapperCol: { span: 18 } };
        const showTypeProps = {
          form: this.props.form,
          getSqlDropDownData: this.props.getSqlDropDownData,
          getSqlCondition: this.props.getSqlCondition,
          handleSqlDropDownNewRecord: this.props.handleSqlDropDownNewRecord,
          getFloatNum: this.props.getFloatNum,
          onChange: this.props.onMasterChange,
          showConfig: child,
          formItemLayout: sMemo ? formItemLayout : {},
          textArea: sMemo,
          enabled: enabledNew,
          dataValue: masterData[child.sName],
          bTable: false,
        };
        newConfig[child.sName] = showTypeProps;
      });
    }



    /* 主表根据产品分类增加参数1，参数2，参数3，参数4，展开尺寸 */
    const modalFilterConfig = masterConfig.gdsconfigformslave.filter(item => (item.sName.indexOf('dProductQty') > -1 || item.sName.indexOf('sProductName') > -1 || item.sName.indexOf('sCustomerName') > -1 || item.sName.indexOf('sProductClassifyName') > -1 || item.sName.indexOf('sProductStyle') > -1));
    const formItemLayout = { labelCol: { span: 2 }, wrapperCol: { span: 18 } };
    const fullFormItemLayout = { labelCol: { span: 0 }, wrapperCol: { span: 24, offset: 0 } };
    const halfFormItemLayout = { labelCol: { span: 0 }, wrapperCol: { span: 24, offset: 0 } };

    return (
      <FormItem className={`${splitstyles.splitPaste} searchMainForm`} style={{ backgroundColor: '#ffffff' }}>
        <Row>
          <Col span={24}>
            <Row
              type="flex"
              style={{
                height: expand ? 'auto' : '100px', overflow: 'hidden', padding: '8px 8px 4px 8px',
              }}
            >
              {
                modalFilterConfig.map((child, index) => {
                  const sMemo = child.sName.toLowerCase().endsWith('memo');
                  const iOrder = sMemo ? 100 : child.iOrder > 100 ? 100 : child.iOrder; /* 排序 */
                  let enabledNew = (enabled && !child.bReadonly && !child.specialControl);
                  if (child.iTag === 1) {
                    enabledNew = false;
                  } else if (child.iTag === 3) {
                    enabledNew = true;
                  }
                  const showTypeProps = {
                    name: 'master',
                    form: this.props.form,
                    formId: sModelsId,
                    record: masterData,
                    getSqlDropDownData: this.props.getSqlDropDownData,
                    getSqlCondition: this.props.getSqlCondition,
                    handleSqlDropDownNewRecord: this.props.handleSqlDropDownNewRecord,
                    getFloatNum: this.props.getFloatNum,
                    getDateFormat: this.props.getDateFormat,
                    onChange: this.props.onMasterChange,
                    onViewClick: this.handleViewClick,
                    showConfig: child,
                    formItemLayout: sMemo ? formItemLayout : {},
                    textArea: sMemo,
                    enabled: enabledNew,
                    dataValue: masterData[child.sName],
                    bTable: false,
                    itemLabel: child.sName === 'sType' ? 'hide' : null,
                    onFilterDropDownData: this.props.onFilterDropDownData,
                  };
                  return (
                    <Col
                      key={child.sId}
                      span={index ? 5 : 4}
                      order={iOrder}
                    >
                      <ShowType {...showTypeProps} />
                    </Col>
                  );
                })
              }
            </Row>
          </Col>
          <Col span={3} className={`${splitstyles.splitTree} custom-scroll`}>
            <div className={`${splitstyles.treeContainer}`}>
              <div className={`${splitstyles.SplitListTitle}`}>
                产品分类
              </div>
              <Tree
                key={Math.random()}
                className={'hide-file-icon'}
                switcherIcon={<img src={file} alt="svg" />}
                onSelect={this.handleTreeSelect}
                selectedKeys={this.activeTree}
                defaultExpandAll={true}
              >
                {this.renderTreeNodes(this.props.treeData)}
              </Tree>
            </div>
          </Col>
          <Col span={21} className={`${splitstyles.splitContainer} custom-scroll`}>
            {allPartsName.length > 0 && Object.keys(newConfig).length > 4 ?
              <List
                className={splitstyles.list}
                grid={{ column: 1 }}
                dataSource={allPartsName}
                size="small"
                renderItem={(sPartsName, i) => (
                  <Row className={splitstyles.borderBottom} style={{ position: 'relative' }}>
                    <Col span={4} className={splitstyles.SplitListPartsName}>
                      {
                        i === 0 ?
                          <div className={splitstyles.SplitListTitle}>
                            部件信息
                          </div>
                          : null
                      }
                      <div className={splitstyles.rowWrapper}>
                        <Row gutter={[8, 0]}>
                          <Col span={15}>
                            <span className={splitstyles.introSpan}>{sPartsName}</span>
                          </Col>
                          <Col
                            order={1}
                            span={9}
                            style={{ position: 'relative' }}
                          >
                            {
                              newConfig[`dSumPQty${sPartsName}`] && <ShowType {...newConfig[`dSumPQty${sPartsName}`]} itemLabel="hide" formItemLayout={halfFormItemLayout} />
                            }
                          </Col>
                          <Col span={24} order={2}>
                            {
                              newConfig[`sMaterialsName${sPartsName}`] && <ShowType {...newConfig[`sMaterialsName${sPartsName}`]} itemLabel="hide" formItemLayout={fullFormItemLayout} />
                            }
                          </Col>
                        </Row>
                      </div>
                    </Col>
                    <Col span={2} >
                      {
                        i === 0 ?
                          <div className={splitstyles.SplitListTitle}>印刷颜色
                          </div>
                          : null
                      }
                      <div className={splitstyles.rowWrapper}>
                        <Row gutter={[8, 0]}>
                          <Col span={24}>
                            {
                              newConfig[`iPrintModePo${sPartsName}`] && <ShowType {...newConfig[`iPrintModePo${sPartsName}`]} itemLabel="hide" formItemLayout={fullFormItemLayout} />
                            }
                          </Col>
                          <Col span={24}>
                            {
                              newConfig[`iPositiveColor${sPartsName}`] && <ShowType {...newConfig[`iPositiveColor${sPartsName}`]} itemLabel="hide" formItemLayout={fullFormItemLayout} />
                            }
                          </Col>
                        </Row>
                      </div>
                    </Col>
                    <Col span={18}>
                      {
                        i === 0 ?
                          <div className={splitstyles.SplitListTitle}>工序
                          </div>
                          : null
                      }
                      <Row className={splitstyles.rowWrapper}>
                        <Col span={24}>
                          {sBackProcessClassifyData !== undefined && sBackProcessClassifyData !== '' ?
                            <List
                              grid={{ column: 4 }}
                              dataSource={sBackProcessClassifyData.filter(item => (item.sType !== '3' && (item.sPartsName === sPartsName || item.sPartsName === '')))}
                              size="small"
                              renderItem={item => (
                                <List.Item>
                                  <Card bordered={false} bodyStyle={{ padding: 0 }}>
                                    <Row>
                                      <Col span={10}>
                                        <Checkbox
                                          checked={checkProcessClassifyData !== undefined && checkProcessClassifyData.filter(card => (card.sId === item.sId && card.sPartsName === sPartsName)).length > 0}
                                          onChange={(e) => {
                                            this.props.handleProcessChange(e, item, sPartsName);
                                          }}
                                          title={item}
                                        >
                                          {item.sName}
                                        </Checkbox>
                                      </Col>
                                      <Col span={14}>
                                        <FormItem>
                                          {getFieldDecorator(`${item.sId + sPartsName}`, {
                                          })(
                                            <Select
                                              showSearch
                                              filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                              onSelect={this.props.handleSelectChangeProcess.bind(this, `${item.sId + sPartsName}:sId,${item.sId + item.sName + sPartsName}:sProcessName,${item.sId + item.sType + sPartsName}:sType`)}
                                            >{this.props.handleA(item.sId)}
                                            </Select>)}
                                        </FormItem>
                                      </Col>
                                    </Row>
                                  </Card>
                                </List.Item>
                              )}
                            />
                            : ''}
                        </Col>
                      </Row>
                    </Col>
                    <div className={splitstyles.SplitListLine} />
                    <div className={splitstyles.SplitListLineSec} />
                  </Row>
                )}
              />
              : ''}
            <Row className={splitstyles.lastRow}>
              <Col
                span={24}
              >
                <Row>
                  {sBackProcessClassifyData !== undefined && sBackProcessClassifyData !== '' ?
                    <Col
                      span={4}
                      className={splitstyles.borderRight}
                    >
                      <span className={splitstyles.process}>成品工序</span>
                    </Col>
                    : null
                  }
                  <Col span={20}>
                    {sBackProcessClassifyData !== undefined && sBackProcessClassifyData !== '' ?
                      <List
                        grid={{ column: 4 }}
                        dataSource={sBackProcessClassifyData.filter(item => (item.sType === '3'))}
                        size="small"
                        renderItem={item => (
                          <List.Item>
                            <Card bordered={false} bodyStyle={{ padding: 0 }}>
                              <Row className={splitstyles.rowWrapper}>
                                <Col span={10}>
                                  <Checkbox
                                    checked={checkProcessClassifyData !== undefined && checkProcessClassifyData.filter(card => (card.sId === item.sId)).length > 0}
                                    onChange={(e) => {
                                      this.props.handleProcessChange(e, item, '');
                                    }}
                                    title={item}
                                  >
                                    {item.sName}
                                  </Checkbox>
                                </Col>
                                <Col span={14}>
                                  <FormItem>
                                    {getFieldDecorator(`${item.sId}`, {
                                    })(
                                      <Select
                                        showSearch
                                        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                        onSelect={this.props.handleSelectChangeProcess.bind(this, `${item.sId}:sId,${item.sId + item.sName}:sProcessName,${item.sId + item.sType}:sType`)}
                                      >{this.props.handleA(item.sId)}
                                      </Select>)}
                                  </FormItem>
                                </Col>
                              </Row>
                            </Card>
                          </List.Item>
                        )}
                      />
                      : ''}
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
        </Row>
      </FormItem>
    );
  }
}

export default SplitPaste;