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

// 分割线组件
export default {
  // 组件名称
  name: horizontalRule,

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

  // 前面板 html 样式
  viewStyle() {
    return `
      <style>
        .${horizontalRule}-wrap {
          padding: 5px;
        }

        .${horizontalRule}-wrap .${horizontalRule}-body {
          pointer-events: none;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      disableChildEdit: true,
      label: '分割线',
      attributes: { class: 'fa fa-window-minimize' }
    };
  },
  
  // spOptions() {
  //   return {
  //     label: '分割线',
  //     icon: 'globe',
  //     docUrl: 'https://www.yuque.com/docs/share/81b65704-9aa5-46cd-93fd-89acdce9ffd2?#'
  //   }
  // },

  componentOptions() {
    return {
      name: horizontalRule,
      dmode: 'absolute',
      droppable: false,
      traits: [{
        name: 'authorInfo',
        label: '开发者',
        type: 'authorInfo',
        author: '宗介',
        email: 'zongjie.wxt@xuelangyun.com',
      }, {
        name: 'docUrl',
        label: '文档',
        type: 'link',
        href: 'https://www.yuque.com/docs/share/81b65704-9aa5-46cd-93fd-89acdce9ffd2?#'
      }, {
        name: 'thickness',
        label: '厚度',
        type: 'number',
        min: 1,
        max: 10,
        step: 1,
        changeProp: 1
      }, {
        name: 'color',
        label: '颜色',
        type: 'color',
        changeProp: 1
      }, {
        name: 'pattern',
        label: '样式',
        type: 'select',
        options: ['solid', 'dotted', 'inset', 'dashed', 'double', 'groove'],
        changeProp: 1
      }, {
        name: 'width',
        label: '长度',
        type: 'number',
        min: 1,
        step: 1,
        changeProp: 1,
      }],
      remainDefault: true,
      thickness: 1,
      color: '#808080',
      pattern: 'solid',
      width: 500
    }
  },

  onModelScript() {
    const self = this
    const thickness = parseInt('{[ thickness ]}')
    const color = ('{[ color ]}').toString()
    const pattern = ('{[ pattern ]}').toString()
    const width = parseInt('{[ width ]}')

    const horizontalRuleBody = self.querySelector('.horizontal-rule-body')
    
    horizontalRuleBody.style.borderTop = `${thickness.toString()}px ${pattern} ${color}`
    horizontalRuleBody.style.width = `${width.toString()}px`
  },

  onViewInit() {
    const comps = this.model.get('components');

    if (!comps.length) {
      comps.reset()
      comps.add(`
        <hr class="${horizontalRule}-body">
      `)
    }

    const evn = "change:thickness change:color change:pattern change:width"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));

  }
}