/* eslint-disable */
import React, { Component } from "react";
import { Button, message, Col, Row, Select } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Form } from "@ant-design/compatible";
import "@ant-design/compatible/assets/index.css";
import styles from "./LoginOee.less";
import * as commonConfig from "../../utils/config";
// import * as commonUtils from '../../utils/utils';
import * as commonServices from "../../services/services";
import * as commonFunc from "../../components/Common/commonFunc";
import * as commonUtils from "../../utils/utils";
import LoginIcon from "../../assets/oee/logo.png";
import setting from "../../assets/oee/setting.svg";
import team from "../../assets/oee/team.svg";
import faceReg from "../../assets/oee/facereg.svg";
import { VirtualKeyboard } from "../common/oeeKeyBoard";
import company from "../../assets/oee/company.svg";
import ShowType from "../../components/Common/CommonComponent";
import CommonBase from "../../components/Common/CommonBase";
import FaceDetect from "../../components/FaceDetect";

const FormItem = Form.Item;
const { Option } = Select;

class LoginForm extends Component {
  constructor(props) {
    super(props);
    const userLoginObj = localStorage.getItem(
      `${commonConfig.prefix}userlogin`
    );
    let userLogin = {};
    try {
      userLogin = commonUtils.isNotEmptyObject(userLoginObj)
        ? JSON.parse(userLoginObj)
        : {};
    } catch (e) {
      console.log(e.message);
    }
    const sModelsId = "16034339700006038392152714521000";
    this.state = {
      companys: [],
      sParentId: commonUtils.isNotEmptyObject(userLoginObj)
        ? userLogin.sBrandsId
        : "",
      sId:
        commonUtils.isNotEmptyObject(userLoginObj) !== null
          ? userLogin.sSubsidiaryId
          : "",
      userLogin,
      sModelsId,
      loginType: "normal"
    };
  }
  async componentWillMount() {
    this.handleGetLoginInfo(); /* 根据后台配置获取公司信息 */
    const companysConfigUrl = `${
      commonConfig.server_host
    }sysbrands/getSysbrands`;
    const companysConfigReturn = (await commonServices.getService(
      null,
      companysConfigUrl
    )).data;
    if (companysConfigReturn.code === 1) {
      const companys = companysConfigReturn.dataset.rows;
      this.setState({ companys });
    } else {
      message.error(companysConfigReturn.msg);
    }
  }
  componentDidMount() {
    document.getElementById("containers").parentElement.style.height = "100%";
  }
  /* 获取登录窗体配置 */
  handleGetLoginInfo = async () => {
    const { sModelsId, formRoute, userLogin } = this.state;
    const configUrl = `${
      commonConfig.server_host
    }business/getModelBysId/${sModelsId}?sModelsId=${sModelsId}&sName=/commonAuto`;
    const configReturn = (await commonServices.getService("", configUrl)).data;
    if (configReturn.code === 1) {
      const dataReturn = configReturn.dataset.rows;
      if (commonUtils.isNotEmptyArr(dataReturn)) {
        const { formData } = dataReturn[0];
        if (commonUtils.isNotEmptyArr(formData)) {
          /* 获取用户信息 */
          this.props.onSaveState({
            formData,
            masterConfig: formData[0],
            formRoute,
            masterData: userLogin
          });
        }
      }
    } else {
      message.error(configReturn.msg);
    }
  };

  handleCompanysSelect = (value, option) => {
    // 选择公司
    const sParentId = option.props["data-parentid"];
    this.setState({
      sParentId,
      sId: value
    });
  };

