import { Input } from '../../../configuration/constants'
import style from '!!raw-loader!less-loader!./input.less'

export default {
  // 组件名称
  name: Input,

  // 前面板html模板
  viewTemplate() {
    return `
      <input data-gjs-type="${Input}" class="${Input} form-control" type="text" autocomplete="off"></input>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        ${style}
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: `
        <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z"></path>
        </svg>
        <div class="gjs-block-label">输入框</div>
      `
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '输入框',
      icon: 'globe',
      docUrl: '',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      outPorts: [
        {
          uuid: 'out1',
          subType: 'all',
          description: {
            zh_CN: '输出1'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: Input,
      resizable: true,
      dmode: 'absolute',
      disableChildEdit: true,
      childrenSelectable: false,
      droppable: true,
      isFormItem: true,
      traits: [{
        name: 'typeProp',
        label: '输入类型',
        type: 'select',
        changeProp: 1,
        options: [{ id: 'text', name: '文本' }, { id: 'number', name: '数字' }, { id: 'password', name: '密码' }, { id: 'email', name: '邮箱' }]
      }, {
        name: 'numberStep',
        label: '数字小数位',
        changeProp: 1,
        type: 'number',
        min: 0,
        step: 1,
        max: 6
      }],
      'numberStep': 0,
      'typeProp': 'text',
    }
  },

  onModelScript() {
    const typeProp = ('{[ typeProp ]}').toString();
    const numberStep = Boolean('{[ numberStep ]}') ? Number('{[ numberStep ]}') : 0;
    const self = this;
    let step = 1;
    if (numberStep > 0) {
      step = 1 / Math.pow(10, numberStep);
    }
    $(self).find('input').attr({ type: typeProp });
    if (typeProp == 'number') {
      $(self).find('input').attr({ step: step });
    }

    if ($(self).parent().attr('data-gjs-type') !== 'form' && window.spSocket) {
      const eventName = `call-` + self.getAttribute('id');
      $(self).on("change", function (event) {
        let value = event.target.value.trim();
        if (typeProp === "number") {
          value = Number(value);
        }
        window.spSocket.send({
          eventName: eventName,
          data: {
            success: true,
            out1: value
          }
        });
      })
    }
  },

  onViewInit() {
    const evn = "change:origin change:typeProp change:numberStep"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
