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

// 多文本组件
export default {
  // 组件名称
  name: multiline,

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

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

        .${multiline}-title, .${multiline}-body {
          font-size: .8rem;
          letter-spacing: 1px;      
        }

        .${multiline}-title {
          display: block;
          margin-bottom: 10px;
        }

        .${multiline}-body {
          padding: 10px;
          line-height: 1.5;
          border-radius: 5px;
          border: 1px solid #ccc;
          box-shadow: 1px 1px 1px #999;
        }
        
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      category: CATEGORIES.FORM,
      label: '多行文本',
      attributes: { class: 'fa fa-file-text' }
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '多行文本',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/04858869-3255-444c-b80c-21faf0f31cc7?# 《多行文本》',
      inPorts: [{
        uuid: 'in1',
        subType: 'all',
        description: {
          zh_CN: '输入多行文本'
        }
      }],
      outPorts: [{
        uuid: 'out1',
        subType: 'all',
        description: {
          zh_CN: '输出多行文本'
        }
      }]
    }
  },

  componentOptions() {
    return {
      name: multiline,
      resizable: true,
      dmode: 'absolute',
      droppable: false,
      traits: [{
        // 是否可以手动缩放
        name: 'manualResize',
        label: '手动缩放',
        type: 'select',
        options: ['both', 'horizontal', 'vertical', 'none'],
        changeProp: 1
      }, {
        // 是否进行自动缩放
        name: 'autoResize',
        label: '自动缩放',
        type: 'checkbox',
        changeProp: 1
      }, {
        // 是否可以编辑
        name: 'edit',
        label: '编辑',
        type: 'checkbox',
        changeProp: 1
      }, {
        // 文字 wrap 形式
        name: 'wrap',
        label: '文本换行',
        type: 'select',
        options: ['hard', 'soft', 'off'],
        changeProp: 1
      }, {
        // 默认的 placeholder
        name: 'placeholder',
        label: '默认提示',
        type: 'text',
        placeholder: '输入一些默认提示',
        changeProp: 1
      }, {
        // 最长可以输入的文本长度
        name: 'maxLength',
        label: '文本最大长度',
        type: 'text',
        placeholder: '0-1000, 0 或者其他为没有长度限制',
        changeProp: 1
      }, {
        name: 'rows',
        label: '文本高度',
        type: 'number',
        min: 1,
        palceholder: '1-, 文本高度',
        changeProp: 1
      }, {
        name: 'cols',
        label: '文本宽度',
        type: 'number',
        min: 1,
        placeholder: '1-, 文本宽度',
        changeProp: 1
      }],
      manualResize: 'both',
      autoResize: true,
      edit: true,
      wrap: 'soft',
      placeholder: 'This is placeholder',
      // 0 代表无限制, 可以接受任意数量的文字
      maxLength: '0',
      rows: 5,
      cols: 50,
    }
  },

  onModelScript() {
    const self = this
    const manualResize = ('{[ manualResize ]}').toString()
    const autoResize = Boolean('{[ autoResize ]}')
    const edit = Boolean('{[ edit ]}')
    const wrap = ('{[ wrap ]}').toString()
    const placeholder = ('{[ placeholder ]}').toString()
    const maxLength = parseInt('{[ maxLength ]}') || 0

    const rows = parseInt('{[ rows ]}')
    const cols = parseInt('{[ cols ]}')

    const textareaTitle = self.querySelector('.multiline-title')
    const textareaBody = self.querySelector('.multiline-body')

    // 设置 title 和 body 都无法拖动
    textareaTitle.setAttribute('draggable', 'false')
    textareaBody.setAttribute('draggable', 'false')

    // 设置 autosize
    if (autoResize) {
      autosize(textareaBody)
    } else {
      autosize.destroy(textareaBody)
    }

    textareaBody.style.resize = manualResize

    if (!edit) {
      textareaBody.setAttribute('disabled', true)
    } else {
      if (textareaBody.hasAttribute('disabled')) {
        textareaBody.removeAttribute('disabled')
      }
    }

    textareaBody.setAttribute('wrap', wrap)
    textareaBody.setAttribute('placeholder', placeholder)
    if (maxLength !== 0) {
      textareaBody.setAttribute('maxLength', maxLength.toString())
    } else {
      if (textareaBody.hasAttribute('maxLength')) {
        textareaBody.removeAttribute('maxLength')
      }
    }
    textareaBody.setAttribute('rows', rows.toString())
    textareaBody.setAttribute('cols', cols.toString())

    // 监听数据
    if (window.spSocket) {
      const eventName = `call-` + self.getAttribute('id');
      window.spSocket.subscribe({
        eventName,
        callback: function(res) {
          if (res.data.in1) {
            textareaBody.value = res.data.in1
            if (autoResize) {
              autosize.update(textareaBody)
            }

            // 发送数据
            window.spSocket.send({
              eventName,
              data: {
                success: true,
                out1: textareaBody.value
              }
            });    
          }
        }
      })
    }

    textareaBody.addEventListener('input', (e) => {
      if (window.spSocket) {
        const eventName = `call-` + self.getAttribute('id');
        window.spSocket.send({
          eventName,
          data: {
            success: true,
            out1: textareaBody.value
          }
        }); 
      }
    })
  },

  // 设置是否进行自动大小改变

  onViewInit() {
    const comps = this.model.get('components')
    // 文字 wrap 形式
    const wrap = this.model.get('wrap')
    // placeholder 内容
    const placeholder = this.model.get('placeholder')
    // maxLength 长度
    const maxLength = parseInt(this.model.get('maxLength')) || 0
    // 文本高度
    const rows = this.model.get('rows')
    // 文本宽度
    const cols = this.model.get('cols')

    if (!comps.length) {
      comps.reset();
      comps.add(`
        <label 
          for="id-${multiline}"
          class="${multiline}-title"
        >
          多行文本标签
        </label>
        <textarea
          id="id-${multiline}"
          class="${multiline}-body"
          wrap="${wrap}"
          placeholder="${placeholder}"
          ${maxLength ? `maxLength=${maxLength}` : ''}
          rows="${rows}"
          cols="${cols}"
        >多行文本</textarea>
      `)
    }

    const evn = "change:manualResize change:autoResize change:edit change:wrap change:placeholder change:maxLength change:rows change:cols"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}