import React from 'react';
import { Layout } from 'antd';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import CommonBase from '../../components/Common/CommonBase';
import CommonListEvent from '../../components/Common/CommonListEvent';
import * as commonFunc from '../../components/Common/commonFunc';
import * as commonUtils from '../../utils/utils';
import * as commonBusiness from '../../components/Common/commonBusiness';
import StaticEditTable from '../../components/Common/CommonTable';
import oeeStyle from './oee.less';
import OeeSearchComponent from './oeeSearchComponent';
import AntdDraggableModal from '../../components/Common/AntdDraggableModal';
import ShowType from '../../components/Common/CommonComponent';

const { Content } = Layout;
class OeeWagesSearchComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      renderOnce: true,
      dateFormat: 'YYYY/MM/DD',
    };
  }
  shouldComponentUpdate(nextProps) {
    const { slaveColumn } = nextProps;
    return commonUtils.isNotEmptyArr(slaveColumn);
  }
  componentDidUpdate() {
    // 设置table中的ant-table-body的高度，使滚动条至底
    // const antTable = document.getElementsByClassName('currentStateTable')[0].getElementsByClassName('xly-normal-list')[0].offsetHeight;
    // const antTableHeader = document.getElementsByClassName('currentStateTable')[0].getElementsByClassName('ant-table-header')[0].offsetHeight;
    // document.getElementsByClassName('currentStateTable')[0].getElementsByClassName('ant-table-body')[0].style.height = `${antTable - antTableHeader}px`;
  }

  handleWagesSearchCancel = () => {
    this.props.handleWagesSearchVisble(false); // 关闭日期弹窗
  }
  handleWagesSearchOk = () => {
    const { app, masterData, slaveConfig } = this.props;
    const filterCondition = [];
    filterCondition.push({
      bFilterName: 'sMachineGuid_pro',
      bFilterCondition: '=',
      bFilterValue: app.sMachineNameSId,
    });
    if (commonUtils.isNotEmptyObject(masterData)) {
      if (commonUtils.isNotEmptyObject(masterData.tDateStart) && commonUtils.isNotEmptyObject(masterData.tDateEnd)) {
        filterCondition.push({
          bFilterName: 'tStartDate_pro',
          bFilterCondition: '=',
          bFilterValue: masterData.tDateStart,
        });
        filterCondition.push({
          bFilterName: 'tEndDate_pro',
          bFilterCondition: '=',
          bFilterValue: masterData.tDateEnd,
        });
      }
    }
    this.props.onGetData(slaveConfig, filterCondition, 1, 20, '', false);
    this.props.handleWagesSearchVisble(false); // 关闭日期弹窗
  }
  render() {
    return (
      <WagesSearchComponent
        {...this.props}
        {...this.state}
        onWagesSearchCancel={this.handleWagesSearchCancel}
        onWagesSearchOk={this.handleWagesSearchOk}
      />
    );
  }
}
const WagesSearchComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form);
    return obj;
  },
})((props) => {
  const {
    app,
    form,
    onReturnForm,
    slavePagination,
    isSmall,
    dateVisibleState, // 日期显示
    // renderContent, // 切换页面
    masterData,
    onBtnClick,
    slaveConfig,
    onWagesSearchCancel,
  } = props;
  // isSmall将分页变小，以及去掉跳转页面和总条数记录
  /*   回带表单   */
  if (commonUtils.isNotEmptyObject(slavePagination)) {
    if (isSmall) {
      slavePagination.showTotal = null;
    }
  }
  onReturnForm(form);
  const pagination = false;
  const tableProps = {
    ...commonBusiness.getTableTypes('slave', props),
    tableProps: {
      rowKey: 'sSlaveId',
      pagination,
      onChange: props.onTitleChange,
      // AutoTableHeight: '400px',
    },
    onSaveState: props.onSaveState,
    clearArray: props.clearArray,
    readOnly: true,
    isSmall,
    sGroupByList: props.sGroupByList,
  };
  const onCancleProps = {
    style: { display: 'none' },
  };
  const onOkProps = {
    style: { width: '100%' },
    className: 'modalDateOk',
  };
  const wagesSearchStartConfig = commonUtils.isNotEmptyObject(slaveConfig) ? slaveConfig.gdsconfigformslave.filter(item => item.sName === 'tDateStart')[0] : {};
  const wagesSearchEndConfig = commonUtils.isNotEmptyObject(slaveConfig) ? slaveConfig.gdsconfigformslave.filter(item => item.sName === 'tDateEnd')[0] : {};
  const wagesSearchStartProps = {
    form: props.form,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getFloatNum: props.getFloatNum,
    getDateFormat: props.getDateFormat,
    onChange: props.onChange,
    showConfig: wagesSearchStartConfig,
    formItemLayout: {},
    textArea: false,
    enabled: true,
    dataValue: commonUtils.isNotEmptyObject(masterData) ? masterData[wagesSearchStartConfig.sName] : '',
    bTable: false,
    formRoute: props.formRoute,
  };
  const wagesSearchEndProps = {
    form: props.form,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getFloatNum: props.getFloatNum,
    getDateFormat: props.getDateFormat,
    onChange: props.onChange,
    showConfig: wagesSearchEndConfig,
    formItemLayout: {},
    textArea: false,
    enabled: true,
    dataValue: commonUtils.isNotEmptyObject(masterData) ? masterData[wagesSearchEndConfig.sName] : '',
    bTable: false,
    formRoute: props.formRoute,
  };
  const wagesSearch = commonFunc.showMessage(app.commonConst, 'wagesSearch');/* 工资查询 */
  // 取得配置中的按钮
  const buttonConfigs = commonUtils.isNotEmptyObject(slaveConfig) ? slaveConfig.gdsconfigformslave.filter(item => item.sName === '' && item.showName !== '' && item.sControlName !== '' && item.bVisible && item.sControlName.indexOf('Btn') > -1 && item.sControlName.indexOf('BtnCopyTo') === -1) : [];

  return (
    <div>
      <Form style={{ height: '100% ' }}>
        <Layout style={{ height: '100%' }} className="xly-list">
          <Layout className="table currentStateTable">
            <Content className="xly-normal-list" >
              <StaticEditTable {...tableProps} footer="hidden" tableBelone="list" formRoute={props.formRoute} sModelsType={props.sModelsType} />
            </Content>
          </Layout>
          <div className={oeeStyle.bottomBtns} style={{ height: '9.7vh' }}>
            <div className={oeeStyle.oeeCurrentState}>
              {
                commonUtils.isNotEmptyArr(buttonConfigs) ?
                  buttonConfigs.map((item, index) => {
                    return (
                      // eslint-disable-next-line jsx-a11y/anchor-is-valid,react/no-array-index-key
                      <a key={index} style={{ background: `${item.sColorTerms}` }} onClick={() => onBtnClick(item)}>
                        {item.showName}
                      </a>
                    );
                  }) : ''
              }
            </div>
            <div className={oeeStyle.searchComponent}>
              <OeeSearchComponent worldVis="false" {...props} />
            </div>
          </div>
        </Layout>
        {
          dateVisibleState ?
            <AntdDraggableModal
              title={wagesSearch}
              width={467}
              visible={dateVisibleState}
              onCancel={onWagesSearchCancel}
              // footer={null}
              okText="确 定"
              okButtonProps={onOkProps}
              cancelButtonProps={onCancleProps}
              onOk={props.onWagesSearchOk}
              className="dateModal"
            >
              <div className={oeeStyle.dateDiv}>
                {
                  commonUtils.isNotEmptyObject(wagesSearchStartConfig) ? <ShowType {...wagesSearchStartProps} /> : ''
                }
              </div>
              <div className={oeeStyle.dateDiv}>
                {
                  commonUtils.isNotEmptyObject(wagesSearchStartConfig) ? <ShowType {...wagesSearchEndProps} /> : ''
                }
              </div>
            </AntdDraggableModal>
            : ''
        }
      </Form>
    </div>
  );
});
export default CommonBase(CommonListEvent(OeeWagesSearchComponent));