import "./TextPanel.css";
/* script */
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
import Panel from './Panel';
import Icon from '../Icon';
import request from '../request';
import ossDprURL from '../oss/oss-dpr-url';
import { createComponentName, componentMixin } from '../_utils/component';
import cloneDeep from 'lodash/cloneDeep';
import LoadMore from '../LoadMore';
const PREVIEW_WIDTH = 110;
const PREVIEW_HEIGHT = 74;
const cachesMap = {};
const __vue_script__ = {
  name: createComponentName('editor-text-panel'),
  components: {
    Panel,
    LoadMore,
    Icon
  },
  mixins: [componentMixin],
  props: {
    // 默认字体
    fonts: {
      type: Array,
      default: () => [{
        label: '标题',
        displayFontSize: 28,
        data: {
          type: 'text',
          content: '双击编辑文字',
          fontFamily: 'SourceHanSansSC-Bold',
          fontWeight: 700,
          fontSize: 70,
          textAlign: 'center',
          color: '#333',
          ruleIndex: -1
        }
      }, {
        label: '正文',
        displayFontSize: 16,
        data: {
          type: 'text',
          content: '双击编辑文字',
          fontFamily: 'SourceHanSansSC-Regular',
          fontSize: 20,
          textAlign: 'center',
          color: '#333',
          ruleIndex: -1
        }
      }]
    },
    // 获取字体数据的平台ID
    platformId: {
      type: Number,
      default: 256
    },
    // 业务场景，二进制 1：web  2：淘宝 web 4： 超级详情 8：APP 16: H5 32: 小程序
    channels: {
      type: [String, Number]
    },
    title: {
      type: String
    }
  },

  data() {
    return {
      textEffects: [],
      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;
    },

    loadMoreData() {
      return request.get('/api/materials', {
        params: {
          page_num: this.pagination.num + 1,
          page_size: this.pagination.size,
          type: 'text_effect',
          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.textEffects.push(...res.data);
      });
    },

    getTextEffect(id) {
      if (cachesMap[id]) return this.$emit('addElement', cloneDeep(cachesMap[id]));
      request.get(`/api/materials/${id}`).then(res => {
        const model = JSON.parse(res.data.content).model;
        model.materialId = res.data.id;
        model.disableColor = true;
        model.ruleIndex = -1;
        cachesMap[id] = model;
        this.$emit('addElement', cloneDeep(model));
      }).catch(err => {
        throw err;
      });
    },

    getTextResourceCssBg(item) {
      let url = item.preview && item.preview.url; // zoom with max width or height

      if (url) {
        url += `?x-oss-process=image/resize,w_${Math.ceil(PREVIEW_WIDTH * 2)},h_${Math.ceil(PREVIEW_HEIGHT * 2)}/interlace,1`;
      }

      return url ? ossDprURL(`url(${url})`) : null;
    }

  }
};
/* template */

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

  var _h = _vm.$createElement;

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

  return _c("Panel", {
    attrs: {
      name: "text",
      title: _vm.title
    },
    scopedSlots: _vm._u([{
      key: "tab",
      fn: function (ref) {
        var active = ref.active;
        return [_vm._t("label", [_c("Icon", {
          attrs: {
            name: "text"
          }
        }), _vm._v(" "), _c("span", [_vm._v("文字")])], {
          active: active
        })];
      }
    }])
  }, [_c("template", {
    slot: "title"
  }, [_vm._t("title")], 2), _vm._v(" "), _vm._t("default", [_c("div", {
    class: _vm.bem()
  }, [_c("ul", {
    class: _vm.bem("list")
  }, [_vm._l(_vm.fonts, function (font) {
    return _c("li", {
      key: font.label,
      style: {
        fontSize: font.displayFontSize + "px",
        fontWeight: font.data.fontWeight,
        fontFamily: font.data.fontFamily
      },
      on: {
        click: function ($event) {
          _vm.$emit("addElement", font.data);
        }
      }
    }, [_c("span", [_vm._v(_vm._s(font.label))])]);
  }), _vm._v(" "), _vm._l(_vm.textEffects, function (item) {
    return _c("li", {
      key: item.id,
      style: {
        backgroundImage: _vm.getTextResourceCssBg(item)
      },
      on: {
        click: function ($event) {
          _vm.getTextEffect(item.id);
        }
      }
    });
  })], 2), _vm._v(" "), _c("LoadMore", {
    class: _vm.bem("loadmore"),
    attrs: {
      loadmore: _vm.loadMore,
      isNoMore: _vm.pagination.num >= Math.ceil(_vm.pagination.total / _vm.pagination.size)
    }
  })], 1)])], 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);