import React, { useEffect, useState, useMemo, useRef } from "react";
import { cloneDeep } from "lodash";
import { Form, Button, message } from "antd";

import * as commonConfig from "@/utils/config";
import * as commonServices from "@/services/services";
import * as commonUtils from "@/utils/utils";
import * as commonFunc from "@/components/Common/commonFunc";
import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";
import ShowType from "@/components/Common/CommonComponent";
import FaceDetect from "@/components/FaceDetect";

import styles from "./index.less";
import { Modal } from "antd";

const initValue = {
  sModelsId: "16034339700006038392152714521000"
};

// 事件层
const useLoginEvent = props => {
  const [companys, setCompanys] = useState([]); // 添加这行
  // 清除浏览器缓存
  useEffect(() => {
    const ipAddress = localStorage.ipAddress;
    const tempFaceData = localStorage.tempFaceData;
    props.dispatch({
      type: "app/saveCurrentMesPane",
      payload: {}
    });
    sessionStorage.clear();
    // localStorage.clear();
    const masterValue = localStorage.getItem(`${commonConfig.prefix}masterData`);
    localStorage.clear();
    localStorage.setItem(`${commonConfig.prefix}masterData`, masterValue);

    ipAddress && localStorage.setItem("ipAddress", ipAddress);
    tempFaceData && localStorage.setItem("tempFaceData", tempFaceData);
  }, []);
  // 获取登录配置
  const [loginConfig, setLoginConfig] = useState([]);
  useEffect(async () => {
    const { sModelsId } = initValue;
    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)) {
          setLoginConfig(formData[0]);
        }
      }
    } else {
      message.error(configReturn.msg);
    }
  }, []);

  // 根据登录配置过滤登录页字段
  const [configs, setConfigs] = useState([]);
  useEffect(
    () => {
      if (!commonUtils.isNotEmptyObject(loginConfig)) {
        return;
      }

      const { gdsconfigformslave } = loginConfig;
      if (!commonUtils.isNotEmptyArr(gdsconfigformslave)) {
        return;
      }

      const tempConfig = gdsconfigformslave.filter(
        item => item.bVisible && item.sName
      );
      setConfigs(tempConfig);
    },
    [loginConfig]
  );

  // 获取公司信息
  useEffect(async () => {
    const companysConfigUrl = `${commonConfig.server_host
      }sysbrands/getSysbrands`;
    const companysConfigReturn = (await commonServices.getService(
      null,
      companysConfigUrl
    )).data;
    if (companysConfigReturn.code === 1) {
      const rows = companysConfigReturn.dataset.rows;
      const { sParentId, sId } = rows[0];
      localStorage.setItem(
        "mesSysbrands",
        JSON.stringify({ sBrandsId: sParentId, sSubsidiaryId: sId })
      );
      /* 测试英文版本 默认英文 */
      // if(companysConfigReturn.dataset.rows) {
      //   companysConfigReturn.dataset.rows[0].sLanguage = 'sEnglish';
      // }
      setCompanys(companysConfigReturn.dataset.rows); // 修改这行2

      props.onSaveState({
        masterData: { sBrandsId: sParentId, sSubsidiaryId: sId }
      });
    } else {
      message.error(companysConfigReturn.msg);
    }
  }, []);

  // 获取开工人员信息
  const 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);
    }
  };

  const handleUserlogin = param => {
    const { dispatch } = props;
    dispatch({
      type: "loginMes/login",
      payload: { ...param, dispatch }
    });
  };

  // 登录事件
  const handleSubmit = async ({ faceLoginValue = {}, sEmployeeName, sEmployeeNo, sUserId } = {}, configsData) => {
    const bFaceLogin = commonUtils.isNotEmptyObject(faceLoginValue);
    let masterNewData = {}
    let dataReturn = {};
    if (!bFaceLogin) {
      // 账号密码登录
      const { masterData, companys } = props;
      const masterLocal = commonUtils.convertStrToObj(
        localStorage.getItem(`${commonConfig.prefix}masterData`)
      )

      if (masterLocal) {
        masterNewData = {
          ...masterLocal,
          ...masterData,
        }
        if (sEmployeeNo) {
          masterNewData = {
            ...masterNewData,
            sEmployeeNo,
            sUserName:sEmployeeName,
            sUserId
          }
        }
      } else {
        masterNewData = {
          ...masterData
        }
      }
      // 新增方法：根据sName过滤configs
      const getConfigByName = (name, configs, sLanguage) => {
        const configObj = configs?.find(item => item.sName === name) || {};
        const showName = sLanguage === 'sChinese' ? configObj.sChinese : sLanguage === 'sEnglish' ? configObj.sEnglish :
          sLanguage === 'sBig5' ? configObj.sBig5 : configObj.sChinese;
        return showName;
      };
      const sLanguage = companys ? commonUtils.isNotEmptyArr(companys) ? companys[0].sLanguage : 'sEnglish' : 'sChinese';

      const pleaseSelectUser = getConfigByName('pleaseSelectUser', configsData, sLanguage);

      const pleaseInputPassword = getConfigByName('pleaseInputPassword', configsData, sLanguage);

      const pleaseSelectTeam = getConfigByName('pleaseSelectTeam', configsData, sLanguage);

      const pleaseselectShift = getConfigByName('pleaseselectShift', configsData, sLanguage);

      const pleaseSelectMachine = getConfigByName('pleaseSelectMachine', configsData, sLanguage);


      const {
        sUserId: userId,
        sUserNo: username,
        sUserName: userShowName,
        sPassWord: password,
        sBrandsId: sParentId,
        sSubsidiaryId: sId,
        sTeamId,
        sTeamName,
        sMachineId,
        sMachineName,
        iPlcNo,
        sShift
      } = masterNewData;

      let value = {
        userId,
        // username,
        userShowName,
        password,
        sParentId,
        sId,
        sTeamId,
        sTeamName,
        sMachineId,
        sMachineName,
        iPlcNo,
        sShift,
        sEmployeeNo
      };

      if (!sEmployeeNo) {
        value.username = username;
      }

      if (!username) {
        message.error(pleaseSelectUser);
        return;
      }
      if (!sEmployeeNo && !password) {
        message.error(pleaseInputPassword);
        return;
      }
      // if (sShift === undefined) {
      //   message.error(pleaseselectShift);
      //   return;
      // }
      if (!sTeamId) {
        message.error(pleaseSelectTeam);
        return;
      }
      if (!sMachineId) {
        message.error(pleaseSelectMachine);
        return;
      }

      const url = `${commonConfig.server_host
        }userOeelogin/${sParentId}/${sId}/${sTeamId}/${sMachineId}`;
      dataReturn = (await commonServices.postValueService(null, value, url))
        .data;
    } else {
      // 人脸登录
      const { sBrandsId, sSubsidiaryId, sEmployeeNo } = faceLoginValue;
      const url = `${commonConfig.server_host
        }userOeelogin/${sBrandsId}/${sSubsidiaryId}`;
      const value = { sEmployeeNo, sParentId: sBrandsId, sId: sSubsidiaryId };
      dataReturn = (await commonServices.postValueService(null, value, url))
        .data;
    }

    if (dataReturn.code !== 1) {
      message.error(dataReturn.msg);
      return;
    }

    if (commonUtils.isNotEmptyObject(dataReturn.msg)) {
      message.warning(dataReturn.msg, 6);
    }

    const {
      token,
      gdslogininfo = {},
      teamInfo = {},
      systemData,
      commonConst,
      rxtx,
      plcMachinedata,
      statusData,
      managementData,
      fileData,
      bDelayedOvertime,
      sJzPicturePath
    } = dataReturn.dataset.rows[0];

    gdslogininfo.bDelayedOvertime = bDelayedOvertime;
    const userinfo = { ...teamInfo, ...gdslogininfo, sJzPicturePath };
    const {
      sTeamShift: sShift1,
      sShift: sShift2,
      sTeamId,
      sTeamNo,
      sMachineGuid,
      sMachineId: sMachineIdOld,
      sMachineName,
      iPlcNo = ""
    } = userinfo;

    const sShift = sShift2 || sShift1 || "1";

    userinfo.sShift = sShift;
    userinfo.sUserNameBak = userinfo.sUserName;
    userinfo.sUserNoBak = userinfo.sUserNo;

    const sMachineId = sMachineGuid || sMachineIdOld;

    // 数字保留位数
    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 && dNetPrice.sValue ? dNetPrice.sValue * 1 : 6;
      decimals.dNetMoney =
        dNetMoney && dNetMoney.sValue ? dNetMoney.sValue * 1 : 6;
      decimals.dNumAlign = dNumAlign && dNumAlign.sValue ? dNumAlign.sValue : 0;
    }

    handleGetTeamEmployee(sTeamId, token);

    // 记住登录信息
    localStorage.setItem(
      `${commonConfig.prefix}userlogin`,
      JSON.stringify(userinfo)
    );
    localStorage.setItem(
      `${commonConfig.prefix}plcMachinedata_${sMachineId}`,
      JSON.stringify(plcMachinedata)
    );
    localStorage.setItem(
      `${commonConfig.prefix}statusData_${sMachineId}`,
      JSON.stringify(statusData)
    );
    const { masterData = {} } = props;
    const storeMasterData = JSON.parse(JSON.stringify(masterNewData));
    const newMasterData = {
      sUserId:storeMasterData.sUserId,
      sUserName:storeMasterData.sUserName,
      sUserNo:storeMasterData.sUserNo,
    }
    localStorage.setItem(
      `${commonConfig.prefix}masterData`,
      JSON.stringify(newMasterData)
    )

    handleUserlogin({
      token,
      systemData,
      rxtx,
      commonConst,
      userinfo,
      decimals,
      dateFormat: commonFunc.getDateFormat(systemData),
      sTeamNameSId: sTeamId,
      sTeamNameSName: sTeamNo,
      sMachineNameStr: sMachineName,
      sMachineNameSId: sMachineId,
      iPlcNo,
      managementData,
      fileData,
      sShift
    });
  };

  // 人脸登录
  const handleFaceLogin = () => {
    props.onSaveState({
      faceLoginModalVisible: true
    });
  };

  // 人脸登录成功回调
  const handleIdentifySuccess = e => {
    const faceLoginValue = e.dataset.rows[0];
    props.onSaveState({
      faceLoginModalVisible: false,
      faceLoginValue,
      faceLoginAfterModalVisible: true
    });
  };


  return {
    ...props,
    companys, // 确保返回companys
    configs,
    onSubmit: handleSubmit,
    onFaceLogin: handleFaceLogin,
    onIdentifySuccess: handleIdentifySuccess
  };
};

