import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _Input from "@alifd/next/es/input";
import _Balloon from "@alifd/next/es/balloon";
import React, { Component, useCallback, useContext, useEffect, useState } from "react";
import { DataSourceType } from "../../_utils/formKeyType";
import { uuid } from "../../_utils/utils";
import { t } from "../../../src/locale";
import "./index.less";
import { getRelationListByProps } from "./comFn";
import RenderByFormKey from "../_components/renderByFormKey";
import { CTreeContext } from "../cDataSourceList-setter/treeContext";

/**
 * 参数设置器
 * @param props
 * @returns
 */
var CTreeDataRelationSetter = function CTreeDataRelationSetter(props) {
  var _props$field2, _props$field2$extraPr;
  var disabledInput = props.disabledInput;
  var _useState = useState((props === null || props === void 0 ? void 0 : props.value) || []),
    requestParamMappingData = _useState[0],
    setRequestParamMappingData = _useState[1];
  var _useState2 = useState([]),
    dataForm = _useState2[0],
    setDataForm = _useState2[1];
  var CTrCxt = useContext(CTreeContext);
  useEffect(function () {
    var list = getRelationListByProps(props);
    setDataForm(list);
  }, []);
  var isShowOneAdd = useCallback(function () {
    var _props$field, _props$field$extraPro;
    var result = true;
    // 有无数量限制
    var num = (props === null || props === void 0 ? void 0 : (_props$field = props.field) === null || _props$field === void 0 ? void 0 : (_props$field$extraPro = _props$field.extraProps) === null || _props$field$extraPro === void 0 ? void 0 : _props$field$extraPro.maxAddNum) || props.maxAddNum;
    if (num !== undefined) {
      result = num > -1 ? requestParamMappingData.length < num : false;
    }
    return result;
  }, [props === null || props === void 0 ? void 0 : (_props$field2 = props.field) === null || _props$field2 === void 0 ? void 0 : (_props$field2$extraPr = _props$field2.extraProps) === null || _props$field2$extraPr === void 0 ? void 0 : _props$field2$extraPr.maxAddNum, props.maxAddNum]);
  function getOldArr() {
    return Object.assign([], requestParamMappingData);
  }
  function comChange(oldArr) {
    setRequestParamMappingData(oldArr);
    props.onChange(oldArr);
  }

  /**
   * 增
   */
  function addSelectOne() {
    var oldArr = getOldArr();
    oldArr.push({
      id: uuid(),
      name: "",
      value: "",
      formKey: DataSourceType.currentPageType
    });
    comChange(oldArr);
  }

  /**
   * 删
   * @param index
   */
  function deleteArr(index) {
    var oldArr = getOldArr();
    oldArr.splice(index, 1);
    comChange(oldArr);
  }

  // 输入新字段
  function onInputChange(v, index, key) {
    var oldArr = getOldArr();
    oldArr[index][key] = v;
    comChange(oldArr);
  }
  function onRenderByFormKey(list, index) {
    var itemData = requestParamMappingData[index];
    if (itemData) {
      list.forEach(function (item) {
        var key = item.key,
          value = item.value;
        itemData[key] = value;
      });
      comChange([].concat(requestParamMappingData));
    }
  }
  function getTipRender(item) {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        color: '#fff'
      }
    }, item.name + "(" + item.type + ")");
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "treeDataRelationBox"
  }, requestParamMappingData.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "sub_title"
  }, /*#__PURE__*/React.createElement("p", null, t("setter.params")), /*#__PURE__*/React.createElement("p", null, t("setter.source")), /*#__PURE__*/React.createElement("p", null, t("setter.mapField"))), /*#__PURE__*/React.createElement("div", {
    className: "sub_box"
  }, requestParamMappingData.map(function (item, index) {
    if (CTrCxt.paramsOpen || !item.disabled) {
      return /*#__PURE__*/React.createElement("div", {
        key: index,
        className: "addSubmitOneBox"
      }, /*#__PURE__*/React.createElement("div", {
        className: "tableItem"
      }, /*#__PURE__*/React.createElement("div", {
        className: "itemOne tableItemValue"
      }, item.type && /*#__PURE__*/React.createElement(_Balloon, {
        v2: true,
        trigger: getTipRender(item),
        triggerType: "hover",
        closable: false
      }, item.type), !item.type && /*#__PURE__*/React.createElement(_Input, {
        disabled: item.disabled || disabledInput,
        value: item.name,
        style: {
          width: 100 + "%"
        },
        placeholder: t("setter.inputPlaceHolder"),
        onChange: function onChange(v) {
          onInputChange(v, index, "name");
        }
      })), /*#__PURE__*/React.createElement("div", {
        className: "itemOne itemRender"
      }, /*#__PURE__*/React.createElement(RenderByFormKey, {
        relationOption: dataForm,
        value: item,
        onChange: function onChange(data) {
          onRenderByFormKey(data, index);
        }
      }))), !(item.disabled || disabledInput) && /*#__PURE__*/React.createElement("div", {
        className: "one_btn"
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: "ashbin",
        size: "small",
        onClick: function onClick() {
          deleteArr(index);
        }
      })));
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: "sub_btn"
  }, isShowOneAdd() && /*#__PURE__*/React.createElement(_Button, {
    text: true,
    type: "primary",
    onClick: addSelectOne
  }, /*#__PURE__*/React.createElement("span", null, t("setter.addData")))));
};
var _default = /*#__PURE__*/function (_Component) {
  function _default() {
    return _Component.apply(this, arguments) || this;
  }
  _inheritsLoose(_default, _Component);
  var _proto = _default.prototype;
  _proto.render = function render() {
    return /*#__PURE__*/React.createElement(CTreeDataRelationSetter, this.props);
  };
  return _default;
}(Component);
export { _default as default };