import "./GraphPanel.css";
/* script */
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
import Panel from './Panel';
import Icon from '../Icon';
import request from '../request';
import { createComponentName, componentMixin } from '../_utils/component';
import LoadMore from '../LoadMore';
import cloneDeep from 'lodash/cloneDeep';
const cachesMap = {};
const __vue_script__ = {
  name: createComponentName('editor-graph-panel'),
  components: {
    LoadMore,
    Panel,
    Icon
  },
  mixins: [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: {
    async loadMore() {
      await this.loadMoreData();
      return this.hasMore;
    },

    getGraph(id) {
      if (cachesMap[id]) return this.$emit('addElement', cloneDeep(cachesMap[id]));
      request.get(`/api/materials/${id}`).then(res => {
        let 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
        */

        this.$emit('addElement', cloneDeep(element));
      }).catch(err => {
        throw err;
      });
    },

    loadMoreData() {
      return request.get('/api/materials', {
        params: {
          page_num: this.pagination.num + 1,
          page_size: this.pagination.size,
          type: 'graph',
          channels: this.channels,
          platforms: this.platformId
        }
      }).then(res => {
        this.__listLenght = res.data.length;
        this.pagination.total = res.pagination.total;
        this.pagination.num = res.pagination.num;
        this.graphEffects.push(...res.data);
      });
    }

  }
};
/* template */

var __vue_render__ = function () {
  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 (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 ($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 */

const __vue_inject_styles__ = undefined;
/* scoped */

const __vue_scope_id__ = undefined;
/* module identifier */

const __vue_module_identifier__ = undefined;
/* functional template */

const __vue_is_functional_template__ = false;
/* component normalizer */

import __vue_normalize__ from '../_utils/vue-normalize-component.js';
/* style inject */

/* style inject SSR */

export default __vue_normalize__({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);