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

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

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${mdcSelect}" class="${mdcSelect}-wrap">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
      .${mdcSelect}-wrap {
        width: 450px;
        padding: 10px;
        display: flex;
        align-items: center;
      }
      .${mdcSelect}-wrap > .${mdcSelect}, .${mdcSelect}-wrap >.${mdcSelect} > .mdc-select__anchor, .${mdcSelect}-wrap >.${mdcSelect} > .mdc-select__menu {
        width: 100%!important;
      }
      </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">Select</div>
  //     `
  //   };
  // },

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

  // 组件属性
  componentOptions() {
    return {
      name: mdcSelect,
      childrenSelectable: false,
      droppable: false,
      isFormItem: true,
      traits: [{
        name: 'options',
        label: '选项(name:value)',
        changeProp: 1
      }, {
        name: 'selectLabel',
        label: 'Label',
        changeProp: 1
      }],
      'options': '选项A:a, 选项B:b, 选项C:c',
      'selectLabel': '选择'
    }
  },

  onModelScript() {
    const options = ('{[ options ]}').toString();
    const selectLabel = '{[ selectLabel ]}';

    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 self = this;
    
    if(Boolean(selectLabel)) {
      const $label = '<div class="mdc-notched-outline__notch"><label id="outlined-label" class="mdc-floating-label">'+ selectLabel +'</label></div>';
      $(self).removeClass('mdc-select--no-label').find('.mdc-notched-outline').children('.mdc-notched-outline__leading').after($label);
    } else {
      $(self).addClass('mdc-select--no-label').find('.mdc-notched-outline').children('.mdc-notched-outline__notch').remove();
    }

    const $list = $(self).find('.mdc-list');
    $list.children().length > 1 && $list.children('li:gt(0)').remove();
    $.each(optionsArr, function(index, item) {
      const $option = $('<li class="mdc-list-item" data-value="' + item.value + '" tabindex="-1">' + item.name + '</li>');
      $list.append($option);
    });

    if (!!mdc && window.spSocket) {
      const select = mdc.select.MDCSelect.attachTo(self.querySelector('.mdc-select'));
      const eventName = `call-` + self.getAttribute('id');

      select.listen('MDCSelect:change', () => {
        // alert(`Selected option at index ${select.selectedIndex} with value "${select.value}"`);
        const out = select.value;
        window.spSocket.send({
          eventName: eventName,
          data: {
            success: true,
            out1: out
          }
        });
      });
    }
  },

  onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
      <div class="mdc-select mdc-select--outlined">
        <div class="mdc-select__anchor">
          <i class="mdc-select__dropdown-icon"></i>
          <div class="mdc-select__selected-text"></div>
          <div class="mdc-notched-outline">
            <div class="mdc-notched-outline__leading"></div>
            <div class="mdc-notched-outline__trailing"></div>
          </div>
        </div>

        <div class="mdc-select__menu mdc-menu mdc-menu-surface">
          <ul class="mdc-list">
            <li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true">无</li>
          </ul>
        </div>
      </div>
      `)
    }
    const evn = "change:fieldType change:inputName change:inputId change:leadingIcon change:trailingIcon"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
