/*
 * @Author: Sakura
 * @LastEditors: varcms
 * @Date: 2024-02-26 10:55:04
 * @Description: 班组信息界面
 */

import React, { useEffect, useRef, useState } from "react";
import { Avatar, Col, Row, Button, Modal, Spin, Form, Input } from "antd";
import { UserOutlined } from "@ant-design/icons";
import RouterComponent from "@/routes/mes/routerComponent";

import styles from "./index.less";
import { DraggableConfirmModal } from "@/components/Draggable";

import * as commonFunc from "@/components/Common/commonFunc";
import * as commonUtils from "@/utils/utils";
import * as commonBusiness from "@/components/Common/commonBusiness";
import * as commonConfig from "@/utils/config";
import * as commonServices from "@/services/services";
import ShowType from "@/components/Common/CommonComponent";
import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";
import StaticEditTable from "@/components/Common/CommonTable";
import FaceDetect from "@/components/FaceDetect";
import CommonOperationBarComponent from "@/mes/common/commonOperationBarComponent";
import CommonViewTable from "@/components/Common/CommonViewTable";
// const { reducer } = commonUtils;

import userImgs from "./assets/user.jpg";
import teaIcon from "./assets/teaIcon.png";
import joinIcon from "./assets/joinIcon.png";
import { message } from "antd";

