import { multiFunDynamicText } from '../../configuration/constants';

export default (editor, opt = {}) => {
  const domc = editor.DomComponents;
  const defaultType = domc.getType('text');
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;

  // DEMO - 文本
  domc.addType(multiFunDynamicText, {
    model: defaultModel.extend({
      defaults: {
        ...defaultModel.prototype.defaults,
        name: "动态文本",
        resizable: true,
        dmode: 'absolute',
        highlightable: false,
        droppable: false,
        traits: [
          {
            name: 'source',
            label: '属性字段',
            changeProp: 1,
          },
          {
            name: "borderLeftColor",
            label: "左边框颜色",
            changeProp: 1,
            type: "color",
          },
          {
            name: "borderLeftWidth",
            label: "左边框宽度",
            changeProp: 1,
            type: "number",
          },
          {
            name: 'colorMapValue',
            label: '颜色映射(字段值)',
            changeProp: 1,
          },
          {
            name: 'colorMapColor',
            label: '颜色映射(颜色)',
            changeProp: 1,
          },
        ],
        "source": "",
        "borderLeftColor": '#9BBFEA',
        "borderLeftWidth": 1,
        "colorMapValue": '异常,正常',
        "colorMapColor": '#FF091D,#FFFFFF',
        script: function () {
          const source = ('{[ source ]}').toString();
          const borderLeftColor = ('{[ borderLeftColor ]}').toString();
          const borderLeftWidth = ('{[ borderLeftWidth ]}');
          const colorMapValue = ('{[ colorMapValue ]}');
          const colorMapColor = ('{[ colorMapColor ]}');
          $(this).css({'border-left': 'solid','border-left-color': borderLeftColor, 'border-left-width': borderLeftWidth});
          $(this).attr('data-source', source);
          $(this).attr('data-color-map-value', colorMapValue);
          $(this).attr('data-color-map-color', colorMapColor);
        }
      }
    }, {
      isComponent(el) {
        if (el.getAttribute && el.getAttribute('data-gjs-type') == multiFunDynamicText) {
          return { type: multiFunDynamicText };
        }
      }
    }),
    view: defaultView.extend({
      init() {
        const evn = 'change:source change:borderLeftColor change:borderLeftWidth change:colorMapValue change:colorMapColor';
        this.listenTo(this.model, evn, this.updateScript);
        this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
      }
    })
  });
}
