import { tagItem, CATEGORIES } from '../../configuration/constants'

export default {

  // 组件名称
  name: tagItem,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${tagItem}" class="${tagItem}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${tagItem} {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 16px;
          font-size: 14px;
          font-weight: normal;
          color: #333;
          background-color: #fafafa;
        }
        .${tagItem}-label {
            white-space: nowrap;
            opacity: 0.8;
        }
        .${tagItem}-label label {
            margin: 0;
        }
        .${tagItem}-value {
            white-space: nowrap;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .${tagItem}-value h5 {
            margin: 0;
        }
        .${tagItem}-value h5 + span {
            margin-left: 8px;
            opacity: 0.8;
        }
        .${tagItem}.lg {
            width: 350px;
            height: 80px;
        }
        .${tagItem}.lg .${tagItem}-value h5 {
            font-size: 24px;
        }
        .${tagItem}.md {
            width: 220px;
            height: 60px;
        }
        .${tagItem}.md .${tagItem}-value h5 {
            font-size: 18px;
        }

      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: "标签",
      attributes: { class: 'fa fa-tag' },
    };
  },

  spOptions() {
    return {
      label: '标签',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/cb4255ff-952f-4bd7-bedd-737fc1718355?# 《标签》',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      inPorts: [
        {
          uuid: 'in1',
          subType: 'string',
          description: {
            zh_CN: '输入一个字符串'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      droppable: false,
      resizable: true,
      dmode: 'absolute',
      highlightable: false,
      childrenSelectable: false,
      traits: [{
        name: 'size',
        label: '大小',
        changeProp: 1,
        type: 'select',
        options: [{ id: 'xs', name: '最小' }, { id: 'sm', name: '小' }, { id: 'md', name: '一般' }, { id: 'lg', name: '大' }]
      }, {
        name: 'color',
        label: '字体颜色',
        changeProp: 1,
        type: 'color'
      }, {
        name: 'bgColor',
        label: '背景颜色',
        changeProp: 1,
        type: 'color'
      }],
      size: 'md',
      color: '#333',
      bgColor: '#fafafa'
    }
  },

  onModelScript() {
    const size = ('{[ size ]}').toString();
    const color = '{[ color ]}';
    const bgColor = '{[ bgColor ]}';

    const self = this;
    $(self).attr("class", "tag-item " + size);
    $(self).css({ "color": color, "background-color": bgColor });

    if (window.spSocket) {
      var eventName = `call-` + self.getAttribute('id');
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          let value = _data.data.in1;
          if (value) {
            $(self).find('h5').text(value);
          }
        }
      });
    }
  },

  onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
        <div class="${tagItem}-label">
          <label>统计</label><span>(kg)</span>
        </div>
        <div class="${tagItem}-value">
          <h5>50</h5><span>个</span>
        </div>
      `)
    }
    const evn = "change:size change:color change:bgColor"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
