import { formSelect, select } from '../../configuration/constants'

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

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${formSelect}" class="${formSelect}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${formSelect} {
          width: 450px;
          padding: 10px;
          display: flex;
        }
        .${formSelect}.horizontal {
          align-items: center;
        }
        .${formSelect}.vertical {
          flex-direction: column;
          align-items: flex-start;
          height: auto!important;
        }
        .${formSelect}.horizontal .form-label {
          flex: 0 0 30%;
          margin: 0;
          padding: 0 16px;
          text-align: right;
        }
        .${formSelect}.vertical .form-label {
          margin-bottom: 8px;
        }
        .${select} {
          flex: 1 1 auto;
          display: flex;
        }
        .${formSelect}.vertical .${select} {
          width: 100%;
        }
      </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" fill-rule="nonzero"></path>
  //       <polygon class="gjs-block-svg-path" transform="translate(18.500000, 12.000000) scale(1, -1) translate(-18.500000, -12.000000) " points="18.5 11 20 13 17 13"></polygon>
  //       <rect class="gjs-block-svg-path" x="4" y="11.5" width="11" height="1"></rect>
  //     </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: formSelect,
      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: 'options',
        label: '选项(name:value)',
        changeProp: 1
      }, {
        name: 'key',
        label: 'Name',
        changeProp: 1
      }, {
        name: 'initValue',
        label: '默认值',
        changeProp: 1
      }],
      'origin': 'horizontal',
      'options': '选项A:a, 选项B:b, 选项C:c',
      'key': 'select',
      'initValue': null
    }
  },

  onModelScript() {
    const origin = ('{[ origin ]}').toString();
    const options = ('{[ options ]}').toString();
    const key = ('{[ key ]}').toString();
    const initValue = ('{[ initValue ]}').toString();
    const self = this;

    origin == 'horizontal' ? $(self).removeClass('vertical').addClass('horizontal') : $(self).removeClass('horizontal').addClass('vertical');

    let optionsArr = []
    if(options.indexOf(',') > 0) {
      options.split(',').forEach(function(item) {
        if (item.indexOf(':') > 0) {
          const option = item.split(":")
          optionsArr.push({name: option[0].trim(), value: option[1].trim()})
        } else if (Boolean(item)) {
          const option = item.trim()
          optionsArr.push({name: option, value: option})
        }
      })
    } else if (Boolean(options)) {
      if (options.indexOf(':') > 0) {
        const option = options.split(":")
        optionsArr.push({name: option[0].trim(), value: option[1].trim()})
      } else {
        const option = options.trim()
        optionsArr.push({name: option, value: option})
      }
    }

    const $select = $(self).find('select');
    $select.attr({id: key, name: key});
    $select.empty();
    $.each(optionsArr, function(index, item) {
      const $option = $('<option value="' + item.value + '">' + item.name + '</option>');
      item.value == initValue && $option.attr('selected', 'selected');
      $select.append($option);
    })

    if ($(self).parent().attr('data-gjs-type') !== 'form' && window.spSocket) {
      const eventName = `call-` + self.getAttribute('id');
      const out = $(self).find('select').val();
      window.spSocket.send({
        eventName: eventName,
        data: {
          success: true,
          out1: out
        }
      });
      $(self).on("change", "select", 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">Select Label</label>
        <div class="${select}" selectable="false">
          <select class="form-control"></select>
        </div>
      `)
    }
    const evn = "change:origin change:options change:key change:initValue"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