// 遍历登录文本组件
const handleGetFormItem = (props, item, isHuge) => {

  const { sModelsId } = initValue;
  const { masterData = {}, companys, faceLoginValue } = props;

  let userInfo = commonUtils.convertStrToObj(
    localStorage.getItem(`${commonConfig.prefix}masterData`)
  );
  if (faceLoginValue) {
    userInfo = {
      ...userInfo,
      sUserName: faceLoginValue.sEmployeeName,
      sUserNo: faceLoginValue.sEmployeeNo,
      sUserId: faceLoginValue.sUserId
    }
  }
  let masterNewData = masterData
  if (userInfo) {
    masterNewData = {
      ...userInfo,
      ...masterData,
    }
  }


  const sLanguage = commonUtils.isNotEmptyArr(companys) && companys[0].sLanguage || 'sEnglish';
  let enabledNew = true;
  if (item.sName?.includes('please') || item.sName?.includes('请')) {
    return;
  }
  if (item.iTag === 1) {
    enabledNew = false;
  } else if (item.iTag === 3) {
    enabledNew = true;
  }

  const showTypeProps = {
    bNewForm: true,
    iColValue: 24,
    record: masterNewData,
    name: "master",
    formId: sModelsId,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getFloatNum: props.getFloatNum,
    getDateFormat: props.getDateFormat,
    onChange: (...args) => {
      const [, sFieldsName, value = {}] = args;
      if (
        sFieldsName === "sUserName" &&
        value.sMachineName &&
        (value.sMachineName.indexOf("切纸") > -1 ||
          value.sMachineName.toLowerCase().indexOf("cu") > -1)
      ) {
        args[2].sMachineName = "";
        args[2].sMachineId = "";
      }
      props.onChange(...args);
    },
    showConfig: item,
    formItemLayout: { labelCol: { span: 0 }, wrapperCol: { span: 24 } },
    textArea: false,
    enabled: enabledNew,
    dataValue: masterNewData[item.sName],
    bTable: item.sName !== "sPassWord",
    bViewTable: true,
    onFilterDropDownData: props.onFilterDropDownData,
    onSaveState: props.onSaveState,
    bPassWord: item.sName === "sPassWord",
    style: { backgroundColor: "#eaeaea" },
    dropdownClassName: isHuge ? 'huge-font-option' : ''
  };

  const showName = sLanguage === 'sChinese' ? item.sChinese : sLanguage === 'sEnglish' ? item.sEnglish
    : item.sBig5;
  return (
    <Form.Item label={showName} key={item.sName}>
      <ShowType {...showTypeProps} />
    </Form.Item>
  );
};