const teamInfoSid = "17086669370007136849817837261000";
let loginInfo = {};
// 业务层
const useTeamInfoEvent = props => {
  const { formData } = props;
  useEffect(
    async () => {
      if (commonUtils.isNotEmptyArr(formData)) {
        const colunmData = handleGetColumnData(formData, true);
        const result = await handleGetData(formData, true);
        const addState = {
          ...colunmData,
          ...result,
          bFinish: true
        };
        props.onSaveState({ ...addState, loadings: false });
      }
    },
    [formData]
  );

  // 监听人员表第一条数据的实际上班人员
  const sFirstActualEmployeeName = props.slave0Data?.[0]?.sActualEmployeeName;
  const timer = useRef(null);
  useEffect(
    () => {
      if (!props.bFinish) return;
      const changeUserInfo = () => {
        const userinfo = commonUtils.getAppData("userinfo");
        if (
          sFirstActualEmployeeName &&
          sFirstActualEmployeeName !== userinfo.sUserName
        ) {
          userinfo.sUserName = sFirstActualEmployeeName;
          userinfo.sUserNo = props.slave0Data[0].sActualEmployeeNo;
          props.dispatch({
            type: "app/saveUserinfo",
            payload: userinfo
          });
        } else if (
          sFirstActualEmployeeName === undefined &&
          userinfo.sUserNameBak &&
          userinfo.sUserNameBak !== userinfo.sUserName
        ) {
          userinfo.sUserName = userinfo.sUserNameBak;
          userinfo.sUserNo = userinfo.sUserNoBak;
          props.dispatch({
            type: "app/saveUserinfo",
            payload: userinfo
          });
        }
      };

      clearTimeout(timer.current);
      timer.current = setTimeout(() => {
        changeUserInfo();
      }, 200);
    },
    [sFirstActualEmployeeName]
  );

  // 获取表头数据
  const handleGetColumnData = (formData = [], isWait) => {
    let addState = {};
    for (let i = 0; i < formData.length; i++) {
      const config = formData[i];
      const { sGrd } = config;
      const column = commonFunc.getHeaderConfig(config);
      addState = {
        ...addState,
        [`${sGrd}Column`]: column,
        [`${sGrd}Config`]: config
      };
    }
    if (isWait) {
      return addState;
    } else {
      props.onSaveState(addState);
    }
  };

  // 获取数据集
  const handleGetData = async (formData = [], isWait) => {
    let addState = {};
    for (let i = 0; i < formData.length; i++) {
      const config = formData[i];
      const { sGrd } = config;
      const conditonValues = props.onGetSqlConditionValues(config);
      const result =
        (await props.onGetDataSet({
          name: sGrd, // 有指定表名时用指定表名
          configData: config,
          condition: { sSqlCondition: { ...conditonValues } },
          isWait: true
        })) || {};
      props.setTempRef(result);
      addState = { ...addState, ...result };
    }
    props.setTempRef({}, true);
    if (isWait) {
      return addState;
    } else {
      props.onSaveState(addState);
    }
  };

  const sModelsId = "16034339700006038392152714521000";
  const mesSysbrands = commonUtils.convertStrToObj(
    localStorage.getItem("mesSysbrands")
  );
  const { masterData = {} } = props;
  // 遍历登录文本组件
  const handleGetFormItem = (props, item) => {
    let enabledNew = true;
    const showTypeProps = {
      bNewForm: true,
      iColValue: 24,
      record: { ...masterData, ...mesSysbrands },
      name: "master",
      formId: sModelsId,
      getSqlDropDownData: props.getSqlDropDownData,
      getSqlCondition: props.getSqlCondition,
      handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
      getFloatNum: props.getFloatNum,
      getDateFormat: props.getDateFormat,
      onChange: (...args) => {
        loginInfo = { ...loginInfo, ...args[2] };
      },
      showConfig: { ...item, sDropDownType: "" },
      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.sName === "sUserName" ? "账号" : item.showName}
        key={item.sName}
      >
        <ShowType {...showTypeProps} />
      </Form.Item>
    );
  };
  const getFaceResult = async () => {
    let faceResult = false;
    const loginType = await new Promise(resolve => {
      Modal.confirm({
        title: "温馨提示：",
        content: "请选择验证方式",
        closable: true,
        maskClosable: true,
        wrapClassName: "mesCommonModal",
        cancelText: "账号密码",
        okText: "人脸识别",
        onOk() {
          resolve(1);
        },
        onCancel(e) {
          if (e.name) {
            resolve(2);
            Modal.destroyAll();
          } else {
            resolve(0);
          }
        }
      });
    });

    if (loginType === 1) {
      // 人脸识别
      faceResult = await new Promise(resolve => {
        const modal = Modal.info({
          title: "人脸识别",
          keyboard: false,
          content: (
            <FaceDetect
              loginAfterInit
              onIdentifySuccess={e => {
                const resultRowData = e.dataset.rows[0];
                resolve(resultRowData);
                modal.destroy();
              }}
              actionType={"identifyFace"}
            />
          ),
          wrapClassName: "xlyFaceAuthModal",
          okText: "取消",
          onOk() {
            resolve(false);
          }
        });
      });
    } else if (loginType === 2) {
      // 账号密码登陆
      let loginConfig;
      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)) {
            loginConfig = formData[0].gdsconfigformslave.filter(
              item =>
                item.bVisible &&
                item.sName &&
                ["sUserName", "sPassWord"].includes(item.sName)
            );
          }
        }
      } else {
        message.error(configReturn.msg);
      }

      faceResult = await new Promise(resolve => {
        loginInfo = {};
        Modal.confirm({
          title: "请输入账号密码：",
          content: (
            <Form layout="vertical" size="large">
              {loginConfig.map(item => handleGetFormItem(props, item))}
            </Form>
          ),
          wrapClassName: "mesCommonModal mesLoginForm",
          cancelText: "取消",
          okText: "确定",
          onOk(e) {
            if (e.name) {
              if (!loginInfo.sUserNo && !loginInfo.sUserName) {
                message.error("账号/姓名不能为空！");
                return;
              }

              if (!loginInfo.sPassWord) {
                message.error("密码不能为空！");
                return;
              }

              const { sBrandsId, sSubsidiaryId } = mesSysbrands;
              const url = `${
                commonConfig.server_host
              }userloginUserNo/${sBrandsId}/${sSubsidiaryId}`;
              const value = {
                username: loginInfo.sUserNo || loginInfo.sUserName,
                password: loginInfo.sPassWord
              };

              commonServices
                .postValueService(null, value, url)
                .then(({ data: dataReturn }) => {
                  const { msg, code, dataset } = dataReturn;
                  if (code !== 1) {
                    message.error(msg);
                    return;
                  }

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

                  const result = dataset.rows[0];
                  resolve(result);
                });
            }
          },
          onCancel() {
            resolve(false);
          }
        });
      });
    }
    Modal.destroyAll();
    return faceResult;
  };

  // 上下班事件
  const handleChangeWorkState = async (params, workState) => {
    // 如果是上班，需要人脸识别
    let faceResult = false;
    if (workState == "on") {
      const tempFaceData = localStorage.getItem("tempFaceData");
      if (tempFaceData) {
        faceResult = commonUtils.convertStrToObj(tempFaceData, {});
      } else {
        faceResult = await getFaceResult();
      }

      if (!faceResult) return;
    }

    const { config, record, name } = params;
    props.onProcedureCall({
      btnConfig: config,
      tableData: [record],
      faceData: { sEmployeeNo: faceResult.sEmployeeNo },
      onSuccess: () => {
        handleRefreshDataByTableName(name);
      },
      onConfirm: () => {},
      onError: () => {}
    });

    // const tableDataNew = [...tableData];
    // tableDataNew[index].workState = 'on';
    // props.onSaveState({ [`${tableName}Data`]: tableDataNew });
  };

  // 通过表名刷新数据
  const handleRefreshDataByTableName = tableName => {
    const { [`${tableName}Config`]: config } = props;
    handleGetData([{ ...config, specifyTableName: tableName }]);
  };

  //   props.setLoading(false)

  // 刷新指定表格
  const { refreshTableList = [] } = props;
  useEffect(
    async () => {
      if (!refreshTableList.length) return;

      let addState = {
        refreshTableList: []
      };

      const formDataNew = formData.filter(item =>
        refreshTableList.includes(item.sGrd)
      );

      addState = {
        ...addState,
        ...(await handleGetData(formDataNew, true))
      };
      props.onSaveState(addState);
    },
    [refreshTableList.length]
  );

  // 监听slave0表数据，看是否有人上班
  const { slave0Data = [] } = props;
  const bStartWork =
    slave0Data.filter(item => item.sActualEmployeeName).length > 0;

  useEffect(
    () => {
      if (!props.bFinish) return;
      const userinfo = commonUtils.getAppData("userinfo");
      const userinfoNew = { ...userinfo, bStartWork };
      props.dispatch({
        type: "app/saveUserinfo",
        payload: userinfoNew
      });
    },
    [bStartWork]
  );

  return {
    ...props,
    //  其他对象
    onChangeWorkState: handleChangeWorkState
  };
};

