"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 _utils = require("../../utils");
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; }
// import { setCookieData } from '../../utils/utils';

var Graphic = function Graphic(_ref) {
  var psdParse = _ref.psdParse;
  var psdList = psdParse.psdList;
  var _useState = (0, _react.useState)(0),
    containerH = _useState[0],
    setContainerH = _useState[1];
  var _useState2 = (0, _react.useState)(psdList),
    data = _useState2[0],
    setData = _useState2[1]; // 初始化赋值作用：页面渲染

  (0, _react.useEffect)(function () {
    // setCookieData({
    //   token: `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZXNzaW9uSWQiOiJXRUJfV0VCXzRoMmp6MzlsVThTIiwicGxhdGZvcm1JZCI6IldFQiIsImFwcElkIjoiV0VCIiwiZXhwIjoxNjczNjA2NDM2fQ.nFqGFL37PAraU_d0CJDrFQtE8UAgYdeVmJL3LtB_3i0`,
    // });

    if (psdParse !== null && psdParse !== void 0 && psdParse.psdList) {
      var _psdParse$psdList = psdParse === null || psdParse === void 0 ? void 0 : psdParse.psdList,
        width = _psdParse$psdList.width,
        initHeight = _psdParse$psdList.height;
      setData(psdList); // 此处更新：切换图文时，保证可视区域为最新数据
      setContainerH(Math.floor(initHeight * (document.body.clientWidth / width)));
    }
  }, [psdList, psdParse === null || psdParse === void 0 ? void 0 : psdParse.psdList]);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, data ? /*#__PURE__*/_react["default"].createElement("div", {
    className: _indexModule["default"]['graphic-container'],
    style: {
      height: containerH
    }
  }, data.layers.map(function (item, index) {
    var type = item.type,
      url = item.url,
      text = item.text,
      style = item.style,
      zIndex = item.zIndex,
      width = item.width,
      itemHeight = item.height;
    var textWidth;
    var textHeight;
    var transform;
    if (type === 'text') {
      var fontSize = style.fontSize,
        family = style.fontFamily,
        isTextarea = style.isTextarea;
      var scaleFontSize = Number(fontSize.replace('vw', ''));
      var clientW = document.body.clientWidth / 100;
      var clientH = document.body.clientHeight / 100;
      var size = Math.ceil(scaleFontSize * clientW);
      var pixelW = (0, _utils.getActualWidthOfChars)(text, {
        size: size > 12 ? size : 12,
        family: family
      });
      textWidth = isTextarea ? width : Math.ceil(pixelW / clientW) + "%";
      textHeight = isTextarea ? itemHeight : Math.floor(size / clientH) + "%";
      transform = size < 12 ? "scale(" + Math.floor(size) / 12 + ")" : 1;
    }
    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
      key: index
    }, type === 'image' ? /*#__PURE__*/_react["default"].createElement("img", {
      src: url,
      style: item
    }) : null, type === 'text' ? /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _extends2["default"])({}, style, {
        zIndex: zIndex,
        width: textWidth,
        height: textHeight,
        transform: transform
      }, transform && {
        transformOrigin: "left top"
      }, {
        whiteSpace: 'pre-wrap'
      }, style.isTextarea && {
        overflowY: 'scroll'
      })
    }, text) : null);
  })) : /*#__PURE__*/_react["default"].createElement("div", {
    className: _indexModule["default"]['graphic-null']
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: _indexModule["default"]['graphic-null-icon']
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: _indexModule["default"]['graphic-null-text']
  }, "\u8BF7\u7F16\u8F91\u60A8\u7684\u56FE\u6587")));
};
var _default = Graphic;
exports["default"] = _default;