import { form, label, formInput, mdcRadio, mdcRadioGroup, input, mdcCheckboxGroup, select, formSwitch, buttonSwitch, dateRangePicker, dateRangePickerInput  , CATEGORIES} from '../../configuration/constants'

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

  // 前面板html模板
  viewTemplate() {
    return `
      <form data-gjs-type="${form}" class="${form}">
      </form>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${form} {
          width: 500px;
          height: auto!important;
          padding: 16px;
          border-radius: 3px;
          border: 1px solid transparent;
        }

        .${form}-group {
          display: flex;
          align-items: center;
          padding: 10px;
        }
        .${form} .${label} {
          margin-bottom: 0;
          width: 90px;
          flex: 0 0 90px;
          text-align: right;
        }

        .${form} .btn {
          margin-left: 100px;
          padding: 8px 24px;
          border: 1px solid #d9d9d9;
          background-color: #fff;
          color: rgba(0, 0, 0, 0.65);
          border-radius: 2px;
          font-size: 14px;
        }
        .${form} .btn:hover {
          color: #0084ff;
          border-color: #0084ff;
        }
        .${form} .btn:focus { border-color: #0084ff;} 
        .${input} {
          width: 450px;
          height: 52px;
          padding: 10px;
          display: flex;
        }
        .${input} .form-control {
          width: 100%;
          padding: 4px 12px;
          border: 1px solid #d9d9d9;
          border-radius: 2px;
          line-height: inherit;
          font-size: inherit;
        }
        .${form} .form-control:focus { border-color: #0084ff;} 
        .${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;
        }

        .${select} {
          width: 450px;
          padding: 10px;
        }
        .${select}-2 {
          top: 0!important;
          left: 0!important;
        }
        .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--multiple:focus {
          border-color: #0084ff;
        }
        .${select} .select2-container {
          display: block!important;
          width: 100%!important;
          height: 32px;
        }
        .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
          border-color: #d9d9d9;
          border-radius: 2px;
          height: 32px;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
          padding-left: 4px;
          padding-right: 4px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
          color: rgba(0,0,0,0.6);
          line-height: 30px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
          height: 32px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow b {
          border-top-color: rgba(0, 0, 0, 0.45);
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
          background-color: #f5f5f5;
          border-color: #f0f0f0;
          margin-right: 3px;
          margin-top: 3px;
          height: 24px;
          color: rgba(0,0,0,0.6);
          line-height: 22px;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
          color: rgba(0, 0, 0, 0.45);
        }
        /* mdc */
        .${mdcCheckboxGroup} {
          width: 450px;
          padding: 10px;
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
        }
        .${mdcCheckboxGroup} > .mdc-form-field {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: auto;
          font-size: inherit;
          color: currentColor;
        }
        .${mdcCheckboxGroup} > .mdc-form-field > label {
          margin-bottom: 0!important;
        }
        .${mdcRadioGroup} {
          width: 450px;
          padding: 10px;
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
        }
        .${mdcRadioGroup} > .mdc-form-field {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: auto;
          font-size: inherit;
          color: currentColor;
        }
        .${mdcRadioGroup} > .mdc-form-field > label {
          margin-bottom: 0!important;
        }

        /* Switch component */
        .${buttonSwitch} {
          margin: 0 10px;
          flex: 0 0 auto;
          position: relative;
          width: 40px;
          height: 40px;
        }
        .${buttonSwitch}-track {
          position: relative;
          top: 25%;
          width: 100%;
          height: 50%;
          border-radius: 25% / 50%;
          opacity: 0.4;
        }
        .${buttonSwitch}-thumb-underlay {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        .${buttonSwitch}-thumb {
          position: absolute;
          top: 20%;
          width: 60%;
          height: 60%;
          border-radius: 50%;
        }
        .${buttonSwitch}.checked .${buttonSwitch}-thumb {
          right: 0;
        }
        .${buttonSwitch} input[type="checkbox"] {
          position: absolute;
          width: 100%;
          height: 100%;
          opacity: 0;
          z-index: 6;
        }
        /* form dateRangePicker Component */
        .${dateRangePicker} {
          width: 450px;
          height: 52px;
          padding: 10px;
        }
        .${dateRangePicker} .form-control {
          width: 100%;
          height: 100%;
          padding: 4px 12px;
          border: 1px solid #d9d9d9;
          border-radius: 2px;
          line-height: inherit;
          font-size: inherit;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      category: CATEGORIES.FORM,
      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,5.5 C22,5.2 21.5,5 20.75,5 L3.25,5 C2.5,5 2,5.2 2,5.5 L2,8.5 C2,8.8 2.5,9 3.25,9 L20.75,9 C21.5,9 22,8.8 22,8.5 L22,5.5 Z M21,8 L3,8 L3,6 L21,6 L21,8 Z" fill-rule="nonzero"></path>
        <path class="gjs-block-svg-path" d="M22,10.5 C22,10.2 21.5,10 20.75,10 L3.25,10 C2.5,10 2,10.2 2,10.5 L2,13.5 C2,13.8 2.5,14 3.25,14 L20.75,14 C21.5,14 22,13.8 22,13.5 L22,10.5 Z M21,13 L3,13 L3,11 L21,11 L21,13 Z" fill-rule="nonzero"></path>
        <rect class="gjs-block-svg-path" x="2" y="15" width="10" height="3" rx="0.5"></rect>
      </svg>
      <div class="gjs-block-label">表单</div>`
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '表单',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/75aa4145-2646-4a14-a896-3dfff2869cf4?# 《表单》',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      outPorts: [
        {
          uuid: 'out1',
          subType: 'all',
          description: {
            zh_CN: '输出表单'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: form,
      resizable: true,
      dmode: 'absolute',
      highlightable: false,
      // droppable: false,
      droppable: ':not(form)',
      // childrenStatic: true,
      traits: [{
        type: 'color',
        name: 'bgColor',
        label: '背景色',
        changeProp: 1,
      }, {
        type: 'color',
        name: 'borderColor',
        label: '边框颜色',
        changeProp: 1
      }, {
        type: 'select',
        name: 'outDataType',
        label: '数据输出为',
        changeProp: 1,
        options: [{id: 'list', name: '列表'}, {id: 'obj', name: '对象'}]
      }],
      "bgColor": "none",
      "borderColor": "transparent",
      "outDataType": "obj"
    }
  },

  onModelScript() {
    const bgColor = '{[ bgColor ]}';
    const borderColor = '{[ borderColor ]}';
    const outDataType = ('{[ outDataType ]}').toString();

    Boolean(bgColor) ? $(this).css({ backgroundColor: bgColor }) : $(this).css({ backgroundColor: 'transparent' });
    Boolean(borderColor) ? $(this).css({ borderColor: borderColor }) : $(this).css({ borderColor: 'transparent' });

    const self = this;

    const getSerializeObject = function(list) {
      var o = {};
      $.each(list, function() {
          if (o[this.name] !== undefined) {
              if (!o[this.name].push) {
                  o[this.name] = [o[this.name]];
              }
              o[this.name].push(this.value);
          } else {
              o[this.name] = this.value;
          }
      });
      return o;
    }

    const eventName = `call-` + self.getAttribute('id');
    $(self).on("submit", function(event) {
      event.preventDefault();
      if (window.spSocket) {
        var formData = $(this).serializeArray();
        if (formData.length) {
          formData.forEach(function(item) {
            if (!!item.value) {
              var _val = Number(item.value);
              if (!isNaN(_val)) {
                item.value = _val;
              }
            }
          })
        }
        var $checkboxes = $(this).find('[type=checkbox]');
        if ($checkboxes.length) {
          $checkboxes.each(function(i, el) {
            if(!$(el).is(':checked') && $(el).attr('name') == $(el).attr('id')) {
              formData.push({name: $(el).attr('name'), value: $(el).val()});
            }
          })
        }
        if (outDataType == 'obj') {
          formData = getSerializeObject(formData)
        }
        window.spSocket.send({
          eventName: eventName,
          data: {
            success: true,
            out1: JSON.stringify(formData)
          }
        });
      }
    })
  },

  onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
        <div class="${form}-group" data-gjs-type="${form}-group"><label class="${label}">多/单选：</label><div data-gjs-type="${select}" class="${select}"></div></div>
        <div class="${form}-group" data-gjs-type="${form}-group"><label class="${label}">多选选择：</label><div data-gjs-type="${mdcCheckboxGroup}" class="${mdcCheckboxGroup}"></div></div>
        <div class="${form}-group" data-gjs-type="${form}-group"><label class="${label}">单选选择：</label><div data-gjs-type="${mdcRadioGroup}" class="${mdcRadioGroup}"></div></div>
        <div class="${form}-group" data-gjs-type="${form}-group"><label class="${label}">文本输入：</label><div data-gjs-type="${input}" class="${input}"></div></div>
        <div class="${form}-group" data-gjs-type="${form}-group"><label class="${label}">日期选择：</label><div data-gjs-type="${dateRangePicker}" class="${dateRangePicker}"></div></div>
        <div class="${form}-group" data-gjs-type="${form}-group"><label class="${label}">开/关：</label><div class="${buttonSwitch}" data-gjs-type="${buttonSwitch}"></div></div>
        <div class="${form}-group" data-gjs-type="${form}-group"><button class="btn btn-primary" type="submit">提交</button></div>
      `)
    }
    const evn = "change:bgColor change:borderColor change:outDataType"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