// 班组信息
const TeamInfo = baseProps => {
  const [faceModal, setFaceModal] = useState(false);
  const props = useTeamInfoEvent(
    useCommonBase({ ...baseProps, sModelsId: teamInfoSid })
  );
  const { formData = [] } = props;
  if (!formData.length) return "";

  const tableBaseProps = commonBusiness.getTableTypes("slave0", props);
  const { config: slave0Config } = tableBaseProps;

  // 上班按钮配置
  const BtnEnventStartWorkConfig =
    slave0Config?.gdsconfigformslave?.find(
      item => item.sControlName === "BtnEnventStartWork"
    ) || {};
  // 下班按钮配置
  const BtnEnventOfftWorkConfig =
    slave0Config?.gdsconfigformslave?.find(
      item => item.sControlName === "BtnEnventOfftWork"
    ) || {};

  const tableProps = {
    ...tableBaseProps,
    tableProps: {
      onChange: () => {}
      // AutoTableHeight: 400,
    },
    fixedHeight: "calc(25vh - 80px)",
    tableBtnsConfig: params => {
      const { record } = params;
      const {
        workState = "off",
        sTeamEmployeeName,
        sActualEmployeeName = ""
      } = record;
      // console.log(record)

      return [
        {
          ...BtnEnventStartWorkConfig,
          btnBgColor: sActualEmployeeName ? "#AAAAAA" : "#FAAD14"
        },
        {
          ...BtnEnventOfftWorkConfig,
          btnBgColor: !sActualEmployeeName ? "#AAAAAA" : "#FAAD14"
        }
      ];
    },
    tableBtnsWidth: "190px",
    // tableBtnsConfig:[
    //     { btnBgColor:"#AAAAAA" , showName:'上班' },
    //     { btnBgColor:"#FAAD14" , showName:'下班' }
    // ],
    onTableBtnClick: item => {
      const { record, config } = item;
      if (config.showName === "上班") {
        if (record.sActualEmployeeName) {
          message.info("当前正在上班中...", 3);
          return;
        }
        props.onChangeWorkState(item, "on");
      } else if (config.showName === "下班") {
        if (!record.sActualEmployeeName) {
          message.info("请先上班", 3);
          return;
        }
        props.onChangeWorkState(item, "off");
      }
    }
  };

  const { sForemanName = "", sIpqcName = "", sEmployeeName = "" , sIpqcName2='' } = props.slaveData && props.slaveData.length !== 0 ? props.slaveData[0] : {};
  const { sTeamEmployeeNo = "" , sActualEmployeeNo='' ,  sActualEmployeeName=''  } = props.slave0Data?.[0] || {};

  let faceProps = {
    ...props,
    faceModal,
    setFaceModal
  };

  const operationBarProps = {
    ...props,
    sName: "slave0"
  };

  // 临时ipqc
  const viewProps = {
    ...props,
    enabled:true,
    viewConfigs : props.slaveConfig?.gdsconfigformslave.filter(e=>e.showName == '临时IPQC') || [],
    tableConfig: props.slaveConfig,
    iColValueView: 24,
    tableName: "slave",
    viewRow: props.slaveData && props.slaveData.length !== 0 ? props.slaveData[0] : {},
    onDataChange: (tableName, sName, returnValue , sId , dropDownData , isWait ) => {
        props.onSaveState({ 
            [`slaveData`]: [ {...props.slaveData[0] , ...returnValue} ] 
        });
        setTimeout(()=>{
            // 调用指令集保存
            props.onExecInstructSet({
                nextProps: { ...props , slaveData : [ {...props.slaveData[0] , ...returnValue} ] },
                btnConfig: {
                    showName: "临时IPQC保存",
                    sInstruct: props.slaveConfig?.gdsconfigformslave.filter(e=>e.showName == '保存' && e.sControlName == 'BtnEventSave')[0].sInstruct,
                    error:(er)=>{
                        // this.setState({ dataValue: '' });
                    },
                },
                callback: () => {
                },
            })
        },300)
    }
  };
  // 清空临时IPQC
  const clearTempIpqc = () => {
    props.onSaveState({ 
        [`slaveData`]: [ {...props.slaveData[0] , sIpqcId2:'' , sIpqcName2: '' } ] 
    });
    props.onExecInstructSet({
        nextProps: { ...props , slaveData : [ {...props.slaveData[0] , sIpqcId2:'',sIpqcName2:''} ] },
        btnConfig: {
            showName: "临时IPQC保存",
            sInstruct: props.slaveConfig?.gdsconfigformslave.filter(e=>e.showName == '保存' && e.sControlName == 'BtnEventSave')[0].sInstruct,
        }
    })
  }


  return (
    <div className={styles.teamInfo}>
      <div className="teamPost">
        <div className="teamInfo">
          <h2>
            <img src={teaIcon} />
            班组信息
          </h2>
          <div className="userWorkBox">
            <div className="workTop">
              {sTeamEmployeeNo ? (
                <img
                  src={`${
                    commonConfig.interface_host
                  }api/ZEBC_042/${ sActualEmployeeNo || sTeamEmployeeNo}`}
                  onError={event => {
                    event.target.src = userImgs;
                  }}
                  onDoubleClick={event => {
                    event.target.src = `${
                      commonConfig.interface_host
                    }api/ZEBC_042/11123`;
                  }}
                />
              ) : (
                <img src={userImgs} />
              )}
              <ul>
                <li>
                  <label>机长</label>
                  <span>{ sActualEmployeeName ||  sEmployeeName}</span>
                </li>
                <li>
                  <label>班组</label>
                  <span>{props.app.userinfo?.sTeamNo}</span>
                </li>
                <li>
                  <label>班次</label>
                  <span>
                    {props.app.userinfo?.sShift == "1"
                      ? "白班"
                      : props.app.userinfo?.sShift == "2"
                        ? "夜班"
                        : ""}
                  </span>
                </li>
              </ul>
            </div>
            <ul style={{'flex-direction': 'row'}}>
              <li>
                <label>领班</label>
                <span>{sForemanName}</span>
              </li>
              <li>
                <label>
                  {props.app.userinfo?.iInterface == 10
                    ? "OQC"
                    : "IPQC"}
                </label>
                <span>{sIpqcName} </span>
              </li>
            </ul>
            <div style={{ 'position': 'relative' }}>
                <CommonViewTable  {...viewProps} className="temporaryIpqc"></CommonViewTable>
                <Button style={{    'position': 'absolute' , 'top': '20%' ,'right': '2%'}} type="primary" onClick={() => { clearTempIpqc() }} > 清空 </Button>
            </div>
                
          </div>
        </div>
        <div className="postList">
          <Spin spinning={props.loadings} delay={500}>
            <StaticEditTable {...tableProps} />
            {/*<Button type="primary" size="large" onClick={handleModalConfirm}>*/}
            {/*  {bDelayedOvertime ? "取消延迟加班" : "延迟加班"}*/}
            {/*</Button>*/}
            <CommonOperationBarComponent {...operationBarProps} />
          </Spin>
        </div>
      </div>
      <TeamJoinInfo {...props} />

      {/* 刷脸 */}
      <FaceLoginModal {...faceProps} />
    </div>
  );
};

