import { ReservedInput } from '../../configuration/constants'

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

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${ReservedInput}" class="${ReservedInput}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${ReservedInput} {
          width: 450px;
          height: 52px;
          padding: 10px;
          display: flex;
        }
        .${ReservedInput} .form-control {
          width: 100%;
          padding: 4px 12px;
          border: 1px solid #d9d9d9;
          border-radius: 2px;
          line-height: inherit;
          font-size: inherit;
        }
        .${ReservedInput} .form-control:focus { border-color: #0084ff; } 
        .${ReservedInput}.has-addon .form-control {
          flex: 1 1 auto;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        .${ReservedInput} .input-addon {
          display: inline-block;
          flex: 0 0 40px;
          width: 40px;
          padding: .5675rem 0;
          border-top: 1px solid #ced4da;
          border-right: 1px solid #ced4da;
          border-bottom: 1px solid #ced4da;
          border-top-right-radius: .25rem;
          border-bottom-right-radius: .25rem;
          font-size: 0.75rem;
          line-height: 1.5;
          text-align: center;
          background-color: #f5f5f5;
          color: #666;
        }
      </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: ReservedInput,
      resizable: true,
      dmode: 'absolute',
      childrenSelectable: false,
      droppable: true,
      isFormItem: true,
      traits: [{
        name: 'addon',
        label: '单位',
        changeProp: 1
      }, {
        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
      }, {
        name: 'key',
        label: 'Name',
        changeProp: 1
      }],
      'addon': null,
      'key': 'string',
      'numberStep': 0,
      'typeProp': 'text',
    }
  },

  onModelScript() {
    const addon = ('{[ addon ]}').toString();
    const typeProp = ('{[ typeProp ]}').toString();
    const key = ('{[ key ]}').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({name: key, type: typeProp});
    if (typeProp == 'number') {
      $(self).find('input').attr({step: step});
    }
    if(Boolean(addon)) {
      $(self).find('.input-addon').remove();
      $(self).addClass('has-addon').append('<span class="input-addon">'+ addon +'</span>');
    } else {
      $(self).removeClass('has-addon').children('.input-addon').remove();
    }

    if ($(self).parent().attr('data-gjs-type') !== 'form' && window.spSocket) {
      const eventName = `call-` + self.getAttribute('id');
      $(self).on("change", "input", 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 comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
        <input class="form-control" type="text" autocomplete="off" />
      `)
    }
    // this.$el.on("dblclick", function(e) {
    //   console.log('=== dbclick ===')
    //   comps.models.forEach(m => {
    //     m.set('selectable', true);
    //     m.set('editable', true);
    //     m.set('removable', false);
    //     m.set('copyable', false);
    //   })
    // })
    const evn = "change:origin change:addon change:key change:typeProp change:numberStep"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
