import { dateRangePicker, dateRangePickerInput, CATEGORIES } from '../../configuration/constants'

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

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${dateRangePicker}" class="${dateRangePicker}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${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;
          outline: none;
        }
        .${dateRangePicker} .form-control:focus, .${dateRangePicker} .form-control:hover { border-color: #0084ff;}
        .${dateRangePicker} .daterangepicker.single {
          width: auto;
        }
        .${dateRangePicker}.dark .form-control {
          background-color: #363739;
          border-color: #454648;
          color: rgba(255,255,255,0.4);
        }
        .${dateRangePicker}.dark .form-control:focus, .${dateRangePicker}.dark .form-control:hover {
          background-color: #19181D;
        }
        .${dateRangePicker}.dark .daterangepicker {
          background-color: #19181D;
          border-color: #454648;
          color: rgba(255,255,255,0.6);
        }
        .${dateRangePicker}.dark .daterangepicker .calendar-table {
          background-color: unset;
          border-color: transparent;
        }
        .${dateRangePicker}.dark .daterangepicker:before {
          border-bottom-color: #454648;
        }
        .${dateRangePicker}.dark .daterangepicker:after {
          border-bottom-color: #1B1C1E;
        }
        .${dateRangePicker}.dark .daterangepicker .drp-buttons {
          border-top-color: #454648;
        }
        .${dateRangePicker}.dark .daterangepicker .calendar-table th,
        .${dateRangePicker}.dark .daterangepicker .calendar-table td {
          background: none;
          color: rgba(255,255,255,0.6);
        }
        .${dateRangePicker}.dark .daterangepicker .calendar-table td.available:hover {
          color: #0084FF;
          background-color: unset;
        }
        .${dateRangePicker}.dark .daterangepicker td.off,
        .${dateRangePicker}.dark .daterangepicker td.off:hover,
        .${dateRangePicker}.dark .daterangepicker td.off.in-range,
        .${dateRangePicker}.dark .daterangepicker td.off.start-date,
        .${dateRangePicker}.dark .daterangepicker td.off.end-date {
          background-color: unset;
          color: rgba(255,255,255,0.2);
        }
        .${dateRangePicker}.dark .daterangepicker td.active,
        .${dateRangePicker}.dark .daterangepicker td.active:hover {
          background-color: #0084FF;
          border-radius: 2px;
        }
        .${dateRangePicker}.dark .daterangepicker select.monthselect,
        .${dateRangePicker}.dark .daterangepicker select.yearselect,
        .${dateRangePicker}.dark .daterangepicker select.hourselect,
        .${dateRangePicker}.dark .daterangepicker select.minuteselect,
        .${dateRangePicker}.dark .daterangepicker select.secondselect,
        .${dateRangePicker}.dark .daterangepicker select.ampmselect {
          background-color: #363739;
          border-color: #454648;
          color: #fff;
        }
        .${dateRangePicker}.dark .daterangepicker .drp-buttons .btn {
          font-weight: normal;
          padding: 2px 16px;
          background-color: #363739;
          border: 1px solid #454648;
          color: rgba(255,255,255,.6);
        }
        .${dateRangePicker}.dark .daterangepicker .drp-buttons .btn-primary {
          background-color: #0084FF;
          border-color: #0084FF;
        }
        .${dateRangePicker}.dark .daterangepicker .calendar-table .next span,
        .${dateRangePicker}.dark .daterangepicker .calendar-table .prev span {
          border-color: #454648;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      category: CATEGORIES.FORM,
      label: `
      <svg class="gjs-block-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path class="gjs-block-svg-path" d="M802.4576 896H233.472A115.6608 115.6608 0 0 1 117.76 780.4928V318.976a115.6608 115.6608 0 0 1 115.712-115.5072h41.8304a30.72 30.72 0 0 1 0 61.44H233.472A54.1696 54.1696 0 0 0 179.2 318.976v461.4656A54.1696 54.1696 0 0 0 233.472 834.56h568.9856a54.1696 54.1696 0 0 0 54.0672-54.0672V318.976a54.1696 54.1696 0 0 0-54.0672-54.0672h-38.7072a30.72 30.72 0 0 1 0-61.44h38.7072A115.6608 115.6608 0 0 1 918.016 318.976v461.4656A115.6608 115.6608 0 0 1 802.4576 896z" p-id="4188"></path><path d="M610.7136 264.9088h-189.44a30.72 30.72 0 0 1 0-61.44h189.44a30.72 30.72 0 1 1 0 61.44zM877.9264 482.304H158.0032a30.72 30.72 0 0 1 0-61.44h719.9232a30.72 30.72 0 0 1 0 61.44zM347.3408 346.7264a30.72 30.72 0 0 1-30.72-30.72V166.4a30.72 30.72 0 0 1 61.44 0v149.6064a30.72 30.72 0 0 1-30.72 30.72zM688.5888 346.7264a30.72 30.72 0 0 1-30.72-30.72V166.4a30.72 30.72 0 0 1 61.44 0v149.6064a30.72 30.72 0 0 1-30.72 30.72z" p-id="4189"></path></svg>
      <div class="gjs-block-label">日程安排</div>
      `
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '日程安排',
      icon: 'globe',
      docUrl: '',
      author: '宗介',
      email: 'zongjie.wxt@xuelangyun.com',
      inPorts: [
        {
          uuid: 'in1',
          subType: 'all',
          description: {
            zh_CN: '输入1'
          }
        }
      ],
      outPorts: [
        {
          uuid: 'out1',
          subType: 'all',
          description: {
            zh_CN: '输出1'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: dateRangePicker,
      resizable: true,
      dmode: 'absolute',
      highlightable: false,
      droppable: false,
      childrenSelectable: false,
      isFormItem: true,
      traits: [{
        name: 'key',
        label: 'Name',
        changeProp: 1
      }, {
        name: 'readOnly',
        label: '只读',
        type: 'checkbox',
        changeProp: 1,
      },{
        name: 'isRange',
        label: '区间选择',
        type: 'checkbox',
        changeProp: 1,
      },{
        name: 'dateFormat',
        label: '日期格式',
        type: 'select',
        changeProp: 1,
        options: ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm', 'YYYY-MM-DD', 'YYYY/MM/DD HH:mm:ss', 'YYYY/MM/DD HH:mm', 'YYYY/MM/DD']
      }, {
        name: 'dateSeparator',
        label: '日期分隔符',
        type: 'select',
        changeProp: 1,
        options: [' - ', ' ~ ']
      }, {
        name: 'timePicker',
        label: '时间选择',
        type: 'checkbox',
        changeProp: 1
      }, {
        name: 'timePickerIncrement',
        label: '时间选择(分钟间隔)',
        type: 'select',
        changeProp: 1,
        options: [{id: 1, name: '1分钟'}, {id: 5, name: '5分钟'}, {id: 10, name: '10分钟'}, {id: 15, name: '15分钟'}, {id: 20, name: '20分钟'},{id: 30, name: '30分钟'},{id: 60, name: '60分钟'}]
      }, {
        name: 'timePickerSeconds',
        label: '时间选择(显示秒)',
        type: 'checkbox',
        changeProp: 1,
      }, {
        name: 'dark',
        label: '暗黑风格',
        type: 'checkbox',
        changeProp: 1,
      }],
      'key': 'dataRangePicker',
      'readOnly': true,
      'isRange': true,
      'timePicker': true,
      'timePickerIncrement': 1,
      'dateFormat': 'YYYY-MM-DD HH:mm',
      'dateSeparator': ' - ',
      'dark': false
    }
  },

  onModelScript() {
    const key = ('{[ key ]}').toString();
    const isRange = Boolean('{[ isRange ]}');
    const timePicker = Boolean('{[ timePicker ]}');
    const timePickerIncrement = Number('{[ timePickerIncrement ]}');
    const timePickerSeconds = Boolean('{[ timePickerSeconds ]}');
    const dateFormat = ('{[ dateFormat ]}').toString();
    const dateSeparator = ('{[ dateSeparator ]}').toString();
    const readOnly = Boolean('{[ readOnly ]}');
    const dark = Boolean('{[ dark ]}');

    const self = this;

    const $input = $(self).find('input');
    $input.attr({id: key, name: key});
    if (readOnly) {
      $input.attr({readonly: 'readonly'});
    } else {
      $input.removeAttr('readonly');
    }
    if (dark) {
      $(self).addClass('dark')
    } else {
      $(self).removeClass('dark')
    }

    const optionObj = {
      singleDatePicker: !isRange,
      timePicker: timePicker,
      timePicker24Hour: true,
      timePickerIncrement: timePickerIncrement,
      timePickerSeconds: timePickerSeconds,
      alwaysShowCalendars: true,
      showDropdowns: true, // 在日历上面显示年和月的下拉框，选中后将跳到指定的年和月
      linkedCalendars: false,
      locale: {
        format: dateFormat,
        separator: dateSeparator,
        applyLabel: '确定',
        cancelLabel: '取消',
        firstDay: 1, // 每周第一天是星期一
        // daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
        // monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      },
      parentEl: $(self)
    };

    $input.daterangepicker(optionObj);

    if ($(self).parent().attr('data-gjs-type') !== 'form' && window.spSocket) {
      const eventName = `call-` + self.getAttribute('id');
      $input.on('apply.daterangepicker', function(ev, picker) {
        console.log(picker.startDate.format('YYYY-MM-DD'));
        console.log(picker.endDate.format('YYYY-MM-DD'));
        const out = ev.target.value.toString();
        console.log(out);
        window.spSocket.send({
          eventName: eventName,
          data: {
            success: true,
            out1: out
          }
        });
      });
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (data) {
          let _in1 = data.data.in1;
          if (_in1) {
            let in1 = _in1;
            if (_in1.indexOf(dateSeparator) > 0) {
              in1 = _in1.split(dateSeparator);
              $input.data('daterangepicker').setStartDate(in1[0]);
              $input.data('daterangepicker').setEndDate(in1[1]);
            } else if (!isRange) {
              $input.data('daterangepicker').setStartDate(in1);
              $input.data('daterangepicker').setEndDate(in1);
            }
            window.spSocket.send({
              eventName: eventName,
              data: {
                success: true,
                out1: _in1
              }
            });
          }
        }
      });
    }
  },

  onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
        <input class="form-control" type="text" autocomplete="off" />
      `)
    }
    const evn = `
      change:key
      change:isRange
      change:timePicker
      change:timePickerIncrement
      change:dateFormat
      change:dateSeparator
      change:readOnly
      change:dark
    `
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
