/* eslint-disable object-curly-newline,prefer-destructuring */
import React, { Component } from 'react';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Form } from 'antd';
import * as commonConfig from '@/utils/config';
import ShowType from '@/components/Common/CommonComponent';
import AntdDraggableModal from '@/components/Common/AntdDraggableModal';
import CommonListSelectTree from '@/components/Common/CommonListSelectTree';
import * as commonUtils from '@/utils/utils';/* 通用方法 */

const FormItem = Form.Item;
// const EachInputHeight = 32;
// const Padding = 16;
// const tableHeaderHeight = 29;
// const tabHeight = 119;
export default class CommonView extends Component {
  // componentWillReceiveProps(nextProps) {
  //   if (nextProps.AutoTableHeight === undefined) {
  //     const masterConfig = nextProps.masterconfig ? nextProps.masterconfig : nextProps.masterConfig;
  //     const masterShowConfigNoMemo = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && !item.sName.toLowerCase().endsWith('memo') && item.sControlName.indexOf('_') === -1) : [];
  //     const masterShowConfigMemo = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.sName.toLowerCase().endsWith('memo') && item.sControlName.indexOf('_') === -1) : [];
  //     const iNoMemo = masterShowConfigNoMemo.length / 4;
  //     const iMemo = masterShowConfigMemo.length; /* 产品部要求 备注设置成一行到底 */
  //     const Aheight = (Math.ceil(iNoMemo) + iMemo) * EachInputHeight;
  //     const searchMainFormHeight = Aheight + Padding;
  //     const tableHeight = window.innerHeight - tabHeight - searchMainFormHeight - tableHeaderHeight;
  //     // let AutoTableHeight = `calc( 100vh - ${AutoHeight}px - 22px )`;
  //     // const { formRoute } = nextProps;
  //     // if (commonUtils.isNotEmptyObject(formRoute) && formRoute !== '/indexPage/commonBill' && formRoute !== '/indexPage/commonNewBill' && formRoute !== '/indexPage/workOrderNew' && formRoute !== '/indexPage/workOrderPack' && formRoute !== '/indexPage/processCard' && formRoute !== '/indexPage/processCardPack' && formRoute !== '/indexPage/quotation' && formRoute !== '/indexPage/quotationPack' && formRoute !== '/indexPage/elemachineInfo') { /* 单独算基础信息表格高度 */
  //     //   AutoTableHeight = `calc( 100vh - ${AutoHeight}px + 80px )`;
  //     // }
  //     this.props.onSaveState({
  //       AutoTableHeight: tableHeight,
  //     });
  //   }
  // }
  constructor(props) {
    super(props);
    this.state = {
      openNewTabFlag: false,
      commonFieldPopupVisible: false,
      commonFieldPopupTbName: 'name',
      commonFieldPopupShowConfig: {},
      randomId: commonUtils.createSid(),
      previewVisible: false, /* 图片预览弹窗 */
      previewImage: '', /* 预览图片地址 */
    };
  }

  componentWillReceiveProps() {
    if (this.state.openNewTabFlag) {
      const dom = document.getElementsByClassName(`${this.state.randomId}-CommonListSelectTree`)[0];
      dom.parentElement.parentElement.style.display = 'block';
      this.setState({
        openNewTabFlag: false,
      });
    }
  }

  // shouldComponentUpdate(nextProps) {
  //   const { masterData, expandView, enabled } = this.props;
  //   return masterData !== nextProps.masterData || expandView !== nextProps.expandView || enabled !== nextProps.enabled;
  // }
  onOpenNewTab = () => {
    const dom = document.getElementsByClassName(`${this.state.randomId}-CommonListSelectTree`)[0];
    dom.parentElement.parentElement.style.display = 'none';
    this.setState({
      openNewTabFlag: true,
    });
  };
  handleToggle = () => {
    const { expandView } = this.props;
    this.props.onSaveState({ expandView: !expandView });
  };
  handleViewClick = (name, sName, record, index, myConfig) => {
    this.props.onViewClick(name, sName, record, index, myConfig);
  };
  /* 字段弹窗 */
  handleFieldPopupModal= (showConfig, name) => {
    this.setState({
      commonFieldPopupVisible: true,
      commonFieldPopupTbName: name,
      commonFieldPopupShowConfig: showConfig,
    });
  }
  /* 所有备注非编辑状态下点击链接可以弹出备注窗体 */
  handleMemoShow = (name, sName, record, index, showConfig) => {
    if (commonUtils.isNotEmptyObject(record)) {
      const sMemo = showConfig.sName;
      const title = showConfig.showName;
      const sCurrMemoProps = {
        title,
        name,
        sValue: record[sName],
        sMemoField: sMemo,
        bVisibleMemo: true,
        sRecord: record,
        sMemoConfig: showConfig,
        bOnlyShow: true,
      };
      this.props.onSaveState({ sCurrMemoProps });
    }
  }
  handleSelectCommonFieldPopup = (name, selectConfig, selectData) => {
    const { commonFieldPopupTbName, commonFieldPopupShowConfig } = this.state;
    this.props.onSelectCommonPopup(name, selectConfig, selectData, commonFieldPopupTbName, commonFieldPopupShowConfig);
  };
  handleSelectCancel = (modelVisible) => {
    this.setState({
      [modelVisible]: false,
    });
  };