  handleClose = () => {
    // eslint-disable-next-line prefer-destructuring
    const userAgent = navigator.userAgent;
    if (
      userAgent.indexOf("Firefox") !== -1 ||
      userAgent.indexOf("Chrome") !== -1
    ) {
      window.location.href = "about:blank";
    } else {
      window.opener = null;
      window.open(" ", "_self", " ");
      window.close();
    }
  };
  handleSubmit = e => {
    e.preventDefault();
    // eslint-disable-next-line no-unused-vars
    this.props.form.validateFields(async (err, values) => {
      if (!err) {
        this.setState({ loginLoading: true });
        const { masterData } = this.props;
        const { sParentId, sId } = this.state;
        const value = {};
        value.userId = commonUtils.isNotEmptyObject(masterData)
          ? masterData.sUserId
          : "";
        value.username = commonUtils.isNotEmptyObject(masterData)
          ? masterData.sUserNo
          : "";
        value.userShowName = commonUtils.isNotEmptyObject(masterData)
          ? masterData.sUserName
          : "";
        value.password = commonUtils.isNotEmptyObject(masterData)
          ? masterData.sPassWord
          : "";
        value.sParentId = commonUtils.isNotEmptyObject(sParentId)
          ? sParentId
          : "";
        value.sId = commonUtils.isNotEmptyObject(sId) ? sId : "";
        value.sTeamId = commonUtils.isNotEmptyObject(masterData)
          ? masterData.sTeamId
          : ""; /* sTeamId 班组id */
        value.sTeamName = commonUtils.isNotEmptyObject(masterData)
          ? masterData.sTeamName
          : ""; /* sTeamName 班组名称 */
        value.sMachineId = commonUtils.isNotEmptyObject(masterData)
          ? masterData.sMachineId
          : ""; /* sMachineId 机台id */
        value.sMachineName = commonUtils.isNotEmptyObject(masterData)
          ? masterData.sMachineName
          : ""; /* sMachineName 机台名称 */
        value.iPlcNo = commonUtils.isNotEmptyObject(masterData)
          ? masterData.iPlcNo !== undefined
            ? masterData.iPlcNo
            : 0
          : 0; /* sMachineName 机台名称 */
        let bflag = false;
        if (commonUtils.isEmptyObject(value.username)) {
          message.error("请选择用户！");
          bflag = true;
        } else if (commonUtils.isEmptyObject(value.password)) {
          message.error("请输入密码！");
          bflag = true;
        } else if (commonUtils.isEmptyObject(value.sTeamId)) {
          message.error("请选择班组！");
          bflag = true;
        } else if (commonUtils.isEmptyObject(value.sMachineId)) {
          message.error("请选择机台！");
          bflag = true;
        }
        if (bflag) {
          this.setState({ loginLoading: false });
          return;
        }
        const url = `${commonConfig.server_host}userOeelogin/${
          value.sParentId
        }/${value.sId}/${value.sTeamId}/${value.sMachineId}`;
        const dataReturn = (await commonServices.postValueService(
          null,
          value,
          url
        )).data;
        if (dataReturn.code === 1) {
          if (commonUtils.isNotEmptyObject(dataReturn.msg)) {
            message.warning(dataReturn.msg, 6);
          }
          const {
            token,
            gdslogininfo: userinfo,
            systemData,
            commonConst,
            rxtx,
            plcMachinedata,
            statusData,
            managementData,
            fileData
          } = dataReturn.dataset.rows[0];
          const decimals = {};
          if (systemData !== undefined) {
            const dNetPrice = systemData.filter(
              item => item.sName === "NetPrice"
            )[0];
            const dNetMoney = systemData.filter(
              item => item.sName === "NetMoney"
            )[0];
            const dNumAlign = systemData.filter(
              item => item.sName === "CkxNumAlign"
            )[0];
            decimals.dNetPrice =
              dNetPrice !== undefined && dNetPrice.sValue !== undefined
                ? dNetPrice.sValue * 1
                : 6;
            decimals.dNetMoney =
              dNetMoney !== undefined && dNetMoney.sValue !== undefined
                ? dNetMoney.sValue * 1
                : 6;
            decimals.dNumAlign =
              dNumAlign !== undefined && dNumAlign.sValue !== undefined
                ? dNumAlign.sValue
                : 0;
          }
          /* 登录记住信息 */
          localStorage.setItem(
            `${commonConfig.prefix}userlogin`,
            JSON.stringify(masterData)
          ); /* 用户信息对象 */
          /* 获取开工人员信息 */
          this.handleGetTeamEmployee(value.sTeamId, token);
          localStorage.setItem(
            `${commonConfig.prefix}plcMachinedata_${value.sMachineId}`,
            JSON.stringify(plcMachinedata)
          ); /* 主页masterData */
          localStorage.setItem(
            `${commonConfig.prefix}statusData_${value.sMachineId}`,
            JSON.stringify(statusData)
          ); /* 主页状态 */
          this.props.onLogin({
            token,
            systemData,
            rxtx,
            commonConst,
            userinfo,
            decimals,
            dateFormat: commonFunc.getDateFormat(systemData),
            sTeamNameSId: value.sTeamId,
            sTeamNameSName: value.sTeamName,
            sMachineNameStr: value.sMachineName,
            sMachineNameSId: value.sMachineId,
            iPlcNo: value.iPlcNo,
            managementData,
            fileData
          });
          this.setState({ loginLoading: false });
        } else {
          message.error(dataReturn.msg);
          this.setState({ loginLoading: false });
        }
      }
    });
  };
  handleInputOnClick = e => {
    // 判断是否是oee系统，否则不显示虚拟键盘
    if (VirtualKeyboard.isKeyBoard()) {
      // 关闭上次键盘
      VirtualKeyboard.closeKeyboard();
    }
    const keyboardValue = {};
    keyboardValue.value = "";
    VirtualKeyboard.showKeyboardSetState(keyboardValue, this, e);
  };
  handleKeyeBoardValueChange = (e, value) => {
    // e为输入框得节点， value为软键盘得输入值
    document.getElementById(`${e.props.id}`).value = value;
  };
  handleGetTeamEmployee = async (sTeamId, token) => {
    const url = `${
      commonConfig.server_host
    }oee/getTeamEmployee/${sTeamId}?sModelsId=100`;
    const dataReturn = (await commonServices.getService(token, url)).data;
    if (dataReturn.code === 1) {
      const returnData = dataReturn.dataset.rows;
      localStorage.setItem(
        `${commonConfig.prefix}oeeEmployeeData_${sTeamId}`,
        JSON.stringify(returnData)
      );
    } else {
      /*   失败   */
      message.error(dataReturn.msg);
    }
  };
  handleIdentifySuccess = async () => {
    const { masterData } = this.props;
    const value = {
      userId: "16896711860005687966941155019000",
      username: "zhangz",
      userShowName: "zhangz",
      password: "666666",
      sParentId: "1111111111",
      sId: "1111111111",
      sTeamId: "15934065060008675561079036953000",
      sTeamName: "XL105-6-6白班",
      sMachineId: "15972958020009304223031307310000",
      sMachineName: "海德堡XL105-6-6",
      iPlcNo: 0
    };
    const url = `${commonConfig.server_host}userOeelogin/${value.sParentId}/${
      value.sId
    }/${value.sTeamId}/${value.sMachineId}`;
    const dataReturn = (await commonServices.postValueService(null, value, url))
      .data;
    if (dataReturn.code === 1) {
      if (commonUtils.isNotEmptyObject(dataReturn.msg)) {
        message.warning(dataReturn.msg, 6);
      }
      const {
        token,
        gdslogininfo: userinfo,
        systemData,
        commonConst,
        rxtx,
        plcMachinedata,
        statusData,
        managementData,
        fileData
      } = dataReturn.dataset.rows[0];
      const decimals = {};
      if (systemData !== undefined) {
        const dNetPrice = systemData.filter(
          item => item.sName === "NetPrice"
        )[0];
        const dNetMoney = systemData.filter(
          item => item.sName === "NetMoney"
        )[0];
        const dNumAlign = systemData.filter(
          item => item.sName === "CkxNumAlign"
        )[0];
        decimals.dNetPrice =
          dNetPrice !== undefined && dNetPrice.sValue !== undefined
            ? dNetPrice.sValue * 1
            : 6;
        decimals.dNetMoney =
          dNetMoney !== undefined && dNetMoney.sValue !== undefined
            ? dNetMoney.sValue * 1
            : 6;
        decimals.dNumAlign =
          dNumAlign !== undefined && dNumAlign.sValue !== undefined
            ? dNumAlign.sValue
            : 0;
      }
      /* 登录记住信息 */
      localStorage.setItem(
        `${commonConfig.prefix}userlogin`,
        JSON.stringify(masterData)
      ); /* 用户信息对象 */
      /* 获取开工人员信息 */
      this.handleGetTeamEmployee(value.sTeamId, token);
      localStorage.setItem(
        `${commonConfig.prefix}plcMachinedata_${value.sMachineId}`,
        JSON.stringify(plcMachinedata)
      ); /* 主页masterData */
      localStorage.setItem(
        `${commonConfig.prefix}statusData_${value.sMachineId}`,
        JSON.stringify(statusData)
      ); /* 主页状态 */
      this.props.onLogin({
        token,
        systemData,
        rxtx,
        commonConst,
        userinfo,
        decimals,
        dateFormat: commonFunc.getDateFormat(systemData),
        sTeamNameSId: value.sTeamId,
        sTeamNameSName: value.sTeamName,
        sMachineNameStr: value.sMachineName,
        sMachineNameSId: value.sMachineId,
        iPlcNo: value.iPlcNo,
        managementData,
        fileData
      });
      this.setState({ loginLoading: false });
    } else {
      message.error(dataReturn.msg);
      this.setState({ loginLoading: false });
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { companys, sModelsId, sParentId, sId, loginType } = this.state;
    const { masterConfig } = this.props;
    let { masterData } = this.props;
    const sLanguage = "sChinese";
    // if (sTeamName !== null && sTeamName.length > 0) {
    //   sLanguage = sTeamName[0].sLanguage !== null ? sTeamName[0].sLanguage.toString() : sLanguage;
    // }
    const { loginLoading } = this.state;
    const oeeTitle =
      sLanguage === "sChinese"
        ? "MES全局设备操作平台"
        : sLanguage === "sEnglish"
          ? "MES Global Device Operating Platform"
          : "MES全局設備操作平臺"; /* OEE全局设备操作平台 */
    const pleaseInputUserName =
      sLanguage === "sChinese"
        ? "用户名"
        : sLanguage === "sEnglish"
          ? "UserName"
          : "用戶名"; /* 用戶名 */
    const pleaseInputPassword =
      sLanguage === "sChinese"
        ? "密码"
        : sLanguage === "sEnglish"
          ? "Password"
          : "密碼"; /* 密码 */
    const teamName =
      sLanguage === "sChinese"
        ? "班组名称"
        : sLanguage === "sEnglish"
          ? "Team Name"
          : "班組名稱"; /* 班组名称 */
    const equipmentName =
      sLanguage === "sChinese"
        ? "设备名称"
        : sLanguage === "sEnglish"
          ? "Equipment Name"
          : "設備名稱"; /* 班组名称 */
    const btnLogin =
      sLanguage === "sChinese"
        ? "登 录"
        : sLanguage === "sEnglish"
          ? "Login"
          : "登 錄"; /* 登 陆 */
    const btnClose =
      sLanguage === "sChinese"
        ? "关 闭"
        : sLanguage === "sEnglish"
          ? "Close"
          : "關 閉"; /* 关 闭 */
    const btnFace =
      sLanguage === "sChinese"
        ? "人 脸 登 录"
        : sLanguage === "sEnglish"
          ? "FaceLogin"
          : "人 臉 登 錄"; /* 人 脸 */
    const btnNormal =
      sLanguage === "sChinese"
        ? "普 通 登 录"
        : sLanguage === "sEnglish"
          ? "CommonLogin"
          : "普 通 人 臉"; /* 普 通 */

    const chooseBranchCompany =
      sLanguage === "sChinese"
        ? "请选择分公司名称"
        : sLanguage === "sEnglish"
          ? "Please select branch name"
          : "請選擇分公司名稱"; /* 请选择分公司名称 */
    const dropdownStyle = {
      fontSize: "1.3rem"
    };
    let loginConfigs = [];
    if (
      commonUtils.isNotEmptyObject(masterConfig) &&
      commonUtils.isNotEmptyArr(masterConfig.gdsconfigformslave)
    ) {
      loginConfigs = masterConfig.gdsconfigformslave.filter(
        item => item.bVisible && item.sName
      );
    }
    const companysId = commonUtils.isNotEmptyObject(sId)
      ? sId
      : ""; /* 公司主键 */
    if (commonUtils.isEmptyObject(masterData)) {
      masterData = {};
    }
    masterData.sBrandsId = sParentId;
    masterData.sSubsidiaryId = sId;
    const companysoptions = companys.map(com => (
      <Option
        key={com.sId}
        data-parentid={com.sParentId}
        className={styles.loginOption}
      >
        {com.sName}
      </Option>
    ));
    return (
      <div className={styles.containers} id="containers">
        <div className={styles.wraper}>
          <div className={styles.logo}>
            <img src={LoginIcon} className={styles.logoImg} alt="login" />
            <span>{oeeTitle}</span>
          </div>
          <div className="login">
            <div className={styles.loginFormCenter}>
              <Form onSubmit={this.handleSubmit} className={styles.loginForm}>
                {loginType === "face" ? (
                  <div className={styles.loginFace}>
                    <div>
                      <FaceDetect
                        loginAfterInit
                        onIdentifySuccess={this.handleIdentifySuccess}
                        actionType="identifyFace"
                      />
                    </div>
                  </div>
                ) : (
                  <div className={styles.loginMiddle}>
                    <FormItem className={styles.loginTip}>
                      <div className={styles.loginSelect}>
                        <i>
                          {" "}
                          <img src={company} alt="" />
                        </i>
                        {getFieldDecorator("companys", {
                          initialValue: commonUtils.isNotEmptyObject(companysId)
                            ? companysId
                            : undefined,
                          rules: [
                            { required: true, message: chooseBranchCompany }
                          ]
                        })(
                          <Select
                            placeholder={chooseBranchCompany}
                            dropdownStyle={dropdownStyle}
                            onSelect={this.handleCompanysSelect}
                          >
                            {companysoptions}
                          </Select>
                        )}
                      </div>
                    </FormItem>
                    <div>
                      <input
                        type="text"
                        style={{
                          height: "0",
                          width: "0",
                          border: "0",
                          position: "absolute",
                          zIndex: -1
                        }}
                      />
                    </div>
                    <Row
                      type="flex"
                      style={{ height: "auto", overflow: "auto" }}
                    >
                      {commonUtils.isNotEmptyArr(loginConfigs)
                        ? loginConfigs.map(child => {
                            const sMemo = child.sName
                              .toLowerCase()
                              .endsWith("memo");
                            // const iColValue = sMemo ? 21 : child.iColValue * 6; /* 跨度 */
                            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 = true;
                            if (child.iTag === 1) {
                              enabledNew = false;
                            } else if (child.iTag === 3) {
                              enabledNew = true;
                            }
                            /* 加载placeholder信息 */
                            if (child.sName === "sUserName") {
                              child.placeholder = pleaseInputUserName;
                            } else if (child.sName === "sPassWord") {
                              child.placeholder = pleaseInputPassword;
                            } else if (child.sName === "sTeamName") {
                              child.placeholder = teamName;
                            } else if (child.sName === "sMachineName") {
                              child.placeholder = equipmentName;
                            }
                            const showTypeProps = {
                              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,
                              formItemLayout: sMemo ? formItemLayout : {},
                              textArea: sMemo,
                              enabled: enabledNew,
                              dataValue: masterData[child.sName],
                              bTable: false,
                              onFilterDropDownData: this.props
                                .onFilterDropDownData,
                              onSaveState: this.props.onSaveState,
                              bPassWord: child.sName === "sPassWord",
                              style: { backgroundColor: "#eaeaea" }
                            };
                            return (
                              <Col
                                key={child.sId}
                                span={iColValue}
                                order={iOrder}
                                style={{
                                  display: sFormulaMemo,
                                  position: "relative"
                                }}
                              >
                                <FormItem className={styles.loginTip}>
                                  <div className={styles.loginSelect}>
                                    {child.sName === "sUserName" ? (
                                      <div>
                                        <UserOutlined
                                          className={styles.loginIconSvg}
                                        />
                                        <div className={styles.faceReg}>
                                          {" "}
                                          <i>
                                            {" "}
                                            <img src={faceReg} alt="" />
                                          </i>
                                        </div>
                                      </div>
                                    ) : child.sName === "sPassWord" ? (
                                      <LockOutlined
                                        className={styles.loginIconSvg}
                                      />
                                    ) : child.sName === "sTeamName" ? (
                                      <i>
                                        {" "}
                                        <img src={team} alt="" />
                                      </i>
                                    ) : (
                                      <i>
                                        {" "}
                                        <img src={setting} alt="" />
                                      </i>
                                    )}
                                    <ShowType {...showTypeProps} />
                                  </div>
                                </FormItem>
                              </Col>
                            );
                          })
                        : ""}
                    </Row>
                  </div>
                )}
                <div>
                  <input
                    type="password"
                    style={{
                      height: "0",
                      width: "0",
                      border: "0",
                      position: "absolute",
                      zIndex: -1
                    }}
                  />
                </div>
                <FormItem className="loginBottom">
                  <Button
                    type="primary"
                    htmlType="submit"
                    className="loginSubmit"
                    loading={loginLoading}
                    style={{
                      visibility: loginType === "face" ? "hidden" : "visible"
                    }}
                  >
                    {btnLogin}
                  </Button>
                  <Button
                    type="primary"
                    className="loginSubmit"
                    loading={loginLoading}
                    onClick={() => {
                      const loginTypeNew =
                        loginType === "normal" ? "face" : "normal";
                      this.setState({ loginType: loginTypeNew });
                    }}
                  >
                    {loginType === "face" ? btnNormal : btnFace}
                  </Button>
                  <Button
                    type="primary"
                    className="loginColse"
                    onClick={this.handleClose}
                    style={{
                      visibility: loginType === "face" ? "hidden" : "visible"
                    }}
                  >
                    {btnClose}
                  </Button>
                </FormItem>
              </Form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const LoginFormComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData, masterConfig } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form, masterConfig);
    return obj;
  }
})(LoginForm);

export default CommonBase(LoginFormComponent);