import React, { useEffect, useState } from "react";
import { Modal, Form, Button, message } from "antd";
import * as commonUtils from "@/utils/utils";
import FaceDetect from "@/components/FaceDetect";
import ShowType from "@/components/Common/CommonComponent";
import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";
import * as commonFunc from "@/components/Common/commonFunc";

import styles from "./index.less";

const FaceCollectionEvent = props => {
  const { formData = [] } = props;
  const faceCollectionConfigIndex = formData.findIndex(
    item => item.sGrd === "faceCollection"
  );

  useEffect(
    async () => {
      if (faceCollectionConfigIndex === -1) return;

      const { sTeamId } = commonUtils.getAppData("userinfo");
      const result =
        (await props.onGetDataSet({
          name: "faceCollection",
          configData: formData[faceCollectionConfigIndex],
          condition: {
            sSqlCondition: { sTeamId }
          },
          isWait: true
        })) || {};

      const { faceCollectionData = [] } = result;
      props.onSaveState({ faceCollectionData });
    },
    [faceCollectionConfigIndex]
  );

  return {
    ...props
  };
};

const FaceCollectionComponent = baseProps => {
  const { visible, onCancel } = baseProps;
  if (!visible) return "";
  const props = FaceCollectionEvent(
    useCommonBase({
      ...baseProps,
      sModelsId: "17086669370007136849817837261000"
    })
  );

  const { faceCollectionData = [] } = props;
  const faceCollection = commonFunc.showLocalMessage(props, 'faceCollection', '人脸采集');

  const faceCollectionSucess = commonFunc.showLocalMessage(props, 'faceCollectionSucess', '人脸采集成功');

  const selectUser = commonFunc.showLocalMessage(props, 'selectUser', '请选择用户');

  const BtnCancel = commonFunc.showLocalMessage(props, 'BtnCancel', '取消');
  const BtnNext = commonFunc.showLocalMessage(props, 'BtnNext', '下一步');


  const showDropDown = faceCollectionData.reduce((pre, item) => {
    return {
      ...pre,
      [item.sEmployeeId]: `${item.sUserName}-${item.sEmployeeNo}`
    };
  }, {});

  const [dataValue, setDataValue] = useState("");

  const showTypeProps = {
    app: {},
    bNewForm: true,
    iColValue: 24,
    record: {},
    name: "master",
    formId: props.sModelsId,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getFloatNum: props.getFloatNum,
    getDateFormat: props.getDateFormat,
    onChange: (...args) => {
      setDataValue(args[2].sName);
    },
    showConfig: {
      sName: "sName",
      sDropDownType: "const",
      showDropDown: JSON.stringify(showDropDown)
    },
    formItemLayout: { labelCol: { span: 0 }, wrapperCol: { span: 24 } },
    textArea: false,
    enabled: true,
    dataValue,
    bTable: true,
    bViewTable: true,
    onFilterDropDownData: props.onFilterDropDownData,
    onSaveState: props.onSaveState,
    bPassWord: false,
    style: { backgroundColor: "#eaeaea" }
  };

  const handleNexStep = async () => {
    if (!dataValue) {
      message.error({selectUser});
      return;
    }

    const userinfo = commonUtils.getAppData("userinfo");
    const employeeInfo = faceCollectionData.find(
      item => item.sEmployeeId === dataValue
    );

    const modal = Modal.info({
      title: faceCollection,
      keyboard: false,
      content: (
        <FaceDetect
          app={{
            userinfo: {
              ...userinfo,
              ...employeeInfo
            }
          }}
          loginAfterInit
          onSaveFaceSuccess={() => {
            message.success(faceCollectionSucess);
            modal.destroy();
            onCancel();
          }}
          actionType={"saveFace"}
        />
      ),
      wrapClassName: "xlyFaceAuthModal",
      okText: BtnCancel,
      onOk() {
        modal.destroy();
      }
    });
  };

  return (
    <Modal
      open={visible}
      title={faceCollection}
      width={400}
      height={250}
      className="mesCommonModal mesLoginForm"
      footer={
        <Button type="primary" size="large" onClick={handleNexStep}>
          {BtnNext}
        </Button>
      }
      onCancel={onCancel}
    >
      <div className={styles.faceCollection}>
        <Form layout="vertical" size="large">
          <Form.Item label={selectUser}>
            <ShowType {...showTypeProps} />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

export default FaceCollectionComponent;