import { formInput, input } from '../../configuration/constants'

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

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${formInput}" class="${formInput}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${formInput} {
          width: 450px;
          padding: 10px;
          display: flex;
        }
        .${formInput}.horizontal {
          align-items: center;
        }
        .${formInput}.vertical {
          flex-direction: column;
          align-items: flex-start;
          height: auto!important;
        }
        .${formInput}.horizontal .form-label {
          flex: 0 0 30%;
          margin: 0;
          padding: 0 16px;
          text-align: right;
        }
        .${formInput}.vertical .form-label {
          margin-bottom: 8px;
        }
        .${input} {
          flex: 1 1 auto;
          display: flex;
        }
        .${formInput}.vertical .${input} {
          width: 100%;
        }
        .${input}.has-addon .form-control {
          flex: 1 1 auto;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        .${input} .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 {
  //     category: "表单元素",
  //     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: '',
  //     outPorts: [
  //       {
  //         uuid: 'out1',
  //         subType: 'all',
  //         description: {
  //           zh_CN: '输出1'
  //         }
  //       }
  //     ]
  //   }
  // },

  // 组件属性
  componentOptions() {
    return {
      name: formInput,
      resizable: true,
      dmode: 'absolute',
      highlightable: false,
      droppable: false,
      // isFormItem: true,
      traits: [{
        name: 'origin',
        label: '朝向',
        type: 'select',
        changeProp: 1,
        options: [{id: 'horizontal', name: '水平'}, {id: 'vertical', name: '垂直'}]
      }, {
        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: 'key',
        label: '输入框Name',
        changeProp: 1
      }],
      'origin': 'horizontal',
      'addon': '',
      'key': 'string',
      'typeProp': 'text',
    }
  },

  onModelScript() {
    const origin = ('{[ origin ]}').toString();
    const addon = ('{[ addon ]}').toString();
    const typeProp = ('{[ typeProp ]}').toString();
    const key = ('{[ key ]}').toString();
    const self = this;
    
    origin == 'horizontal' ? $(self).removeClass('vertical').addClass('horizontal') : $(self).removeClass('horizontal').addClass('vertical');
    const defaultValue = typeProp == 'number' ? 0 : "";
    $(self).find('input').attr({id: key, name: key, type: typeProp, value: defaultValue})
    if(Boolean(addon)) {
      $(self).find('.input-addon').remove()
      $(self).children('.sp-control-input').addClass('has-addon').append('<span class="input-addon">'+ addon +'</span>')
    } else {
      $(self).children('.sp-control-input').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) {
        const out = event.target.value.toString();
        window.spSocket.send({
          eventName: eventName,
          data: {
            success: true,
            out1: out
          }
        });
      })
    }
  },

  onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
        <label class="form-label">Input Label</label>
        <div class="${input}">
          <input class="form-control" type="text" autocomplete="off" />
        </div>
      `)
    }
    const evn = "change:origin change:addon change:key change:typeProp"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
