"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs2/regenerator"));

require("regenerator-runtime/runtime");

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/asyncToGenerator"));

require("./GraphPanel.css");

var _Panel = _interopRequireDefault(require("./Panel"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _request = _interopRequireDefault(require("../request"));

var _component = require("../_utils/component");

var _LoadMore = _interopRequireDefault(require("../LoadMore"));

var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));

var _vueNormalizeComponent = _interopRequireDefault(require("../_utils/vue-normalize-component.js"));

/* script */
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var cachesMap = {};
var __vue_script__ = {
  name: (0, _component.createComponentName)('editor-graph-panel'),
  components: {
    LoadMore: _LoadMore.default,
    Panel: _Panel.default,
    Icon: _Icon.default
  },
  mixins: [_component.componentMixin],
  props: {
    // 获取图形数据的平台ID
    platformId: {
      type: Number,
      default: 32
    },
    // 业务场景，二进制 1：web  2：淘宝 web 4： 超级详情 8：APP 16: H5 32: 小程序
    channels: {
      type: [String, Number]
    },
    title: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      graphEffects: [],
      targetWidth: 148,
      pagination: {
        num: 0,
        size: 40,
        total: 10000
      },
      autoLoadingTimes: Infinity
    };
  },

  computed: {
    hasMore() {
      return (this.pagination.num - 1) * this.pagination.size + this.__listLenght < this.pagination.total;
    }

  },
  methods: {
    loadMore() {
      var _this = this;

      return (0, _asyncToGenerator2.default)(
      /*#__PURE__*/
      _regenerator.default.mark(function _callee() {
        return _regenerator.default.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return _this.loadMoreData();

              case 2:
                return _context.abrupt("return", _this.hasMore);

              case 3:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }))();
    },

    getGraph(id) {
      var _this2 = this;

      if (cachesMap[id]) return this.$emit('addElement', (0, _cloneDeep.default)(cachesMap[id]));

      _request.default.get(`/api/materials/${id}`).then(function (res) {
        var element = JSON.parse(res.data.content);
        if (element.model) element = element.model;
        cachesMap[id] = element;
        element.materialId = res.data.id;
        element.disableColor = true;
        element.ruleIndex = -1; // Reset position

        delete element.left;
        delete element.top;
        /**
         * 添加的编辑器元素数据
         * @arg element
        */

        _this2.$emit('addElement', (0, _cloneDeep.default)(element));
      }).catch(function (err) {
        throw err;
      });
    },

    loadMoreData() {
      var _this3 = this;

      return _request.default.get('/api/materials', {
        params: {
          page_num: this.pagination.num + 1,
          page_size: this.pagination.size,
          type: 'graph',
          channels: this.channels,
          platforms: this.platformId
        }
      }).then(function (res) {
        var _this3$graphEffects;

        _this3.__listLenght = res.data.length;
        _this3.pagination.total = res.pagination.total;
        _this3.pagination.num = res.pagination.num;

        (_this3$graphEffects = _this3.graphEffects).push.apply(_this3$graphEffects, res.data);
      });
    }

  }
};
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c("Panel", {
    attrs: {
      name: "graph",
      title: _vm.title
    },
    scopedSlots: _vm._u([{
      key: "tab",
      fn: function fn(ref) {
        var active = ref.active;
        return [_vm._t("label", [_c("Icon", {
          attrs: {
            name: "graph"
          }
        }), _vm._v(" "), _c("span", [_vm._v("图形")])], {
          active: active
        })];
      }
    }])
  }, [_c("template", {
    slot: "title"
  }, [_vm._t("title")], 2), _vm._v(" "), _vm._t("default", [_c("ul", {
    class: _vm.bem("list")
  }, _vm._l(_vm.graphEffects, function (item, j) {
    return _c("li", {
      key: j,
      style: {
        backgroundImage: item.preview && item.preview.url ? "url(" + item.preview.url + "?x-oss-process=image/resize,w_" + _vm.targetWidth + "/interlace,1" + ")" : null
      },
      on: {
        click: function click($event) {
          _vm.getGraph(item.id);
        }
      }
    });
  }), 0), _vm._v(" "), _c("LoadMore", {
    class: _vm.bem("loadmore"),
    attrs: {
      loadmore: _vm.loadMore,
      autoLoadingTimes: _vm.autoLoadingTimes,
      showNoMore: false
    }
  })])], 2);
};

var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = undefined;
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* component normalizer */

/* style inject */

/* style inject SSR */
var _default = (0, _vueNormalizeComponent.default)({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);

exports.default = _default;