/* eslint-disable no-undef,no-param-reassign,react/no-unused-state,space-infix-ops */
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';

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,
    };
  }
  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);
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const {
      companys, sModelsId, sParentId, sId,
    } = 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' ? 'OEE全局设备操作平台' : (sLanguage === 'sEnglish' ? 'OEE Global Device Operating Platform' : 'OEE全局設備操作平臺');/* 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 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}>
                <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}>
                    {btnLogin}
                  </Button>
                  <Button type="primary" className="loginColse" onClick={this.handleClose} >
                    {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);