"use strict";

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
exports.__esModule = true;
var react_1 = require("react");
var utils_1 = require("../../utils/utils");
var utils_2 = require("../../utils");
var index_module_scss_1 = require("./index.module.scss");
var Graphic = function Graphic(_a) {
  var psdParse = _a.psdParse;
  var psdList = psdParse.psdList;
  var _b = react_1.useState(0),
    containerH = _b[0],
    setContainerH = _b[1];
  var _c = react_1.useState(psdList),
    data = _c[0],
    setData = _c[1]; // 初始化赋值作用：页面渲染
  react_1.useEffect(function () {
    utils_1.setCookieData({
      token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZXNzaW9uSWQiOiJXRUJfV0VCX2c3OTloQ2d3dWFDIiwicGxhdGZvcm1JZCI6IldFQiIsImFwcElkIjoiV0VCIiwiZXhwIjoxNjc3MDU0NjkxfQ.wegq5Tx9rfD1zyIwiy0fU-Hv6RcPiXXbXqX3Fpw4k2w"
    });
    if (psdParse === null || psdParse === void 0 ? void 0 : psdParse.psdList) {
      var _a = psdParse === null || psdParse === void 0 ? void 0 : psdParse.psdList,
        width = _a.width,
        initHeight = _a.height;
      setData(psdList); // 此处更新：切换图文时，保证可视区域为最新数据
      setContainerH(Math.floor(initHeight * (document.body.clientWidth / width)));
    }
  }, [psdList, psdParse === null || psdParse === void 0 ? void 0 : psdParse.psdList]);
  return react_1["default"].createElement(react_1["default"].Fragment, null, data ? react_1["default"].createElement("div", {
    className: index_module_scss_1["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 = utils_2.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 react_1["default"].createElement(react_1.Fragment, {
      key: index
    }, type === 'image' ? react_1["default"].createElement("img", {
      src: url,
      style: item
    }) : null, type === 'text' ? react_1["default"].createElement("div", {
      style: __assign(__assign(__assign(__assign(__assign({}, style), {
        zIndex: zIndex,
        width: textWidth,
        height: textHeight,
        transform: transform
      }), transform && {
        transformOrigin: "left top"
      }), {
        whiteSpace: 'pre-wrap'
      }), style.isTextarea && {
        overflowY: 'scroll'
      })
    }, text) : null);
  })) : react_1["default"].createElement("div", {
    className: index_module_scss_1["default"]['graphic-null']
  }, react_1["default"].createElement("div", {
    className: index_module_scss_1["default"]['graphic-null-icon']
  }), react_1["default"].createElement("div", {
    className: index_module_scss_1["default"]['graphic-null-text']
  }, "\u8BF7\u7F16\u8F91\u60A8\u7684\u56FE\u6587")));
};
exports["default"] = Graphic;