import { groupText, CATEGORIES, dynamicText } from '../../configuration/constants'
import { throttle } from '../../utils'

export default {

  // 组件名称
  name: groupText,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${groupText}" class="${groupText}"></div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${groupText} {
          padding: 10px;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: "组合文本",
      attributes: { class: 'fa fa-align-left' },
      // label: `
      // <svg class="gjs-block-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" ><path d="M127.798537 489.38956l225.925317 0 0-271.1288-225.925317 0L127.798537 489.38956zM127.798537 805.739239l225.925317 0 0-271.1288-225.925317 0L127.798537 805.739239zM398.935523 805.739239l225.92634 0 0-271.1288-225.92634 0L398.935523 805.739239zM670.054089 805.739239l225.925317 0 0-271.1288-225.925317 0L670.054089 805.739239zM398.935523 489.38956l225.92634 0 0-271.1288-225.92634 0L398.935523 489.38956zM670.054089 489.38956l225.925317 0 0-271.1288-225.925317 0L670.054089 489.38956z"></path></svg>
      //   <div class="gjs-block-label">组合文本</div>
      // `,
    };
  },

  spOptions() {
    return {
      label: '组合文本',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/81ed36a6-600e-4101-abea-b41f5f7e37be?# 《组合文本》',
      inPorts: [{
        uuid: 'in1',
        subType: 'json',
        description: {
          zh_CN: '输入Json'
        }
      }],
    }
  },

  // 组件属性
  componentOptions() {
    return {
      droppable: true,
      resizable: true,
      dmode: 'absolute',
      highlightable: true,
      traits: [{
        name: 'fontFamily',
        label: '特殊字体',
        changeProp: 1,
        type: 'select',
        options: ['inherit', 'DS-Digital', '庞门正道'],
      }],
      "fontFamily": "inherit"
    }
  },

  onModelScript() {
    const fontFamily = ('{[ fontFamily ]}').toString();
    const childNodes = this.childNodes;
    $(this).css("font-family", fontFamily);
    if (window.spSocket) {
      var eventName = `call-` + this.getAttribute('id');

      function get(object, path, defaultValue) {
        const paths = path.split('.');

        var result = paths.reduce(function (obj, key) {
          if (!obj) {
            return;
          }
          return obj[key]
        }, object);

        return result === undefined ? defaultValue : result;
      }

      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          const dataObj = JSON.parse(_data.data.in1);
          childNodes.forEach(function (node) {
            if (node.getAttribute) {
              const key = node.getAttribute('data-source');
              const value = get(dataObj, key);
              if (key in dataObj) {
                $(node).text(value);
              }
            }
          })
        }
      });
    }
  },

  onViewInit() {
    this.listenTo(this.em, 'update:component:style:height update:component:style:width', throttle.bind(this, this.updateScript.bind(this)));

    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
        <div class="${dynamicText}" data-gjs-type="${dynamicText}">文本显示</div>
        <div class="${dynamicText}" data-gjs-type="${dynamicText}">文本显示</div>
        <div class="${dynamicText}" data-gjs-type="${dynamicText}">文本显示</div>
      `)
    }
    const evn = 'change:fontFamily';
    this.listenTo(this.model, evn, this.updateScript);
  }
}
