import _Dialog from "@alifd/next/es/dialog";
import _Tree from "@alifd/next/es/tree";
import _Input from "@alifd/next/es/input";
import _Icon from "@alifd/next/es/icon";
import _Button from "@alifd/next/es/button";
import _extends from "@babel/runtime/helpers/extends";
import _createClass from "@babel/runtime/helpers/createClass";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
function _createForOfIteratorHelperLoose(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
import React, { Component } from 'react';
import { event, project } from '@alilc/lowcode-engine';
import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor';
import './index.less';
var HelpText = "\u4F60\u53EF\u4EE5\u901A\u8FC7\u70B9\u51FB\u5DE6\u4FA7\u533A\u57DF\u7ED1\u5B9A\u53D8\u91CF\u6216\u5904\u7406\u51FD\u6570\uFF0C\u5F53\u7136\u4F60\u4E5F\u53EF\u4EE5\u5728\u4E0A\u65B9\u8F93\u5165\u590D\u6742\u7684\u8868\u8FBE\u5F0F\u3002\n\u8F93\u5165\u6846\u5185\u9ED8\u8BA4\u652F\u6301\u53D8\u91CF\uFF0C\u5199\u6CD5\u548C JS \u5199\u6CD5\u5B8C\u5168\u4E00\u81F4\u3002<br>\nthis: '\u5BB9\u5668\u4E0A\u4E0B\u6587\u5BF9\u8C61'<br>\nstate: '\u5BB9\u5668\u7684state'<br>\nprops: '\u5BB9\u5668\u7684props'<br>\ncontext: '\u5BB9\u5668\u7684context'<br>\nschema: '\u9875\u9762\u4E0A\u4E0B\u6587\u5BF9\u8C61'<br>\ncomponent: '\u7EC4\u4EF6\u4E0A\u4E0B\u6587\u5BF9\u8C61'<br>\nconstants: '\u5E94\u7528\u5E38\u91CF\u5BF9\u8C61'<br>\nutils: '\u5E94\u7528\u5DE5\u5177\u5BF9\u8C61'<br>\ndataSourceMap: '\u5BB9\u5668\u6570\u636E\u6E90Map'<br>\nfield: '\u8868\u5355Field\u5BF9\u8C61'\n";
var defaultEditorProps = {
  width: '100%',
  height: '200px'
};
var defaultEditorOption = {
  options: {
    readOnly: false,
    automaticLayout: true,
    folding: false,
    // 默认开启折叠代码功能
    lineNumbers: 'off',
    wordWrap: 'on',
    formatOnPaste: true,
    fontSize: 12,
    tabSize: 2,
    scrollBeyondLastLine: false,
    fixedOverflowWidgets: false,
    snippetSuggestions: 'top',
    minimap: {
      enabled: false
    },
    scrollbar: {
      vertical: 'auto',
      horizontal: 'auto',
      verticalScrollbarSize: 0
    }
  }
};
var VariableBindDialog = /*#__PURE__*/function (_Component) {
  function VariableBindDialog() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this.state = {
      visiable: false,
      isOverFlowMaxSize: false,
      // stateVaroableList: [],
      helpText: HelpText,
      // contextKeys: [],
      jsCode: '',
      searchValue: '',
      variableListMap: {},
      // 变量列表
      selParentVariable: null,
      // 选中的父级变量
      childrenVariableList: [],
      // 子级变量列表
      field: {},
      // 编辑器全局变量
      treeList: [],
      minimize: false,
      // 是否最小化
      autoExpandParent: true,
      expandedKeys: [],
      maxTextSize: 0 // 绑定变量最大字符数
    };
    _this.editorJsRef = /*#__PURE__*/React.createRef();
    _this.monocoEditor = void 0;
    _this.matchedKeys = void 0;
    _this.exportSchema = function () {
      var _this$props$config, _this$props$config$pr, _this$props$config$pr2;
      // 可以定制getSchema方法
      return ((_this$props$config = _this.props.config) === null || _this$props$config === void 0 ? void 0 : (_this$props$config$pr = _this$props$config.props) === null || _this$props$config$pr === void 0 ? void 0 : (_this$props$config$pr2 = _this$props$config$pr.getSchema) === null || _this$props$config$pr2 === void 0 ? void 0 : _this$props$config$pr2.call(_this$props$config$pr)) || project.exportSchema();
    };
    _this.initCode = function () {
      var _this$props$config2;
      var field = _this.state.field;
      var fieldValue = field.getValue();
      var jsCode = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.value;
      var _ref = ((_this$props$config2 = _this.props.config) === null || _this$props$config2 === void 0 ? void 0 : _this$props$config2.props) || {},
        maxTextSize = _ref.maxTextSize;
      _this.setState({
        jsCode: jsCode,
        // fullScreenStatus: false,
        // stateVaroableList: [],
        searchValue: '',
        variableListMap: {},
        // 变量列表
        selParentVariable: null,
        // 选中的父级变量
        childrenVariableList: [],
        // 子级变量列表
        minimize: false,
        // 是否最小化
        isOverFlowMaxSize: false,
        // 配置的最大文本长度，默认为0，不控制
        maxTextSize: maxTextSize ? maxTextSize : 0
      });
    };
    _this.openDialog = function () {
      _this.setState({
        visiable: true
      }, function () {
        var methods = _this.getMethods();
        var stateVaroableList = _this.getVarableList();
        var dataSource = _this.getDataSource();
        _this.setState({
          variableListMap: _extends({
            stateVaroableList: {
              name: 'State属性',
              childrens: stateVaroableList
            },
            methods: {
              name: '自定义处理函数',
              childrens: methods
            },
            dataSource: {
              name: '数据源',
              childrens: dataSource
            }
          }, _this.extraDataMap)
        });
      });
    };
    _this.closeDialog = function () {
      _this.setState({
        visiable: false,
        minimize: false
      });
    };
    _this.onSelectItem = function (value) {
      var _this$monocoEditor$ge = _this.monocoEditor.getPosition(),
        lineNumber = _this$monocoEditor$ge.lineNumber,
        column = _this$monocoEditor$ge.column;
      _this.monocoEditor.executeEdits('insert-code', [{
        range: {
          startLineNumber: lineNumber,
          startColumn: column,
          endLineNumber: lineNumber,
          endColumn: column
        },
        text: value
      }]);
    };
    _this.updateCode = function (newCode) {
      var isOverFlowMaxSize = false;
      if (_this.state.maxTextSize) {
        isOverFlowMaxSize = (newCode === null || newCode === void 0 ? void 0 : newCode.length) > _this.state.maxTextSize;
      }
      _this.setState({
        jsCode: newCode,
        isOverFlowMaxSize: isOverFlowMaxSize
      }, _this.autoSave);
      console.log('size====', newCode === null || newCode === void 0 ? void 0 : newCode.length);
    };
    _this.autoSave = function () {
      var autoSave = _this.props.autoSave;
      if (autoSave) {
        _this.onOk(true);
      }
    };
    _this.editorDidMount = function (editor) {
      _this.monocoEditor = editor;
      setTimeout(function () {
        _this.editorNode = _this.editorJsRef.current; // 记录当前dom节点；
      }, 0);
    };
    _this.onOk = function (autoSave) {
      var _this$state = _this.state,
        field = _this$state.field,
        jsCode = _this$state.jsCode;
      var fieldValue = field.getValue();
      field.setValue({
        type: 'JSExpression',
        value: jsCode,
        mock: Object.prototype.toString.call(fieldValue) === '[object Object]' ? fieldValue.mock : fieldValue
      });
      if (autoSave !== true) {
        _this.closeDialog();
      }
    };
    _this.removeTheBinding = function () {
      var field = _this.state.field;
      var fieldValue = field.getValue();
      var value = Object.prototype.toString.call(fieldValue) === '[object Object]' ? fieldValue.mock : fieldValue;
      field.setValue(value);
      _this.closeDialog();
    };
    _this.renderBottom = function () {
      var jsCode = _this.state.jsCode;
      return /*#__PURE__*/React.createElement("div", {
        className: "variable-bind-dialog-bottom"
      }, /*#__PURE__*/React.createElement("div", {
        className: "bottom-left-container"
      }, jsCode && jsCode.length > 0 && /*#__PURE__*/React.createElement(_Button, {
        type: "normal",
        warning: true,
        onClick: _this.removeTheBinding
      }, "\u79FB\u9664\u7ED1\u5B9A")), /*#__PURE__*/React.createElement("div", {
        className: "bottom-right-container"
      }, /*#__PURE__*/React.createElement(_Button, {
        type: "primary",
        onClick: _this.onOk,
        disabled: _this.isBtnDisable()
      }, "\u786E\u5B9A"), "\xA0\xA0", /*#__PURE__*/React.createElement(_Button, {
        type: "normal",
        onClick: _this.closeDialog
      }, "\u53D6\u6D88")));
    };
    _this.handleExpand = function (keys) {
      _this.setState({
        expandedKeys: keys,
        autoExpandParent: false
      });
    };
    _this.onVariableSearchChange = function (value) {
      _this.setState({
        searchValue: value
      });
      var _this$state2 = _this.state,
        variableListMap = _this$state2.variableListMap,
        selParentVariable = _this$state2.selParentVariable;
      var selectedVariable = variableListMap[selParentVariable];
      if (!selectedVariable) {
        return;
      }
      value = value.trim();
      if (!value) {
        _this.matchedKeys = null;
        return;
      }
      var matchedKeys = [];
      var loop = function loop(data) {
        return data.forEach(function (item) {
          if (item.label.indexOf(value) > -1) {
            matchedKeys.push(item.key);
          }
          if (item.children && item.children.length) {
            loop(item.children);
          }
        });
      };
      loop(selectedVariable.childrens);
      _this.setState({
        expandedKeys: [].concat(matchedKeys),
        autoExpandParent: true
      });
      _this.matchedKeys = matchedKeys;
    };
    _this.onVariableItemClick = function (key) {
      var _this$extraDataMap, _this$extraDataMap$ke, _this$extraDataMap$ke2;
      var variableListMap = _this.state.variableListMap;
      var childrenVariableList;
      if ((_this$extraDataMap = _this.extraDataMap) !== null && _this$extraDataMap !== void 0 && _this$extraDataMap[key] && (_this$extraDataMap$ke = _this.extraDataMap[key]) !== null && _this$extraDataMap$ke !== void 0 && (_this$extraDataMap$ke2 = _this$extraDataMap$ke.getChildren) !== null && _this$extraDataMap$ke2 !== void 0 && _this$extraDataMap$ke2.call(_this$extraDataMap$ke)) {
        childrenVariableList = _this.extraDataMap[key].getChildren();
      } else {
        childrenVariableList = variableListMap[key].childrens;
      }

      // const matchedKeys = [];
      // const loop = data =>
      //   data.forEach(item => {
      //     if (item.label.indexOf(value) > -1) {
      //       matchedKeys.push(item.key);
      //     }
      //     if (item.children && item.children.length) {
      //       loop(item.children);
      //     }
      //   });
      // loop(childrenVariableList);

      _this.setState({
        selParentVariable: key,
        childrenVariableList: childrenVariableList
        // matchedKeys
      });
    };
    _this.minimizeClick = function (state) {
      _this.setState({
        minimize: state,
        visiable: !state
      });
    };
    _this.onSelectTreeNode = function (selectedKeys, extra) {
      var _extra$selectedNodes$, _extra$selectedNodes$2, _extra$selectedNodes$3;
      var _this$state3 = _this.state,
        selParentVariable = _this$state3.selParentVariable,
        childrenVariableList = _this$state3.childrenVariableList;
      var label = (_extra$selectedNodes$ = extra.selectedNodes[0]) === null || _extra$selectedNodes$ === void 0 ? void 0 : (_extra$selectedNodes$2 = _extra$selectedNodes$.props) === null || _extra$selectedNodes$2 === void 0 ? void 0 : _extra$selectedNodes$2.label;
      var key = (_extra$selectedNodes$3 = extra.selectedNodes[0]) === null || _extra$selectedNodes$3 === void 0 ? void 0 : _extra$selectedNodes$3.key;
      var selectLabel;
      if (selParentVariable == 'stateVaroableList') {
        var pathList = _this.treeFindPath(childrenVariableList, function (data) {
          return data.key == key;
        }, 'label');
        selectLabel = "this.state." + pathList.join('.');
      } else if (selParentVariable == 'methods') {
        selectLabel = "this." + label + "()";
      } else if (selParentVariable == 'dataSource') {
        selectLabel = "this.state." + label;
      } else {
        var fondKey = Object.keys(_this.extraDataMap || {}).find(function (k) {
          return k === selParentVariable;
        });
        if (fondKey) {
          var propKey = _this.extraDataMap[fondKey].key;
          var _pathList = _this.treeFindPath(childrenVariableList, function (data) {
            return data.key === key;
          }, 'label');
          selectLabel = "this." + propKey + "." + _pathList.join('.');
        }
      }
      _this.onSelectItem(selectLabel);
    };
    _this.renderTitle = function () {
      return /*#__PURE__*/React.createElement("div", {
        className: "variable-dialog-title"
      }, /*#__PURE__*/React.createElement("span", null, "\u53D8\u91CF\u7ED1\u5B9A"), /*#__PURE__*/React.createElement("img", {
        style: {
          width: '12px'
        },
        src: "https://img.alicdn.com/imgextra/i1/O1CN01NlC5mY1bTvrlW3blw_!!6000000003467-55-tps-200-200.svg",
        onClick: function onClick() {
          return _this.minimizeClick(true);
        }
      }));
    };
    _this.renderErrorMessage = function () {
      var _this$state4 = _this.state,
        isOverFlowMaxSize = _this$state4.isOverFlowMaxSize,
        maxTextSize = _this$state4.maxTextSize;
      return isOverFlowMaxSize ? /*#__PURE__*/React.createElement("span", {
        className: "error-message"
      }, "\u8868\u8FBE\u5F0F\u6587\u672C\u4E0D\u80FD\u8D85\u8FC7", maxTextSize, "\u4E2A\u5B57\u7B26\uFF0C\u8BF7\u6362\u6210\u51FD\u6570\u8C03\u7528") : null;
    };
    _this.isBtnDisable = function () {
      var _this$state5 = _this.state,
        jsCode = _this$state5.jsCode,
        isOverFlowMaxSize = _this$state5.isOverFlowMaxSize;
      return jsCode === undefined || (jsCode === null || jsCode === void 0 ? void 0 : jsCode.length) == 0 || isOverFlowMaxSize;
    };
    return _this;
  }
  _inheritsLoose(VariableBindDialog, _Component);
  var _proto = VariableBindDialog.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;
    event.on('common:variableBindDialog.openDialog', function (_ref2) {
      var field = _ref2.field;
      _this2.setState({
        field: field
      }, function () {
        _this2.initCode();
        _this2.openDialog();
      });
    });
  };
  /**
   * 获取methods数据源
   * @param  {String}
   * @return {Array}
   */
  _proto.getMethods = function getMethods() {
    var _schema$componentsTre;
    var schema = this.exportSchema();
    var methodsMap = (_schema$componentsTre = schema.componentsTree[0]) === null || _schema$componentsTre === void 0 ? void 0 : _schema$componentsTre.methods;
    var methods = [];
    for (var key in methodsMap) {
      if (Object.prototype.hasOwnProperty.call(methodsMap, key) && key) {
        // methods.push(`${key}()`);
        methods.push({
          label: "" + key,
          key: key
        });
      }
    }
    return methods;
  }

  /**
   * 获取AutoComplete数据源
   * @param  {String}
   * @return {Array}
   */;
  _proto.getVarableList = function getVarableList() {
    var _schema$componentsTre2;
    var schema = this.exportSchema();
    var stateMap = (_schema$componentsTre2 = schema.componentsTree[0]) === null || _schema$componentsTre2 === void 0 ? void 0 : _schema$componentsTre2.state;
    var dataSourceMap = {};
    var dataSource = [];
    for (var key in stateMap) {
      if (Object.prototype.hasOwnProperty.call(stateMap, key) && key) {
        dataSource.push("this.state." + key);
        var valueString = stateMap[key].value;
        var value = void 0;
        try {
          value = eval("(" + valueString + ")");
        } catch (e) {}

        // 属性为false 或者 为"" 也显示到dialog中
        if (value || value === false || value === '') {
          dataSourceMap[key] = value;
        }
      }
    }
    var treeList = [];
    this.walkNode(dataSourceMap, -1, treeList);
    // this.setState({
    //   treeList
    // })
    return treeList;
  }

  /**
   * 通过子节点id查找节点path
   * @param tree
   * @param func
   * @param field
   * @param path
   * @returns
   */;
  _proto.treeFindPath = function treeFindPath(tree, func, field, path) {
    if (field === void 0) {
      field = '';
    }
    if (path === void 0) {
      path = [];
    }
    if (!tree) return [];
    for (var _iterator = _createForOfIteratorHelperLoose(tree), _step; !(_step = _iterator()).done;) {
      var data = _step.value;
      field === '' ? path.push(data) : path.push(data[field]);
      if (func(data)) return path;
      if (data.children) {
        var findChildren = this.treeFindPath(data.children, func, field, path);
        if (findChildren.length) return findChildren;
      }
      path.pop();
    }
    return [];
  }

  /**
   * 循环遍历节点
   * @param dataSourceMap
   * @param deepNum
   * @param treeList
   */;
  _proto.walkNode = function walkNode(dataSourceMap, deepNum, treeList) {
    deepNum++;
    var index = 0;
    for (var key in dataSourceMap) {
      var treeData = {};
      treeData.label = key;
      // treeData.key = deepNum+'_'+index;
      if (typeof dataSourceMap[key] === 'object' && !(dataSourceMap[key] instanceof Array)) {
        treeData.children = [];
        this.walkNode(dataSourceMap[key], deepNum, treeData.children);
      }
      index++;
      treeList.push(treeData);
    }
  }

  /**
   * 获取数据源面板中的数据
   * @param  {String}
   * @return {Array}
   */;
  _proto.getDataSource = function getDataSource() {
    var _schema$componentsTre3;
    var schema = this.exportSchema();
    var stateMap = (_schema$componentsTre3 = schema.componentsTree[0]) === null || _schema$componentsTre3 === void 0 ? void 0 : _schema$componentsTre3.dataSource;
    var list = (stateMap === null || stateMap === void 0 ? void 0 : stateMap.list) || [];
    var dataSource = [];
    for (var _iterator2 = _createForOfIteratorHelperLoose(list), _step2; !(_step2 = _iterator2()).done;) {
      var item = _step2.value;
      if (item && item.id) {
        // dataSource.push(`this.state.${item.id}`);
        dataSource.push({
          label: "" + item.id,
          key: item.id
        });
      }
    }
    return dataSource;
  }

  /**
   * 获取输入的上下文信息
   * @param  {Array}
   * @return {Array}
   */;
  _proto.getContextKeys = function getContextKeys(keys) {
    var editor = this.props.editor;
    var limitKeys = ['schema', 'utils', 'constants'];
    if (!keys || keys.length === 0) return limitKeys;
    if (!limitKeys.includes(keys[0])) return [];
    var result = [];
    var keyValue = editor;
    var assert = false;
    keys.forEach(function (item) {
      if (!keyValue[item] || typeof keyValue[item] !== 'object') {
        assert = true;
      }
      if (keyValue[item]) {
        keyValue = keyValue[item];
      }
    });
    if (assert) return [];
    result = Object.keys(keyValue);
    return result;
  };
  _proto.render = function render() {
    var _this3 = this;
    var _this$state6 = this.state,
      visiable = _this$state6.visiable,
      variableListMap = _this$state6.variableListMap,
      selParentVariable = _this$state6.selParentVariable,
      childrenVariableList = _this$state6.childrenVariableList,
      helpText = _this$state6.helpText,
      jsCode = _this$state6.jsCode,
      searchValue = _this$state6.searchValue,
      minimize = _this$state6.minimize,
      expandedKeys = _this$state6.expandedKeys,
      autoExpandParent = _this$state6.autoExpandParent,
      isOverFlowMaxSize = _this$state6.isOverFlowMaxSize;
    var filterTreeNode = function filterTreeNode(node) {
      return _this3.matchedKeys && _this3.matchedKeys.indexOf(node.props.eventKey) > -1;
    };
    return /*#__PURE__*/React.createElement("div", null, minimize ? /*#__PURE__*/React.createElement("div", {
      className: "vs-variable-minimize"
    }, /*#__PURE__*/React.createElement("img", {
      onClick: function onClick() {
        return _this3.minimizeClick(false);
      },
      src: "https://img.alicdn.com/imgextra/i2/O1CN01HzeCND1vl948xPEWm_!!6000000006212-55-tps-200-200.svg"
    }), /*#__PURE__*/React.createElement("span", {
      onClick: function onClick() {
        return _this3.minimizeClick(false);
      },
      className: "vs-variable-minimize-title"
    }, "\u53D8\u91CF\u7ED1\u5B9A"), /*#__PURE__*/React.createElement("img", {
      onClick: this.closeDialog,
      src: "https://img.alicdn.com/imgextra/i2/O1CN017cO64O1DzwlxwDSKW_!!6000000000288-55-tps-200-200.svg"
    })) : '', /*#__PURE__*/React.createElement(_Dialog, {
      visible: !minimize && visiable,
      title: this.renderTitle(),
      onClose: this.closeDialog,
      footer: this.renderBottom(),
      popupContainer: document.getElementById('engine-popup-container') ? 'engine-popup-container' : undefined
    }, /*#__PURE__*/React.createElement("div", {
      className: "variable-dialog-body"
    }, /*#__PURE__*/React.createElement("div", {
      className: "dialog-left-container"
    }, /*#__PURE__*/React.createElement("div", {
      className: "dialog-small-title"
    }, "\u53D8\u91CF\u5217\u8868"), /*#__PURE__*/React.createElement("div", {
      className: "vs-variable-selector-inner"
    }, /*#__PURE__*/React.createElement("ul", {
      className: "vs-variable-selector-category vs-variable-selector-ul"
    }, Object.keys(variableListMap).map(function (key) {
      return /*#__PURE__*/React.createElement("li", {
        onClick: function onClick() {
          return _this3.onVariableItemClick(key);
        },
        className: selParentVariable === key && 'active',
        key: key
      }, variableListMap[key].name);
    })), /*#__PURE__*/React.createElement("div", {
      className: "vs-variable-selector-items-container"
    }, /*#__PURE__*/React.createElement("div", {
      className: "ve-search-control"
    }, /*#__PURE__*/React.createElement(_Input, {
      innerAfter: /*#__PURE__*/React.createElement(_Icon, {
        type: "search",
        size: "xs",
        style: {
          margin: 4
        }
      }),
      placeholder: "\u641C\u7D22",
      value: searchValue,
      "aria-label": "\u641C\u7D22",
      style: {
        width: '100%'
      },
      onChange: this.onVariableSearchChange
    })), /*#__PURE__*/React.createElement("ul", {
      className: "tree-container"
    }, /*#__PURE__*/React.createElement(_Tree, {
      dataSource: childrenVariableList,
      onSelect: this.onSelectTreeNode,
      defaultExpandAll: true,
      filterTreeNode: filterTreeNode,
      expandedKeys: expandedKeys,
      autoExpandParent: autoExpandParent,
      onExpand: this.handleExpand
    }))))), /*#__PURE__*/React.createElement("div", {
      className: "dialog-right-container"
    }, /*#__PURE__*/React.createElement("div", {
      className: "dialog-small-title"
    }, "\u7ED1\u5B9A ", this.renderErrorMessage()), /*#__PURE__*/React.createElement("div", {
      id: "jsEditorDom",
      className: isOverFlowMaxSize ? "editor-context editor-context-error" : "editor-context",
      ref: this.editorJsRef
    }, /*#__PURE__*/React.createElement("div", {
      className: "editor-type-tag"
    }, "="), /*#__PURE__*/React.createElement(MonacoEditor, _extends({
      value: jsCode
    }, defaultEditorProps, defaultEditorOption, {
      language: 'javascript',
      onChange: function onChange(newCode) {
        return _this3.updateCode(newCode);
      },
      editorDidMount: function editorDidMount(useMonaco, editor) {
        _this3.editorDidMount.call(_this3, editor, useMonaco);
      }
    }))), /*#__PURE__*/React.createElement("div", {
      className: "dialog-help-tip-input"
    }, /*#__PURE__*/React.createElement("p", {
      className: "vs-variable-content-desc-title"
    }, "\u7528\u6CD5"), /*#__PURE__*/React.createElement("p", {
      dangerouslySetInnerHTML: {
        __html: helpText
      }
    }))))));
  };
  return _createClass(VariableBindDialog, [{
    key: "extraDataMap",
    get: function get() {
      var _this$props$config$pr3;
      return (_this$props$config$pr3 = this.props.config.props) === null || _this$props$config$pr3 === void 0 ? void 0 : _this$props$config$pr3.extraDataMap;
    }
  }]);
}(Component);
export { VariableBindDialog as default };