"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireWildcard(require("react"));
var _edit = _interopRequireDefault(require("../../components/material/edit"));
var _content = _interopRequireDefault(require("./content"));
var _base = require("../../api/base");
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 XtGraphic = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2["default"])(XtGraphic, _Component);
  function XtGraphic(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    _this.getMediaCategoryListData = /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
      var _yield$getMediaCatego, data;
      return _regenerator["default"].wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return (0, _base.getMediaCategoryList)({
              parentId: 1
            });
          case 2:
            _yield$getMediaCatego = _context.sent;
            data = _yield$getMediaCatego.data;
            if (data) {
              data.unshift({
                ctgId: -1,
                parentId: 1,
                sub: [],
                title: '推荐'
              });
              _this.setState({
                mediaCategoryList: data,
                headerIndex: data[0].ctgId
              });
            }
          case 5:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    _this.getMediaListData = /*#__PURE__*/function () {
      var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(sceneId) {
        var _yield$getMediaList, data;
        return _regenerator["default"].wrap(function _callee2$(_context2) {
          while (1) switch (_context2.prev = _context2.next) {
            case 0:
              if (sceneId === void 0) {
                sceneId = -1;
              }
              _context2.next = 3;
              return (0, _base.getMediaList)({
                mediaType: 'HEAD_IMAGE',
                permission: 'PUBLIC',
                isRecommend: 1,
                sceneId: sceneId,
                colorId: -1,
                styleId: -1
              });
            case 3:
              _yield$getMediaList = _context2.sent;
              data = _yield$getMediaList.data;
              if (data) _this.setState({
                mediaList: data.list
              });
            case 6:
            case "end":
              return _context2.stop();
          }
        }, _callee2);
      }));
      return function (_x) {
        return _ref2.apply(this, arguments);
      };
    }();
    _this.handleHeaderIndex = function (e) {
      _this.setState({
        headerIndex: e
      });
      _this.getMediaListData(e);
    };
    _this.handleListIndex = /*#__PURE__*/function () {
      var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(e) {
        var data, _data$data, psdJson, psdFile, bgImg, _schema;
        return _regenerator["default"].wrap(function _callee3$(_context3) {
          while (1) switch (_context3.prev = _context3.next) {
            case 0:
              _context3.next = 2;
              return (0, _base.getMediaQuery)({
                mediaId: e
              });
            case 2:
              data = _context3.sent;
              if (data) {
                _data$data = data.data, psdJson = _data$data.psdJson, psdFile = _data$data.psdFile;
                bgImg = JSON.parse(psdJson).children.find(function (item) {
                  return item.type === 'image';
                }).url;
                _schema = Object.assign({}, {
                  key: psdFile.replace(/.+?(\w+)\.[\w?=]+$$/g, '$1'),
                  source: psdFile,
                  bgImg: bgImg,
                  layers: JSON.parse(psdJson).children.filter(function (item) {
                    return item.type === 'text';
                  }),
                  mediaId: e
                });
                _this.setState({
                  schema: JSON.stringify([_schema]),
                  listIndex: e
                });
              }
            case 4:
            case "end":
              return _context3.stop();
          }
        }, _callee3);
      }));
      return function (_x2) {
        return _ref3.apply(this, arguments);
      };
    }();
    _this.onSubmit = function () {
      var _this$contentRef$curr = _this.contentRef.current,
        dom = _this$contentRef$curr.dom,
        psdList = _this$contentRef$curr.psdList;
      var _dom$container$getBou = dom.container.getBoundingClientRect(),
        containerLeft = _dom$container$getBou.left,
        containerTop = _dom$container$getBou.top,
        width = _dom$container$getBou.width,
        height = _dom$container$getBou.height;
      var changePsdList = Object.assign(psdList, {
        layers: [].concat(psdList.layers.map(function (item, index) {
          var text = dom["text" + index].getBoundingClientRect();
          // const heightVw = text.height / (document.body.clientWidth / 100); // 转换成vw
          // const fontSize = heightVw / (width / document.body.clientWidth); // 按照比例转换为原来数据
          var fontSize = Number(item.style.fontSize.replace('vw', '')) / (width / document.body.clientWidth);
          var left = (text.left - containerLeft) / width * 100 + "%";
          var top = (text.top - containerTop) / height * 100 + "%";
          return (0, _extends2["default"])({}, item, {
            style: (0, _extends2["default"])({}, item.style, {
              left: left,
              top: top,
              fontSize: fontSize + "vw"
            })
          });
        }))
      });
      _this.props.onChange({
        psdList: [changePsdList],
        selectIdx: 0
      });
      _this.setState({
        dialogVisible: false,
        schema: JSON.stringify([changePsdList]),
        listIndex: 0
      });
    };
    _this.onCancel = function () {
      _this.setState({
        dialogVisible: false,
        schema: JSON.stringify(_this.props.value.psdList),
        listIndex: 0
      });
    };
    _this.state = {
      mediaList: [],
      listIndex: 0,
      mediaCategoryList: [],
      headerIndex: 0,
      dialogVisible: false,
      schema: ''
    };
    _this.contentRef = /*#__PURE__*/(0, _react.createRef)();
    return _this;
  }
  var _proto = XtGraphic.prototype;
  _proto.componentDidMount = function componentDidMount() {
    this.setState({
      schema: JSON.stringify(this.props.value.psdList)
    });
    this.getMediaCategoryListData();
    this.getMediaListData();
  };
  _proto.render = function render() {
    var _this2 = this;
    var _this$state = this.state,
      mediaList = _this$state.mediaList,
      listIndex = _this$state.listIndex,
      mediaCategoryList = _this$state.mediaCategoryList,
      headerIndex = _this$state.headerIndex,
      schema = _this$state.schema;
    return /*#__PURE__*/_react["default"].createElement(_edit["default"], {
      name: "\u5934\u56FE",
      mediaType: 'HEAD_IMAGE',
      dialogVisible: this.state.dialogVisible,
      handleVisible: function handleVisible(e) {
        return _this2.setState({
          dialogVisible: e
        });
      },
      list: mediaList,
      listIndex: listIndex,
      handleListIndex: this.handleListIndex,
      header: mediaCategoryList,
      headerIndex: headerIndex,
      handleHeaderIndex: this.handleHeaderIndex,
      content: mediaList ? /*#__PURE__*/_react["default"].createElement(_content["default"], {
        ref: this.contentRef,
        schema: schema
      }) : null,
      onSubmit: this.onSubmit,
      onCancel: this.onCancel
    });
  };
  return XtGraphic;
}(_react.Component);
exports["default"] = XtGraphic;