  /* 预览缩略图 */
  handlePreviewImage= (e, dataUrlArr) => {
    if (commonUtils.isNotEmptyObject(dataUrlArr)) {
      const { token } = this.props.app;
      const previewImageArr = [];
      dataUrlArr.forEach((item) => {
        const dataPreviewUrl = `${commonConfig.server_host}file/download?savePathStr=${item}&width=800&&height=500&sModelsId=100&token=${token}`; /* 预览 */
        previewImageArr.push(dataPreviewUrl);
      });
      this.setState({
        previewImage: previewImageArr,
        previewVisible: true,
      });
    }
  };

  handleCancelModal = (modelVisible) => {
    this.setState({
      [modelVisible]: false,
    });
  };

  render() {
    const { sModelsId, enabled, sUseInfo, app, sModelsType, tableConfigType, isEnabledPlcNo } = this.props;
    const { commonFieldPopupVisible, randomId, previewVisible, previewImage } = this.state;
    let { masterData } = this.props;
    const masterConfig = this.props.masterconfig ? this.props.masterconfig : this.props.masterConfig;
    masterData = masterData === undefined ? {} : masterData;
    let masterShowConfig = [];
    if (tableConfigType) {
      masterShowConfig = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.sControlName.split('_')[1] === tableConfigType) : [];
    } else {
      masterShowConfig = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.sControlName.indexOf('_') === -1) : [];
    }
    const formItemLayout = { labelCol: { span: 2, style: { color: 'rgba(0, 0, 0, 0.65)', backgroundColor: '#BFEFFF' } }, wrapperCol: { span: 22 } };

    /* 字段弹窗功能 */
    let commonFieldPopupProps = {};
    let commonFieldPopupTitle = '选择弹窗';
    if (commonUtils.isNotEmptyObject(this.props)) {
      let commonFieldPopupConfig = {};
      const { masterConfig, sModelsId } = this.props;
      if (commonUtils.isNotEmptyObject(masterConfig)) {
        const iIndex = masterConfig.gdsconfigformslave.findIndex(item => commonUtils.isNotEmptyObject(item.sName) && item.sDropDownType === 'popup');
        if (iIndex > -1) {
          commonFieldPopupConfig = masterConfig.gdsconfigformslave[iIndex];
          commonFieldPopupTitle = commonUtils.isNotEmptyObject(commonFieldPopupConfig) && commonUtils.isNotEmptyObject(commonFieldPopupConfig.sActiveName) ? commonFieldPopupConfig.sActiveName : commonFieldPopupTitle;
          commonFieldPopupProps = {
            app: {
              ...this.props.app,
              currentPane: {
                name: 'commonPopup',
                config: commonFieldPopupConfig,
                conditonValues: this.props.getSqlCondition(commonFieldPopupConfig),
                title: commonFieldPopupTitle,
                route: '/indexPage/commonList',
                formRoute: '/indexPage/commonList',
                formId: commonFieldPopupConfig.sActiveId,
                key: sModelsId + commonFieldPopupConfig.sId,
                sModelsType: 'search/commonPopup',
                select: this.handleSelectCommonFieldPopup,
                selectCancel: this.handleSelectCancel.bind(this, 'commonFieldPopupVisible'),
              },
            },
            dispatch: this.props.dispatch,
            content: this.props.content,
            id: randomId,
            onOpenNewTab: this.onOpenNewTab,
            outerMasterData: this.props.masterData,
            realizeHeight: this.props.realizeHeight, /* 拖动偏移高度 */
          };
        }
      }
    }

    return (
      <FormItem className={`searchMainForm searchMainForm_${app.currentPane.key || 0}`} style={{ overflow: this.props.isAutoHeight ? 'auto' : '', height: this.props.isAutoHeight ? this.props.AutoTableHeight : '' }}>
        <Row type="flex" style={{ height: 'auto', overflow: 'auto' }}>
          {
            masterShowConfig.map((child) => {
              const sMemo = child.sName.toLowerCase().endsWith('memo');
              const iRowNum = child.iColValue === 1 ? 6 : 1; /* 每个字段占的网格个数 ，网格总个数是24 */
              const iColValue = sMemo ? 24 : child.iColValue * iRowNum; /* 跨度 */
              // const iColValue = sMemo ? 24 : child.iColValue * 6; /* 跨度 */
              const iOrder = sMemo ? 100 : child.iOrder > 100 ? 100 : child.iOrder; /* 排序 */
              const sFormulaMemo = child.sName.toString() === 'sFormulaMemo' ? 'none' : 'block';
              // sUseInfo是指被其他单据调用，或者被审核
              let enabledNew = (enabled && !child.bReadonly && !child.specialControl && commonUtils.isEmpty(sUseInfo));
              if (child.iTag === 1) {
                enabledNew = false;
              } else if (child.iTag === 3 && !masterData.bCheck) { /* 当非审核状态下, 初始值为3才能编辑 */
                enabledNew = true;
              }
              // 设备信息页面修改MES系统PLC编号，控制是否输入
              if (sModelsType === 'element/machineInfo' && child.sName === 'iPlcNo') {
                enabledNew = isEnabledPlcNo;
              }
              const showTypeProps = {
                app,
                iColValue,
                record: masterData,
                name: 'master',
                form: this.props.form,
                formId: sModelsId,
                getSqlDropDownData: this.props.getSqlDropDownData,
                getSqlCondition: this.props.getSqlCondition,
                handleSqlDropDownNewRecord: this.props.handleSqlDropDownNewRecord,
                getFloatNum: this.props.getFloatNum,
                getDateFormat: this.props.getDateFormat,
                onChange: this.props.onChange,
                showConfig: child,
                tableConfig: masterConfig,
                formItemLayout: sMemo ? formItemLayout : {},
                textArea: sMemo,
                enabled: enabledNew,
                dataValue: masterData[child.sName],
                bTable: false,
                onFilterDropDownData: this.props.onFilterDropDownData,
                onDropDownBlur: this.props.onDropDownBlur,
                onViewClick: this.handleViewClick,
                onMemoShow: this.handleMemoShow,
                onSaveState: this.props.onSaveState,
                onFieldPopupModal: this.handleFieldPopupModal, /* 字段选择弹窗 */
                onPreviewImage: this.handlePreviewImage, /* 预览缩略图 */
              };
              return (
                <Col key={child.sId} span={iColValue} order={iOrder} style={{ display: sFormulaMemo, position: 'relative' }}>
                  <ShowType {...showTypeProps} />
                  {masterData !== undefined && commonUtils.isEmptyObject(masterData[child.sName]) && (child.sName === 'sBillNo' || child.sName === 'sMakePerson' || child.sName === 'tCheckDate' || child.sName === 'sCheckPerson') ?
                    <Col style={{ display: enabled ? 'block' : 'none' }} className="speacialNote" key={child.sId} span="12">
                      {sModelsType !== 'smg/sendMailMsg' ? '保存后自动生成' : '发送消息无需生成单据号'}
                    </Col> : '' }
                </Col>
              );
            })
          }
        </Row>
        {
          /*
           <button
           className={expandView ? styles.collapseB : styles.collapseA}
           onClick={this.handleToggle}
           >
           <span>{expandView ? '缩略展示' : '显示全部'}</span><Icon type={expandView ? 'up' : 'down'} />
           </button>
           */
        }
        {
          previewVisible && commonUtils.isNotEmptyArr(previewImage) ?
            <AntdDraggableModal
              width={800}
              zIndex={1000}
              visible={previewVisible}
              title="预览图片"
              footer={null}
              onCancel={this.handleCancelModal.bind(this, 'previewVisible')}
            >
              <img alt="example" style={{ width: '100%' }} src={previewImage[0]} />
            </AntdDraggableModal>
            : ''
        }
        {
          commonFieldPopupVisible ?
            <AntdDraggableModal
              width={1300}
              zIndex={1000}
              title={commonFieldPopupTitle}
              visible={commonFieldPopupVisible}
              onCancel={this.handleSelectCancel.bind(this, 'commonFieldPopupVisible')}
              footer={null}
              onSaveState={this.props.onSaveState}
              className={`${randomId}-CommonListSelectTree`}
            >
              <CommonListSelectTree {...commonFieldPopupProps} />
            </AntdDraggableModal>
            : ''
        }
      </FormItem>
    );
  }
}