/* 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 } from 'antd';
import ShowType from '@/components/Common/CommonComponent';
import splitstyles from '@/components/Manufacture/SplitPaste.less';
import * as commonUtils from '@/utils/utils';

const FormItem = Form.Item;

class SplitPasteQuotation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // expand: false,
    };
  }

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

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

  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
        || item.sName.indexOf('dPartsLength') > -1 || item.sName.indexOf('dPartsWidth') > -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 = '印刷颜色';
        } else if (child.sName.indexOf('dPartsLength') > -1) {
          child.placeholder = '部件长';
        } else if (child.sName.indexOf('dPartsWidth') > -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;
      });
    }

    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
          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 iColValue = sMemo ? 21 : child.iColValue * 6; /* 跨度 */
              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>
        {allPartsName.length > 0 && Object.keys(newConfig).length > 4 ?
          <List
            dataSource={allPartsName}
            grid={{ column: 1 }}
            size="small"
            className={splitstyles.list}
            renderItem={(sPartsName, i) => (
              !(newConfig[`dSumPQty${sPartsName}`]) ? '' :
              <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' }}
                      >
                        <ShowType {...newConfig[`dSumPQty${sPartsName}`]} itemLabel="hide" formItemLayout={halfFormItemLayout} />
                      </Col>
                      <Col span={24} order={2}>
                        <ShowType {...newConfig[`sMaterialsName${sPartsName}`]} itemLabel="hide" formItemLayout={fullFormItemLayout} />
                      </Col>
                      {
                        !(newConfig[`dPartsLength${sPartsName}`]) ? '' :
                        <Col span={12} order={2}>
                          <ShowType {...newConfig[`dPartsLength${sPartsName}`]} itemLabel="hide" formItemLayout={fullFormItemLayout} />
                        </Col>
                      }
                      {
                        !(newConfig[`dPartsWidth${sPartsName}`]) ? '' :
                        <Col span={12} order={2}>
                          <ShowType {...newConfig[`dPartsWidth${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}>
                        <ShowType {...newConfig[`iPrintModePo${sPartsName}`]} itemLabel="hide" formItemLayout={fullFormItemLayout} style={{ width: '100%' }} />
                      </Col>
                      <Col span={24}>
                        <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>
      </FormItem>
    );
  }
}

export default SplitPasteQuotation;