function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import React, { useEffect, useMemo, useState } from 'react';
import arrow from '../images/arrow.png';
import arrow3 from '../images/arrow3.png';
import './index.less';
import { BizSelect, IconFont } from '@zgfe/business-lib';
import { Button, Input, Modal, Tooltip } from 'antd';
import { fieldsList, initPlatform, nameIsFine, targetTableColumns } from '../utils';
import _ from 'lodash';
export var classPrefix = 'fusion-item';
var FusionItem = function FusionItem(props) {
  var label = props.label,
    enableDelete = props.enableDelete,
    tableColumns = props.tableColumns,
    selectList = props.selectList,
    onDelete = props.onDelete,
    onChange = props.onChange;
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    targetValue = _useState2[0],
    setTargetValue = _useState2[1];
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_useState3, 2),
    sourceValue = _useState4[0],
    setSourceValue = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    showEnumModal = _useState6[0],
    setShowEnumModal = _useState6[1];
  var _useState7 = useState(initPlatform),
    _useState8 = _slicedToArray(_useState7, 2),
    platform = _useState8[0],
    setPlatform = _useState8[1];
  var _useState9 = useState(true),
    _useState0 = _slicedToArray(_useState9, 2),
    isInit = _useState0[0],
    setIsInit = _useState0[1];
  var _useState1 = useState(''),
    _useState10 = _slicedToArray(_useState1, 2),
    errorTip = _useState10[0],
    setErrorTip = _useState10[1];
  var _useState11 = useState(),
    _useState12 = _slicedToArray(_useState11, 2),
    sourceType = _useState12[0],
    setSourceType = _useState12[1];
  useEffect(function () {
    if (props.value) {
      var _props$value = props.value,
        source = _props$value.source,
        target = _props$value.target;
      setSourceValue(source);
      setTargetValue(target);
      setSourceType(target === null || target === void 0 ? void 0 : target.webType);
      if (target === null || target === void 0 ? void 0 : target.platform) {
        setPlatform(function () {
          var _ref = target.platform || {},
            js = _ref.js,
            android = _ref.android,
            ios = _ref.ios;
          var list = _.cloneDeep(initPlatform);
          list[0].source = js;
          list[1].source = android;
          list[2].source = ios;
          return list;
        });
      }
    }
    setTimeout(function () {
      setIsInit(false);
    }, 0);
  }, []);
  useEffect(function () {
    if (isInit || !onChange) return;
    if ((targetValue === null || targetValue === void 0 ? void 0 : targetValue.name) && !targetValue.hasMapping) {
      var msg = nameIsFine(props.type, targetValue.name);
      setErrorTip(msg);
    }
    onChange({
      source: sourceValue,
      target: _objectSpread({}, targetValue)
    });
  }, [sourceValue, targetValue]);
  var disableList = useMemo(function () {
    if (!selectList) return;
    var data = [];
    selectList.forEach(function (item) {
      var _item$target;
      if ((_item$target = item.target) === null || _item$target === void 0 ? void 0 : _item$target.hasMapping) {
        var _props$value2, _props$value3;
        if (((_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.target) && item.target.name === ((_props$value3 = props.value) === null || _props$value3 === void 0 ? void 0 : _props$value3.target.name)) return;
        data.push({
          value: item.target.name
        });
      }
    });
    return data;
  }, [selectList]);
  // 来源下拉框数组
  var sourceOption = useMemo(function () {
    if (!tableColumns) return [];
    if (!(targetValue === null || targetValue === void 0 ? void 0 : targetValue.webType)) return tableColumns;
    return tableColumns.filter(function (item) {
      return item.webType === targetValue.webType;
    });
  }, [tableColumns, targetValue === null || targetValue === void 0 ? void 0 : targetValue.webType]);
  // 目标下拉框数组
  var targetOption = useMemo(function () {
    var option = targetTableColumns[props.type - 1] || [];
    if (!sourceType) return option;
    return option.filter(function (item) {
      return item.webType === sourceType;
    });
  }, [sourceType]);
  var onChangeTarget = function onChangeTarget(targetData, key) {
    setTargetValue(function (data) {
      var newData = _.cloneDeep(data || {});
      newData[key] = targetData.trim();
      return newData;
    });
  };
  var onChangeSource = function onChangeSource(value, index) {
    setPlatform(function (list) {
      var nList = _.cloneDeep(list);
      nList[index].source = value;
      return nList;
    });
  };
  var onOk = function onOk() {
    setShowEnumModal(false);
    setTargetValue(function (data) {
      var newData = _.cloneDeep(data || {});
      newData.platform = {
        js: platform[0].source,
        android: platform[1].source,
        ios: platform[2].source
      };
      return newData;
    });
  };
  var targetNode = function targetNode() {
    if (!(targetValue === null || targetValue === void 0 ? void 0 : targetValue.hasMapping)) {
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(classPrefix, "-target ").concat(classPrefix, "-box-width")
      }, /*#__PURE__*/React.createElement(Input, {
        value: targetValue === null || targetValue === void 0 ? void 0 : targetValue.name,
        placeholder: "\u8BF7\u8F93\u5165\u5C5E\u6027\u540D\u79F0",
        maxLength: 50,
        onChange: function onChange(e) {
          return onChangeTarget(e.target.value, 'name');
        }
      }), /*#__PURE__*/React.createElement(BizSelect, {
        value: {
          value: (targetValue === null || targetValue === void 0 ? void 0 : targetValue.webType) || 'string'
        },
        options: fieldsList,
        className: "".concat(classPrefix, "-box-select"),
        keyField: "value",
        onChange: function onChange(data) {
          return onChangeTarget(data.value, 'webType');
        }
      }), errorTip ? /*#__PURE__*/React.createElement("div", {
        className: "".concat(classPrefix, "-error-tip")
      }, errorTip) : null);
    } else {
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(classPrefix, "-target2 ").concat(classPrefix, "-box-width")
      }, /*#__PURE__*/React.createElement(BizSelect, {
        value: {
          value: targetValue === null || targetValue === void 0 ? void 0 : targetValue.name
        },
        options: targetOption,
        className: "".concat(classPrefix, "-target2-select"),
        placeholder: "\u8BF7\u9009\u62E9\u6620\u5C04\u5B57\u6BB5",
        keyField: "value",
        enableSearch: true,
        customLabel: function customLabel(node, option) {
          return /*#__PURE__*/React.createElement("div", {
            className: "".concat(classPrefix, "-target2-select-label")
          }, node, option.info && (/*#__PURE__*/React.createElement(Tooltip, {
            title: option.info,
            zIndex: 100000
          }, /*#__PURE__*/React.createElement(IconFont, {
            className: "".concat(classPrefix, "-target2-select-icon"),
            type: "tishi"
          }))));
        },
        disableItemList: disableList,
        onChange: function onChange(data) {
          setTargetValue({
            hasMapping: true,
            name: data.value,
            webType: data.webType
          });
        }
      }), (props.type === 1 || props.type === 2) && (targetValue === null || targetValue === void 0 ? void 0 : targetValue.name) === '$pl' ? (/*#__PURE__*/React.createElement(Button, {
        type: "primary",
        onClick: function onClick() {
          return setShowEnumModal(true);
        }
      }, "\u679A\u4E3E\u503C\u6620\u5C04")) : null);
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: classPrefix
  }, /*#__PURE__*/React.createElement(BizSelect, {
    options: sourceOption,
    className: "".concat(classPrefix, "-box-width"),
    placeholder: "\u8BF7\u9009\u62E9".concat(label),
    labelField: "label",
    keyField: "name",
    enableSearch: true,
    value: {
      name: sourceValue
    },
    onChange: function onChange(data) {
      setSourceValue(data.name);
      setSourceType(data.webType);
    }
  }), /*#__PURE__*/React.createElement("img", {
    className: "".concat(classPrefix, "-arrow-width"),
    src: arrow
  }), targetNode(), enableDelete && (/*#__PURE__*/React.createElement(IconFont, {
    type: "qingchu",
    className: "".concat(classPrefix, "-del"),
    onClick: onDelete
  })), /*#__PURE__*/React.createElement(Modal, {
    open: showEnumModal,
    title: "\u679A\u4E3E\u503C\u6620\u5C04",
    className: "".concat(classPrefix, "-modal"),
    width: 720,
    onCancel: function onCancel() {
      setShowEnumModal(false);
    },
    onOk: onOk
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "-modal-title")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "-modal-input1")
  }, "\u6765\u6E90\u8868"), /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "-modal-input2")
  }, "\u76EE\u6807\u8868")), platform === null || platform === void 0 ? void 0 : platform.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(classPrefix, "-modal-item")
    }, /*#__PURE__*/React.createElement(Input, {
      showCount: true,
      maxLength: 20,
      className: "".concat(classPrefix, "-modal-input1"),
      placeholder: "\u8BF7\u8F93\u5165",
      value: item.source,
      onChange: function onChange(e) {
        return onChangeSource(e.target.value, index);
      }
    }), /*#__PURE__*/React.createElement("img", {
      className: "".concat(classPrefix, "-modal-img"),
      src: arrow3
    }), /*#__PURE__*/React.createElement(Input, {
      className: "".concat(classPrefix, "-modal-input2"),
      value: item.target,
      readOnly: true
    }));
  })));
};
export default FusionItem;