// 主入口
const login = baseProps => {
  const props = useLoginEvent(useCommonBase(baseProps));
  const { configs, app, companys } = props;
  const sysObj = commonUtils.isNotEmptyArr(companys) ? companys[0] : [];
  const sLanguage = sysObj?.sLanguage || 'sEnglish';

  const oeeTitle =
    sLanguage === "sChinese" ? "小羚羊生产执行系统" : sLanguage === "sEnglish" ? "Manufacturing Execution System" : "小羚羊生產執行系統";

  const bannerTitle =
    sLanguage === "sChinese" ? "小羚羊生产执行系统" : sLanguage === "sEnglish" ? "XLY Manufacturing Execution System" : "小羚羊生產執行系統";

  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 [form] = Form.useForm();

  return (
    <div className={styles.login}>
      <div className="loginTitle">
        <div className="loginTitle1">Enterprise Business Capability MES</div>
        <div className="loginTitle2">{bannerTitle}</div>
        <div className="loginTitle3">EBC-MES</div>
      </div>
      <div className="loginBox">
        <div className="logo">{oeeTitle}</div>
        <Form form={form} layout="horizontal" size="large" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {configs.map(item => handleGetFormItem(props, item))}
        </Form>
        <div style={{ padding: '0 11.76% 0 11.76%' }}>
          <Button
            className="submitBtn"
            type="primary"
            block
            onClick={() => {
              props.onSubmit({}, configs);
            }}
          >
            {btnLogin}
          </Button>
        </div>
        <div className="faceLogin">
          <div
            className="faceImg"
            onClick={() => {
              props.onFaceLogin();
            }}
          />
          <div
            className="text"
            onClick={() => {
              props.onFaceLogin();
            }}
          >
            {btnFace}
          </div>
        </div>
        {/* <div style={{ width: "100%", height: 60 }} /> */}
      </div>
      <FaceLoginModal {...props} />
      <FaceLoginAfterModal {...props} />
    </div>
  );
};

