/* eslint-disable */
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));