// 人脸登录弹窗
const FaceLoginModal = props => {
  const { faceModal, setFaceModal } = props;
  if (!faceModal) return "";

  // 人脸登录成功回调
  const handleIdentifySuccess = e => {
    // const { sBrandsId: sParentId, sSubsidiaryId: sId, sEmployeeNo } = e.dataset.rows[0];
    // // ZY0232
    // const value = {
    // sParentId, sId, sEmployeeNo
    // };
    // handleSubmit(value);
  };

  return (
    <Modal
      title="刷脸上岗"
      open={faceModal}
      width={334}
      style={{
        top: "calc(50vh - 220px)"
      }}
      footer={null}
      onCancel={() => {
        setFaceModal(false);
      }}
    >
      <div className={styles.faceLogin}>
        <FaceDetect
          loginAfterInit
          onIdentifySuccess={handleIdentifySuccess}
          actionType="identifyFace"
        />
      </div>
    </Modal>
  );
};

const TeamJoinInfo = props => {
  const { slave1Config, slave1Data } = props;

  const joinInfoData = commonUtils.filteredArr(
    slave1Config?.gdsconfigformslave.map(e => {
      if (e.bVisible) {
        return e;
      }
    })
  );

  const joinInfoTableData = commonUtils
    .filteredArr(
      props.formData?.map((e, i) => {
        if (i >= 3 && i <= 5) {
          return { showName: e.showName, tableName: e.sGrd };
        }
      })
    )
    ?.filter(item => item.tableName !== "slave3");

  const tableProps = tableName => {
    const result = {
      ...commonBusiness.getTableTypes(tableName, props),
      tableProps: {
        onChange: () => {}
      },
      onTableBtnClick: props.onTableBtnClick,
      fixedHeight: tableName === "slave4" ? "230px" : "160px"
    };

    result.tableBtnsConfig = result.config?.gdsconfigformslave
      ?.filter(
        item => item.bVisible && item.sControlName === "BtnTable.confirm"
      )
      .map(item => ({ ...item, btnBgColor: "#1890ff" }));
    return result;
  };

  const handleOk = () => {
    // 将当前选中行保存到全局
    props.dispatch({
      type: "app/saveGlobalData",
      payload: {
        bStartWork: true // 开工
      }
    });
    props.onChangeRouter({ type: "name", path: ["计划任务", "机台任务"] });
  };

  return (
    <div className="joinInfo">
      <Row className="teamTitle">
        <h2 style={{ color: "#1890ff", margin: 0 }}>
          <img src={joinIcon} />
          上班交接信息
        </h2>
      </Row>
      <Row className="teamInfoBox">
        <Col span={6} className="teamInfoLeft">
          {joinInfoData?.map((item, i) => (
            <div key={i} className="infoBox">
              <h2>{item.showName}</h2>
              <div className="infoBorBox">
                {slave1Data.length > 0 ? slave1Data[0][item.sName] : ""}
              </div>
            </div>
          ))}
        </Col>
        <Col span={18} className="teamInfoRight">
          {joinInfoTableData?.map((item, i) => (
            <div key={i} className="infoBox">
              <h2>{item.showName}</h2>
              <div className="infoBorBox">
                <Spin spinning={props.loadings} delay={500}>
                  <StaticEditTable {...tableProps(item.tableName)} />
                </Spin>
              </div>
            </div>
          ))}
        </Col>
      </Row>
      {/* <Row className="teamFoot">
                <Col span={24} className='teamBtn'>
                    <DraggableConfirmModal
                        btnText='确认'
                        content={'请再次确认提交的内容'}
                        onOk={() => {
                            handleOk();
                            console.log('点击确定')
                        }}
                        onCancel={() => {
                            console.log('点击取消')
                        }}
                    />
                </Col>
            </Row> */}
    </div>
  );
};

export default TeamInfo;