// 人脸登录弹窗
const FaceLoginModal = props => {
  const { faceLoginModalVisible } = props;

  if (!faceLoginModalVisible) return "";
  const { companys } = props;
  const sLanguage = commonUtils.isNotEmptyArr(companys) ? companys[0].sLanguage : 'English';
  const btnFace = sLanguage === "sChinese" ? "人 脸 登 录" : sLanguage === "sEnglish" ? "FaceLogin" : "人 臉 登 錄"; /* 人 脸 */

  return (
    <Modal
      title={btnFace}
      open={faceLoginModalVisible}
      width={800}
      height={800}
      className={styles.xlyFaceAuthLogin}
      style={{
        top: "calc(50vh - 400px)"
      }}
      footer={null}
      onCancel={() => {
        props.onSaveState({
          faceLoginModalVisible: false
        });
      }}
    >
      <div className={styles.faceLogin}>
        <FaceDetect
          loginAfterInit
          onIdentifySuccess={props.onIdentifySuccess}
          actionType="identifyFace"
        />
      </div>
    </Modal>
  );
};

// 人脸弹窗后选择其他内容
const FaceLoginAfterModal = props => {
  const { faceLoginAfterModalVisible, companys } = props;

  if (!faceLoginAfterModalVisible) return "";
  const sLanguage = commonUtils.isNotEmptyArr(companys) ? companys[0].sLanguage : 'English';
  const sLoginConfirm = sLanguage === "sChinese" ? "登陆信息确认" : sLanguage === "sEnglish" ? "Login Information Confirmation" : "登陸信息確認"; /* 人 脸 */
  const btnConfirm = sLanguage === "sChinese" ? "确认" : sLanguage === "sEnglish" ? "Confirm" : "確認"; /* 人 脸 */
  const btnCancel = sLanguage === "sChinese" ? "取消" : sLanguage === "sEnglish" ? "Cancel" : "取消"; /* 取消 */


  const {
    configs: configOld = [],
    masterData = {},
    faceLoginValue = {}
  } = props;
  const { sModelsId } = initValue;
  const { name, sParentId, sEmployeeNo, sEmployeeName, sUserId } = faceLoginValue;

  const configs = cloneDeep(configOld);
  const showConfig = configs.find(item => item.sName === "sUserName");
  showConfig.iTag = 1;

  useEffect(async () => {
    let returnData =
      (await props.getSqlDropDownData(
        sModelsId,
        "master",
        showConfig,
        masterData,
        name,
        1
      )) || {};

    if (commonUtils.isEmptyObject(returnData.dropDownData)) {
      returnData =
        (await props.getSqlDropDownData(
          sModelsId,
          "master",
          showConfig,
          masterData,
          sEmployeeNo,
          1
        )) || {};
    }

    const { dropDownData = [] } = returnData;

    let userData = {};
    const dropDownDataFilter = dropDownData.filter(
      item => item.sUserId === sParentId
    );
    if (dropDownDataFilter.length === 1) {
      userData = dropDownDataFilter[0];
    } else if (dropDownDataFilter.length > 1) {
      userData = dropDownDataFilter.find(item => item.sUserId === sParentId);
    }
    props.onChange("master", "sUserName", userData, undefined, [userData]);
  }, []);

  const [form] = Form.useForm();

  return (
    <Modal
      title={sLoginConfirm}
      open={faceLoginAfterModalVisible}
      keyboard={false}
      maskClosable={false}
      width={'60%'}
      height={'80%'}
      className={styles.xlyFaceAuthLogin}
      style={{
        top: "10%",
        zoom: 1.5
      }}
      footer={
        <>
          <Button
            type="primary"
            size="large"
            onClick={() => {
              props.onSubmit({ sEmployeeName, sEmployeeNo, sUserId });
            }}
          >
            {btnConfirm}
          </Button>
          <Button
            size="large"
            onClick={() => {
              props.onSaveState({
                masterData: {
                  sBrandsId: masterData.sBrandsId,
                  sSubsidiaryId: masterData.sSubsidiaryId
                },
                faceLoginAfterModalVisible: false
              });
            }}
          >
            {btnCancel}
          </Button>
        </>
      }
      onCancel={() => {
        props.onSaveState({
          masterData: {
            sBrandsId: masterData.sBrandsId,
            sSubsidiaryId: masterData.sSubsidiaryId
          },
          faceLoginAfterModalVisible: false
        });
      }}
    >
      <div className={styles.faceLogin1}>
        <Form form={form} layout="horizontal" size="large" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
          {configs
            .filter(item => item.sName !== "sPassWord")
            .map(item => handleGetFormItem(props, item, true))}
        </Form>
      </div>
    </Modal>
  );
};

export default login;