import React, { useEffect, useState } 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 => {
  // 清除浏览器缓存
  useEffect(() => {
    const ipAddress = localStorage.ipAddress;
    const tempFaceData = localStorage.tempFaceData;
    props.dispatch({
      type: "app/saveCurrentMesPane",
      payload: {}
    });
    sessionStorage.clear();
    localStorage.clear();
    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 })
      );
      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 = {}, sEmployeeNo } = {}) => {
    const bFaceLogin = commonUtils.isNotEmptyObject(faceLoginValue);

    let dataReturn = {};
    if (!bFaceLogin) {
      // 账号密码登录
      const { masterData } = props;

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

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

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

      if (!username) {
        message.error("请选择用户！");
        return;
      }
      if (!sEmployeeNo && !password) {
        message.error("请输入密码！");
        return;
      }
      if (sShift === undefined) {
        message.error("请选择班次！");
        return;
      }
      if (!sTeamId) {
        message.error("请选择班组！");
        return;
      }
      if (!sMachineId) {
        message.error("请选择机台！");
        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
    } = dataReturn.dataset.rows[0];

    gdslogininfo.bDelayedOvertime = bDelayedOvertime;
    const userinfo = { ...teamInfo, ...gdslogininfo };
    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)
    );

    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,
    configs,
    onSubmit: handleSubmit,
    onFaceLogin: handleFaceLogin,
    onIdentifySuccess: handleIdentifySuccess
  };
};

// 遍历登录文本组件
const handleGetFormItem = (props, item) => {
  const { sModelsId } = initValue;
  const { masterData = {} } = props;
  let enabledNew = true;
  if (item.iTag === 1) {
    enabledNew = false;
  } else if (item.iTag === 3) {
    enabledNew = true;
  }
  if (item.sName === 'sUserName') {
    item.sVisColumnName = 'sId';
  }
  const showTypeProps = {
    bNewForm: true,
    iColValue: 24,
    record: masterData,
    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: masterData[item.sName],
    bTable: item.sName !== "sPassWord",
    bViewTable: true,
    onFilterDropDownData: props.onFilterDropDownData,
    onSaveState: props.onSaveState,
    bPassWord: item.sName === "sPassWord",
    style: { backgroundColor: "#eaeaea" }
  };
  return (
    <Form.Item label={item.showName} key={item.sName}>
      <ShowType {...showTypeProps} />
    </Form.Item>
  );
};

// 主入口
const login = baseProps => {
  const props = useLoginEvent(useCommonBase(baseProps));
  const { configs } = props;

  const [form] = Form.useForm();

  return (
    <div className={styles.login}>
      <div className="loginBox">
        <div className="logo">劲嘉生产执行系统（EBC-MES）</div>
        <Form form={form} layout="vertical" size="large">
          {configs.map(item => handleGetFormItem(props, item))}
          <Form.Item>
            <Button
              className="submitBtn"
              type="primary"
              block
              onClick={() => {
                props.onSubmit();
              }}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
        <div className="faceLogin">
          <div
            className="faceImg"
            onClick={() => {
              props.onFaceLogin();
            }}
          />
          <div
            className="text"
            onClick={() => {
              props.onFaceLogin();
            }}
          >
            人脸登录
          </div>
        </div>
        {/* <div style={{ width: "100%", height: 60 }} /> */}
      </div>
      <FaceLoginModal {...props} />
      <FaceLoginAfterModal {...props} />
    </div>
  );
};

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

  if (!faceLoginModalVisible) return "";

  return (
    <Modal
      title="人脸登录"
      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 } = props;

  if (!faceLoginAfterModalVisible) return "";
  const {
    configs: configOld = [],
    masterData = {},
    faceLoginValue = {}
  } = props;
  const { sModelsId } = initValue;
  const { name, sParentId, sEmployeeNo } = 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="登陆信息确认"
      open={faceLoginAfterModalVisible}
      width={500}
      height={800}
      className={styles.xlyFaceAuthLogin}
      style={{
        top: "calc(50vh - 400px)"
      }}
      footer={
        <>
          <Button
            type="primary"
            size="large"
            onClick={() => {
              props.onSubmit({ sEmployeeNo });
            }}
          >
            确认
          </Button>
          <Button
            size="large"
            onClick={() => {
              props.onSaveState({
                masterData: {
                  sBrandsId: masterData.sBrandsId,
                  sSubsidiaryId: masterData.sSubsidiaryId
                },
                faceLoginAfterModalVisible: false
              });
            }}
          >
            取消
          </Button>
        </>
      }
      onCancel={() => {
        props.onSaveState({
          masterData: {
            sBrandsId: masterData.sBrandsId,
            sSubsidiaryId: masterData.sSubsidiaryId
          },
          faceLoginAfterModalVisible: false
        });
      }}
    >
      <div className={styles.faceLogin1}>
        <Form form={form} layout="vertical" size="large">
          {configs
            .filter(item => item.sName !== "sPassWord")
            .map(item => handleGetFormItem(props, item))}
        </Form>
      </div>
    </Modal>
  );
};

export default login;