"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _reactDraggable = _interopRequireDefault(require("react-draggable"));
var _indexModule = _interopRequireDefault(require("../index.module.scss"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var XtBannerContent = function XtBannerContent(props, ref) {
  var _useState = (0, _react.useState)(),
    complete = _useState[0],
    setComplete = _useState[1]; // 完整数据（由于数据结构嵌套过深，故不做TS类型定义）
  var _useState2 = (0, _react.useState)(),
    psdList = _useState2[0],
    setPsdList = _useState2[1];
  var container = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      psdList: psdList,
      dom: (0, _extends2["default"])({}, psdList !== null && psdList !== void 0 && psdList.layers ? Object.fromEntries(psdList.layers.map(function (_, index) {
        return ["text" + index, document.getElementById("text" + index)];
      })) : {}, {
        container: document.getElementById("container")
      })
    };
  }, [psdList]);
  (0, _react.useEffect)(function () {
    if (!props.schema) return;
    var schema = JSON.parse(props.schema);
    getPsdList(schema[0]);
    setComplete(schema[0]);
  }, [props]);
  var getPsdList = function getPsdList(list) {
    var bodyWidth = document.body.clientWidth;
    setTimeout(function () {
      var _container$current;
      var refWidth = (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.clientWidth;
      var layers = list.layers.map(function (item) {
        var fontSize = Number(item.style.fontSize.replace('vw', ''));
        var value = refWidth / bodyWidth * fontSize;
        var pixels = bodyWidth / 100 * value;
        return (0, _extends2["default"])({}, item, {
          style: (0, _extends2["default"])({}, item.style, {
            width: pixels * item.text.length,
            height: pixels,
            fontSize: value + "vw"
          })
        });
      });
      setPsdList(Object.assign(list, {
        layers: layers
      }));
    }, 0);
  };
  var _onChange = function onChange(value, index) {
    var initLayers = complete.layers;
    var _initLayers$index = initLayers[index],
      style = _initLayers$index.style,
      text = _initLayers$index.text;
    var dynamicSize = style.width / value.length / (document.body.clientWidth / 100); // 文字动态大小
    var changePsdList = Object.assign({}, psdList, {
      layers: [].concat(psdList.layers.map(function (item, current) {
        return (0, _extends2["default"])({}, item, current === index && {
          text: value
        }, {
          style: (0, _extends2["default"])({}, item.style, current === index && {
            fontSize: value.length > text.length ? dynamicSize + "vw" : style.fontSize
          })
        });
      }))
    });
    setPsdList((0, _extends2["default"])({}, changePsdList));
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    id: "container",
    className: _indexModule["default"]['xtBanner-container'],
    style: {
      height: psdList ? 'initial' : '100%'
    },
    ref: container
  }, psdList ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
    src: psdList.bgImg
  }), psdList.layers.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_reactDraggable["default"], {
      key: index,
      bounds: "parent"
    }, /*#__PURE__*/_react["default"].createElement("input", {
      id: "text" + index,
      className: _indexModule["default"]['xtBanner-input'],
      placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9",
      autoComplete: "off",
      value: item.text,
      style: (0, _extends2["default"])({}, item.style, {
        maxWidth: item.style.width,
        maxHeight: item.style.height
      }),
      onChange: function onChange(e) {
        _onChange(e.target.value, index);
      }
    }));
  })) : /*#__PURE__*/_react["default"].createElement("div", {
    className: _indexModule["default"]['xtBanner-no-data']
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "xiatu-rich xt-material"
  }), /*#__PURE__*/_react["default"].createElement("span", null, "\u8BF7\u9009\u62E9\u5934\u56FE\u6A21\u677F")));
};
var _default = /*#__PURE__*/(0, _react.forwardRef)(XtBannerContent);
exports["default"] = _default;