import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Drawer from "@alifd/next/es/drawer";
import _Switch from "@alifd/next/es/switch";
import _extends from "@babel/runtime/helpers/extends";
import _Button from "@alifd/next/es/button";
import _Select from "@alifd/next/es/select";
import _Icon from "@alifd/next/es/icon";
/**
 * 由于原生数组setter不支持多层弹框问题，故重新封装一个具备数组功能的组件
 */
import React, { Component, useEffect, useState } from "react";
import BoxSlotComponent from "../_components/boxSlotComponent";
// import { createDataSourceItem } from "../cDataSource-setter/commonFn/createDataSourceItem";
import { DialogConfigType, LoadingConfigOpenMode, MessageModeType } from "../cDataSource-setter/type";
import { t } from "../../../src/locale";
import "./index.less";
import { CTreeDataRelationSetter } from "..";
import { alterDataSourceList, getApiParams, getApiParamsByDataSourceId, getCreateDataSourceItem, getDataSourceDataById, getInitDrawerConfig, getOptionsByDataSourceList, updatedApiParamsByMainDataSource } from "./commonFn/index";
import CLoadingConfigSetter from "../_components/cLoadingConfig-setter";
import CMessageConfigSetter from "../_components/cMessageConfig-setter";
import RenderByFormKey from "../_components/renderByFormKey";
import { getRelationList } from "../../_utils/formKeyType";
import { getChangePactAddressObj } from "../cDataSource-setter/commonFn/comIndex";
import { CTreeContext } from "./treeContext";
var CDataSourceListSetter = function CDataSourceListSetter(props) {
  var value = props.value,
    onChange = props.onChange;
  var _useState = useState([]),
    dataSourceSelectList = _useState[0],
    setDataSourceSelectList = _useState[1];
  var _useState2 = useState(-1),
    maxAddNum = _useState2[0],
    setMaxAddNum = _useState2[1];
  var _useState3 = useState(false),
    paramsOpen = _useState3[0],
    setParamsOpen = _useState3[1];
  var _useState4 = useState(value || []),
    dataSourceList = _useState4[0],
    setDataSourceList = _useState4[1];
  var _useState5 = useState(getInitDrawerConfig()),
    drawerConfig = _useState5[0],
    setDrawerConfig = _useState5[1];
  useEffect(function () {
    var _props$field, _props$field$extraPro;
    setDataSourceSelectList(getOptionsByDataSourceList());
    if (((_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) !== undefined) {
      setMaxAddNum(props.field.extraProps.maxAddNum);
    } else if (props.maxAddNum !== undefined) {
      setMaxAddNum(props.maxAddNum);
    }
    var newDataSourceList = updatedApiParamsByMainDataSource(value);
    setDataSourceList(newDataSourceList);
  }, []);
  useEffect(function () {
    onChange(dataSourceList);
  }, [dataSourceList]);
  function onChangeItemDataSource(data) {
    var newList = alterDataSourceList(data, dataSourceList);
    setDataSourceList(newList);
  }
  function handleDataList(type, id) {
    var newArr = getOldArrData();
    if (type === "add") {
      newArr.push(getCreateDataSourceItem());
    } else if (id !== undefined) {
      newArr = newArr.filter(function (item) {
        return item.id !== id;
      });
    }
    setDataSourceList([].concat(newArr));
  }
  function getOldArrData() {
    var result = [];
    return result.concat(dataSourceList);
  }
  function pactAddressChange(data) {
    var obj = drawerConfig.data;
    if (drawerConfig.data.pactAddress) {
      var newData = getChangePactAddressObj(data, drawerConfig.data.pactAddress);
      if (newData) {
        obj.pactAddress = newData;
        onChangeItemDataSource(obj);
      }
    }
  }
  function dataSourceListChange(dataSourceId, option, id) {
    var obj = {
      id: id,
      dataSourceId: dataSourceId ? dataSourceId : "",
      dataSourceName: option ? option.label : "",
      apiParams: dataSourceId ? getApiParamsByDataSourceId(dataSourceId) : [],
      loadingConfig: {
        openType: false,
        openMode: LoadingConfigOpenMode["default"]
      },
      messageConfig: {
        openType: false,
        modeTypeList: [],
        contentList: []
      }
    };
    var res = getDataSourceDataById(dataSourceId);
    if (res !== null && res !== void 0 && res.selectValue && res !== null && res !== void 0 && res.pactAddress) {
      obj.pactAddress = getApiParams(res.pactAddress)[0];
      obj.selectValue = res.selectValue;
    }
    return obj;
  }
  var isShowAddIcon = function isShowAddIcon() {
    var result = true;
    if (maxAddNum !== -1 && dataSourceList.length >= maxAddNum) {
      result = false;
    }
    return result;
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "CDataSourceListSetterBox"
  }, dataSourceList.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      className: "cDataItemOne"
    }, /*#__PURE__*/React.createElement(_Icon, {
      style: {
        cursor: "pointer"
      },
      type: "edit",
      onClick: function onClick() {
        setDrawerConfig({
          index: index,
          visible: true,
          data: item
        });
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: "CDataItemSelectBox"
    }, index === 0 && /*#__PURE__*/React.createElement("div", {
      className: "CDataItemIdName"
    }, t("setter.dataId")), /*#__PURE__*/React.createElement(_Select, {
      hasClear: true,
      value: item.dataSourceId,
      dataSource: dataSourceSelectList,
      placeholder: t("setter.selectPlaceHolder"),
      style: {
        width: "100%"
      },
      onChange: function onChange(e, type, option) {
        var obj = dataSourceListChange(e, option, item.id);
        obj.apiParams = getApiParams(obj.apiParams);
        onChangeItemDataSource(obj);
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: "CDataBtn"
    }, /*#__PURE__*/React.createElement(_Icon, {
      style: {
        cursor: "pointer"
      },
      type: "ashbin",
      onClick: function onClick() {
        handleDataList("remove", item.id);
      }
    })));
  }), isShowAddIcon() && /*#__PURE__*/React.createElement("div", {
    className: "sub_btn"
  }, /*#__PURE__*/React.createElement(_Button, {
    text: true,
    type: "primary",
    onClick: function onClick() {
      handleDataList("add");
    }
  }, /*#__PURE__*/React.createElement("span", null, t("setter.addData")))), /*#__PURE__*/React.createElement(_Drawer, {
    title: t("setter.dataAlter"),
    width: 500,
    placement: "right",
    visible: drawerConfig.visible,
    headerStyle: {
      position: "fixed",
      width: "500px",
      zIndex: 999
    },
    bodyStyle: {
      paddingTop: "50px"
    },
    onClose: function onClose() {
      setDrawerConfig(getInitDrawerConfig());
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "CDataDItemBox"
  }, /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.dataId")
  }, /*#__PURE__*/React.createElement(_Select, {
    hasClear: true,
    value: drawerConfig.data.dataSourceId,
    dataSource: dataSourceSelectList,
    style: {
      width: "100%"
    },
    placeholder: t("setter.selectPlaceHolder"),
    onChange: function onChange(e, type, option) {
      var obj = dataSourceListChange(e, option, drawerConfig.data.id);
      obj.apiParams = getApiParams(obj.apiParams);
      onChangeItemDataSource(obj);
      setDrawerConfig(_extends({}, drawerConfig, {
        data: obj
      }));
    }
  }))), drawerConfig.data !== null && /*#__PURE__*/React.createElement("div", {
    className: "CDataDItemBox"
  }, drawerConfig.data.selectValue === DialogConfigType.PACT && drawerConfig.data.pactAddress && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.pathAddress")
  }, /*#__PURE__*/React.createElement(RenderByFormKey, {
    relationOption: getRelationList(),
    value: drawerConfig.data.pactAddress,
    onChange: pactAddressChange
  })), /*#__PURE__*/React.createElement("div", {
    className: "dataSourceTitle",
    style: {
      display: 'flex',
      justifyContent: 'space-between'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "title"
  }, t('setter.requestParams')), /*#__PURE__*/React.createElement("div", null, t('setter.advanced'), ":", /*#__PURE__*/React.createElement(_Switch, {
    checked: paramsOpen,
    onChange: function onChange(v) {
      setParamsOpen(v);
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: "pramsBox requireBody"
  }, /*#__PURE__*/React.createElement(CTreeContext.Provider, {
    value: {
      paramsOpen: paramsOpen
    }
  }, /*#__PURE__*/React.createElement(CTreeDataRelationSetter, {
    key: drawerConfig.data.id + "_" + drawerConfig.data.dataSourceId,
    value: drawerConfig.data.apiParams // apiParams必须同步远端数据源
    ,
    maxAddNum: -1,
    onChange: function onChange(e) {
      var obj = drawerConfig.data;
      obj.apiParams = e;
      onChangeItemDataSource(obj);
    }
  }))), drawerConfig.data.loadingConfig && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.loadingSet"),
    labelAlign: "top"
  }, /*#__PURE__*/React.createElement(CLoadingConfigSetter, {
    value: drawerConfig.data.loadingConfig,
    onChange: function onChange(e) {
      var obj = drawerConfig.data;
      obj.loadingConfig = e;
      onChangeItemDataSource(obj);
    }
  })), drawerConfig.data.messageConfig && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.tipSet"),
    labelAlign: "top"
  }, /*#__PURE__*/React.createElement(CMessageConfigSetter, {
    value: drawerConfig.data.messageConfig,
    tipOptions: [{
      label: t("setter.tipError"),
      value: MessageModeType.error
    }, {
      label: t("setter.tipSuccess"),
      value: MessageModeType.success
    }],
    onChange: function onChange(e) {
      var obj = drawerConfig.data;
      obj.messageConfig = e;
      onChangeItemDataSource(obj);
    }
  })))));
};
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(CDataSourceListSetter, this.props);
  };
  return _default;
}(Component);
export { _default as default };