import { useEffect, useState, useRef } from "react";
import AntDraggableModal from "../AntdDraggableModal";
import * as commonUtils from "@/utils/utils";
import commonConfig from "@/utils/config";
import * as commonServices from "@/services/services";
import styles from "./index.less";
import { Input, Button, Space } from "antd-v4";
import { MinusOutlined, CloseOutlined } from "@ant-design/icons";

const IFRAMEURL =  location.hostname === "localhost" ? "http://localhost:9099" : "http://project.xlyprint.cn";

const InstructSetSetting = (props = {}) => {
  const { instructSetSettingVisible } = props;
  if (!instructSetSettingVisible) return "";

  const { name, sFieldName, onCancelInstructSetSettingModal, showConfig, dataValue, instructSetSettingId, slave0Data, app } = props;
  const { showName, sName } = showConfig;
  const { currentPane } = app;
  const { key, parentPaneKey } = currentPane;

  const getSqlDropDownData = async ({ sId, sSqlCondition = {} }, cb) => {
    const url = `${commonConfig.server_host}business/getSelectLimit/${sId}`;
    const body = {
      sKeyUpFilterName: "",
      pageNum: 1,
      pageSize: 10000,
      sSqlCondition,
    };
    const retrunData = await commonServices.postValueService(props.app.token, body, url);
    const dropDownData = retrunData.data?.dataset?.rows;
    cb(dropDownData);
  };

  const configList = useRef([]);
  const srcModelsList = useRef([]);
  useEffect(() => {
    const parentProps = window[`getPropsByPanelKey${parentPaneKey}`] ? window[`getPropsByPanelKey${parentPaneKey}`]() : {};
    const { formData = [] } = parentProps;
    const tempData = Object.keys(parentProps).filter(
      key =>
        key?.endsWith("Config")
        && (key === 'masterConfig' || key?.startsWith('slave') || parentProps[key]?.bGrdVisible)
        && formData.some(item => item.sId === parentProps[key]?.sId)
    )
      .filter(key => parentProps.formRoute?.includes("commonList") ? !key.includes('master') : true)
      .reduce((pre, cur) => {
        pre[cur.replace('Config', '')] = parentProps[cur];
        return pre;
      }, {})

    const tempConfig = formData.reduce((pre, config) => {
      const iIndex = Object.values(tempData).findIndex(item => item.sId === config.sId);
      if (iIndex !== -1) {
        pre.push({ ...config, tableName: Object.keys(tempData)[iIndex] });
      }
      return pre;
    }, []);

    configList.current = tempConfig;

    const currentProps = window[`getPropsByPanelKey${key}`] ? window[`getPropsByPanelKey${key}`]() : {};
    const sActiveNameConfig = currentProps.slaveConfig?.gdsconfigformslave?.find(item => item.sName === 'sActiveName');
    if (sActiveNameConfig) {
      const { sId } = sActiveNameConfig;
      getSqlDropDownData({ sId }, (data) => {
        srcModelsList.current = data;
      })
    }

  }, []);




  const instructSet = commonUtils.convertStrToObj(dataValue, {});
  const { bConfigured } = instructSet;

  const [value, setValue] = useState(dataValue);
  const [mode, setMode] = useState("edit");
  const iframeRef = useRef(null);

  const [formatFlag, setFormatFlag] = useState(0);
  useEffect(() => {
    try {
      const newValue = JSON.stringify(JSON.parse(value.replace(/[\r\n]/g, "")), null, 2);
      setValue(newValue);
    } catch (e) { }
  }, [formatFlag]);

  const onReceiveData = event => {
    // 验证来源
    if (event.origin !== IFRAMEURL) {
      return;
    }

    const { command, data } = event.data;

    if (command === "initData") {
      // if (!bConfigured && props.name !== "master") return;

      let value = instructSet;
      if (commonUtils.isEmptyObject(instructSet)) {
        value = [];
      } else if (!Array.isArray(instructSet)) {
        value = [instructSet];
      }

      value = instructSet.change || instructSet.blur || value;

      iframeRef.current.contentWindow.postMessage(
        {
          tableName: name,
          sFieldName,
          command: "initData",
          value,
          slave0Data,
          configList: configList.current,
          srcModelsList: srcModelsList.current,
        },
        IFRAMEURL
      );
      return;
    }

    let newValue = data;
    if (props.name === "master" && sName === "sInstruct") {
      newValue = {
        ...(newValue[0] || {}),
        bConfigured: true,
      };
    } else if (sName === "sOnChangeInstruct") {
      newValue = {
        change: newValue,
        bConfigured: true,
      };
    }

    props.onSaveData(JSON.stringify(newValue));
    // setMode("edit");
    // setValue(JSON.stringify(newValue));
  };

  useEffect(() => {
    // 监听来自 iframe 的消息
    window.addEventListener("message", onReceiveData);
    return () => {
      window.removeEventListener("message", onReceiveData);
    };
  }, []);

  const [visible, setVisible] = useState(true);
  useEffect(() => {
    setVisible(true);
  }, [instructSetSettingId]);

  return (
    <AntDraggableModal
      title={showName}
      visible={instructSetSettingVisible && visible}
      onCancel={onCancelInstructSetSettingModal}
      width="100w"
      height="100vh"
      style={{ top: 0 }}
      footer={null}
      closeIcon={
        <Space>
          <MinusOutlined
            onClick={e => {
              e.stopPropagation();
              setVisible(false);
            }}
          />
          <CloseOutlined />
        </Space>
      }
    >
      <div className={styles.contents}>
        {mode === "edit" ? (
          <>
            <Input.TextArea style={{ height: "calc(100% - 40px)", fontSize: 14 }} value={value} onChange={e => setValue(e.target.value)} />
            <Space style={{ marginTop: 6, float: "right" }}>
              <Button
                type="primary"
                onClick={() => {
                  setFormatFlag(pre => pre + 1);
                }}
              >
                格式化
              </Button>
              <Button type="primary" onClick={() => props.onSaveData(value ? JSON.stringify(JSON.parse(value.replace(/[\r\n]/g, ""))) : "")}>
                保存
              </Button>
              <Button type="primary" onClick={() => setMode("config")}>
                切换配置模式
              </Button>
            </Space>
          </>
        ) : (
          <iframe ref={iframeRef} src={`${IFRAMEURL}/InsSet/?parentDomain=${document.location.origin}&time=${new Date().getTime()}`} width="100%" height="100%" frameBorder={0} />
        )}
      </div>
    </AntDraggableModal>
  );
};

export default InstructSetSetting;