import { jSlider, CATEGORIES } from '../../configuration/constants'

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

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${jSlider}" class="${jSlider}-wrap">
      </div>
    `
  },

  // 前面板html样式
  viewStyle() {
    return `
      <style>
      .${jSlider}-wrap {
        width: 600px;
        min-height: 80px;
        padding: 10px;
      }
      </style>
    `
  },
  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: `
      <svg  class="gjs-block-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path d="M917.696 435.968h-362.88v-41.664c0-44.352-36.096-80.64-80.64-80.64H277.184c-44.352 0-80.64 36.096-80.64 80.64v41.664h-90.24c-40.512 0-73.728 33.024-73.728 73.728 0 40.512 33.024 73.728 73.728 73.728h90.432v46.464c0 44.352 36.096 80.64 80.64 80.64H474.56c44.352 0 80.64-36.096 80.64-80.64v-46.464h362.88c40.512 0 73.728-33.024 73.728-73.728-0.384-40.704-33.408-73.728-74.112-73.728z m-411.84 193.728c0 17.472-14.208 31.488-31.488 31.488H277.184c-17.472 0-31.488-14.208-31.488-31.488v-46.464h0.192V435.968h-0.192v-41.664c0-17.472 14.208-31.488 31.488-31.488h197.184c17.472 0 31.488 14.208 31.488 31.488v235.392z" ></path></svg>
        <div class="gjs-block-label">滑块</div>
      `
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '滑块',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/7fa698b2-1016-4d7d-8dc4-09c01f47c920?# 《滑块2》',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      inPorts: [
        {
          uuid: 'in1',
          subType: 'all',
          description: {
            zh_CN: '输入1'
          }
        }
      ],
      outPorts: [
        {
          uuid: 'out1',
          subType: 'all',
          description: {
            zh_CN: '输出1'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: jSlider,
      childrenSelectable: false,
      droppable: false,
      traits: [{
        name: 'scale',
        label: '刻度',
        changeProp: 1
      }, {
        name: 'min',
        label: '最小值',
        type: 'number',
        changeProp: 1
      }, {
        name: 'max',
        label: '最大值',
        type: 'number',
        changeProp: 1
      }, {
        name: 'step',
        label: '步长',
        type: 'number',
        changeProp: 1
      }, {
        name: 'dimension',
        label: '单位',
        changeProp: 1
      }, {
        name: '_name',
        label: '名称属性',
        changeProp: 1
      }, {
        name: 'initValue',
        label: '默认值',
        changeProp: 1
      }, {
        name: 'vertical',
        label: '垂直',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'trackSize',
        label: '轨道宽度',
        changeProp: 1,
        type: 'number',
        min: 5,
        step: 1
      }, {
        name: 'backgroundColor',
        label: '轨道背景色',
        changeProp: 1,
        type: 'color'
      }, {
        name: 'rangeColor',
        label: '轨道颜色',
        changeProp: 1,
        type: 'color'
      }, {
        name: 'trickColor',
        label: '刻度颜色',
        changeProp: 1,
        type: 'color'
      }, {
        name: 'pointerWidth',
        label: '指示器宽度',
        changeProp: 1,
        type: 'number',
        min: 0
      }, {
        name: 'pointerHeight',
        label: '指示器高度',
        changeProp: 1,
        type: 'number',
        min: 0
      }, {
        name: 'pointerImg',
        label: '指示器图片',
        changeProp: 1,
        type: 'imageSelector',
      }, {
        name: 'valueFontFamily',
        label: '值字体',
        changeProp: 1,
        type: 'select',
        options: [
          { id: 'inherit', name: '默认' },
          { id: '庞门正道', name: '庞门正道' },
          { id: 'DS-Digital', name: 'DS-Digital' }
        ]
      }, {
        name: 'valueFontSize',
        label: '值字号',
        changeProp: 1,
        type: 'number',
        min: 8,
        step: 1
      }, {
        name: 'valueFontWeight',
        label: '值字体粗细',
        changeProp: 1,
        type: 'number',
        min: 400,
        step: 100
      }, {
        name: 'valueColor',
        label: '值颜色',
        changeProp: 1,
        type: 'color'
      }],
      'scale': '0, 4, 8,10,20,50,100',
      'min': 0,
      'max': 100,
      'step': 1,
      'dimension': '',
      '_name': 'jslider',
      'initValue': 5,
      'trackSize': 8,
      'valueFontSize': 12,
      'valueFontWeight': 400,
      'valueFontFamily': 'inherit',
      'valueColor': 'rgba(0,0,0,0.85)',
      'trickColor': '#ddd',
      'vertical': false,
    }
  },

  onModelScript() {
    let scale = ('{[ scale ]}').toString();
    const min = Boolean('{[ min ]}') ? Number('{[ min ]}') : 0;
    const max = Boolean('{[ max ]}') ? Number('{[ max ]}') : 0;
    const step = Boolean('{[ step ]}') ? Number('{[ step ]}') : 0;
    const trackSize = Boolean('{[ trackSize ]}') ? Number('{[ trackSize ]}') : 0;
    const pointerWidth = Boolean('{[ pointerWidth ]}') ? Number('{[ pointerWidth ]}') : 0;
    const pointerHeight = Boolean('{[ pointerHeight ]}') ? Number('{[ pointerHeight ]}') : 0;
    const dimension = ('{[ dimension ]}').toString();
    const _name = ('{[ _name ]}').toString();
    const initValue = ('{[ initValue ]}').toString();
    const vertical = Boolean('{[ vertical ]}');
    const backgroundColor = '{[ backgroundColor ]}';
    const rangeColor = '{[ rangeColor ]}';
    const valueColor = '{[ valueColor ]}';
    const trickColor = '{[ trickColor ]}';
    const pointerImg = ('{[ pointerImg ]}').toString();
    const valueFontFamily = ('{[ valueFontFamily ]}').toString();
    const valueFontSize = Number('{[ valueFontSize ]}');
    const valueFontWeight = Number('{[ valueFontWeight ]}');
    scale = scale.split(',').map(item => {
      const num = Number(item);
      if (isNaN(num)) return item.trim();
      return num;
    });
    let heterogeneity = [];
    let diff;
    const _i = scale.length - 1;
    scale.reduce(function(prev, cur, index, array) {
      if (index > 1 && index < _i) {
        if (cur - prev !== diff) {
          const percent = index / _i * 100;
          heterogeneity.push(`${percent.toFixed(2)}/${cur}`);
        }
      } else if (index == 1) {
        diff = cur - prev;
      }
    });

    const self = this;
    const eventName = `call-${self.getAttribute('id')}`;
    $(self).empty();
    if (vertical) {
      $(self).addClass('jslider-vertical');
    } else {
      $(self).removeClass('jslider-vertical');
    }
    const $slider = $('<input type="slider" name="'+ _name +'" value="'+ initValue +'" style="display: none;">');
    $(self).append($slider);
    const pointerStyle = {};
    if (pointerHeight) {
      pointerStyle.height = pointerHeight;
    }
    if (pointerWidth) {
      pointerStyle.width = pointerWidth;
    }
    if (pointerImg) {
      pointerStyle.backgroundImage = `url(${pointerImg})`;
    }
    const option = {
      from: min,
      to: max,
      step: step,
      scale: scale,
      dimension: dimension,
      vertical: vertical,
      trackSize: trackSize,
      valueStyle: {
        "font-family": valueFontFamily,
        "font-weight": valueFontWeight,
        "font-size": valueFontSize,
        "color": valueColor
      },
      pointerStyle: pointerStyle,
      trickColor: trickColor,
      callback: function(val) {
        window.spSocket && window.spSocket.send({
          eventName: eventName,
          data: {
            success: true,
            out1: val
          }
        });
      }
    };
    if (rangeColor) {
      option.rangeColor = rangeColor;
    }
    if (backgroundColor) {
      option.backgroundColor = backgroundColor;
    }
    if (heterogeneity.length) {
      option.heterogeneity = heterogeneity;
    }
    
    $slider.slider(option);

    window.spSocket && window.spSocket.subscribe({
      eventName: eventName,
      callback: function (_data) {
        let in1 = _data.data.in1;
        if (in1) {
          if (initValue.indexOf(',') > 0 && in1.indexOf(',') > 0) {
            in1 = in1.split(',').map(item => Number(item.trim()));
            $slider.slider('value', in1[0], in1[1]);
          } else {
            $slider.slider('value', Number(in1.trim()));
          }
        }
      }
    });
  },

  onViewInit() {
    const evn = `
      change:scale
      change:heterogeneity
      change:min
      change:max
      change:step
      change:_name
      change:initValue
      change:trackSize
      change:vertical
      change:backgroundColor
      change:rangeColor
      change:valueFontSize
      change:valueFontFamily
      change:valueFontWeight
      change:valueColor
      change:trickColor
      change:pointerImg
      change:pointerWidth
      change:pointerHeight
    `;
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
