/* global getTop */
module.exports = {
  style: `/* #ifndef H5 || MP-ALIPAY || APP-PLUS */
  ._address,
  ._article,
  ._aside,
  ._body,
  ._caption,
  ._center,
  ._cite,
  ._footer,
  ._header,
  ._html,
  ._nav,
  ._pre,
  ._section {
    display: block;
  }
  
  /* #endif */
  ._video {
    width: 300px;
    height: 225px;
    display: inline-block;
    background-color: black;
  }`,
  methods: {
    /**
     * @description 开始编辑文本
     * @param {Event} e
     */
    editStart (e) {
      if (this.opts[5]) {
        const i = e.currentTarget.dataset.i
        if (!this.ctrl['e' + i] && this.opts[5] !== 'simple') {
          // 显示虚线框
          this.$set(this.ctrl, 'e' + i, 1)
          setTimeout(() => {
            this.root._mask.push(() => this.$set(this.ctrl, 'e' + i, 0))
          }, 50)
          this.root._edit = this
          this.i = i
          this.cursor = this.childs[i].text.length
        } else {
          if (this.opts[5] === 'simple') {
            this.root._edit = this
            this.i = i
            this.cursor = this.childs[i].text.length
          }
          this.root._mask.pop()
          this.root._maskTap()
          // 将 text 转为 textarea
          this.$set(this.ctrl, 'e' + i, 2)
          // 延时对焦,避免高度错误
          setTimeout(() => {
            this.$set(this.ctrl, 'e' + i, 3)
          }, 50)
        }
      }
    },
    /**
     * @description 输入文本
     * @param {Event} e
     */
    editInput (e) {
      const i = e.target.dataset.i
      // 替换连续空格
      const value = e.detail.value.replace(/ {2,}/, $ => {
        let res = '\xa0'
        for (let i = 1; i < $.length; i++) {
          res += '\xa0'
        }
        return res
      })
      this.root._editVal(`${this.opts[7]}.${i}.text`, this.childs[i].text, value) // 记录编辑历史
      this.cursor = e.detail.cursor
    },
    /**
     * @description 完成编辑文本
     * @param {Event} e
     */
    editEnd (e) {
      const i = e.target.dataset.i
      this.$set(this.ctrl, 'e' + i, 0)
      // 更新到视图
      this.root._setData(`${this.opts[7]}.${i}.text`, e.detail.value.replace(/ {2}/g, '\xa0 '))
      if (e.detail.cursor !== undefined) {
        this.cursor = e.detail.cursor
      }
    },
    /**
     * @description 插入一个标签
     * @param {Object} node 要插入的标签
     */
    insert (node) {
      setTimeout(() => {
        const childs = this.childs.slice(0)
        if (!childs[this.i]) {
          childs.push(node)
        } else if (childs[this.i].text) {
          // 在文本中插入
          const text = childs[this.i].text
          if (node.type === 'text') {
            if (this.cursor) {
              childs[this.i].text = text.substring(0, this.cursor) + node.text + text.substring(this.cursor)
            } else {
              childs[this.i].text += node.text
            }
          } else {
            const list = []
            if (this.cursor) {
              list.push({
                type: 'text',
                text: text.substring(0, this.cursor)
              })
            }
            list.push(node)
            if (this.cursor < text.length) {
              list.push({
                type: 'text',
                text: text.substring(this.cursor)
              })
            }
            childs.splice(this.i, 1, ...list)
          }
        } else {
          childs.splice(parseInt(this.i) + 1, 0, node)
        }
        this.root._editVal(this.opts[7], this.childs, childs, true)
        this.i = parseInt(this.i) + 1
      }, 200)
    },
    /**
     * @description 移除第 i 个标签
     * @param {Number} i
     */
    remove (i) {
      const arr = this.childs.slice(0)
      const delEle = arr.splice(i, 1)[0]
      if (delEle.name === 'img' || delEle.name === 'video' || delEle.name === 'audio') {
        let src = delEle.attrs.src
        if (delEle.src) {
          src = delEle.src.length === 1 ? delEle.src[0] : delEle.src
        }
        this.root.$emit('remove', {
          type: delEle.name,
          src
        })
      }
      this.root._edit = undefined
      this.root._maskTap()
      this.root._editVal(this.opts[7], this.childs, arr, true)
    },
    /**
     * @description 标签被点击
     * @param {Event} e
     */
    nodeTap (e) {
      if (this.opts[5]) {
        if (this.root._lock) return
        this.root._lock = true
        setTimeout(() => {
          this.root._lock = false
        }, 50)
        if (this.ctrl['e' + this.i] === 3) return
        this.root._maskTap()
        this.root._edit = this
        if (this.opts[5] === 'simple') return
        let start = this.opts[7].lastIndexOf('children.')
        if (start !== -1) {
          start += 9
        } else {
          start = 6
        }
        const i = parseInt(this.opts[7].substring(start, this.opts[7].lastIndexOf('.children')))
        let parent = this.$parent
        while (parent && parent.$options.name !== 'node') {
          parent = parent.$parent
        }
        let remove = () => {
          parent.remove(i)
        }
        if (this.opts[7].length - parent.opts[7].length > 15) {
          const parts = this.opts[7].split('.')
          let childs = parent.childs
          const i = parseInt(parts[parent.opts[7].split('.').length])
          const oldParent = parent
          // 删除整个表格
          remove = () => {
            oldParent.remove(i)
          }
          for (let i = parent.opts[7].split('.').length; i < parts.length - 2; i++) {
            childs = childs[parts[i]]
          }
          const that = this
          parent = {
            childs,
            opts: [undefined, undefined, undefined, undefined, undefined, undefined, undefined, parts.slice(0, parts.length - 2).join('.')],
            changeStyle (name, i, value, oldVal) {
              let style = this.childs[i].attrs.style || ''
              if (style.includes(';' + name + ':' + oldVal)) {
                style = style.replace(';' + name + ':' + oldVal, ';' + name + ':' + value)
              } else {
                style += ';' + name + ':' + value
              }
              that.root._setData(`${this.opts[7]}.${i}.attrs.style`, style)
            }
          }
        }
        if (!parent) return
        // 显示实线框
        this.$set(this.ctrl, 'root', 1)
        this.root._mask.push(() => this.$set(this.ctrl, 'root', 0))
        if (this.childs.length === 1 && this.childs[0].type === 'text' && !this.ctrl.e0) {
          this.$set(this.ctrl, 'e0', 1)
          this.root._mask.push(() => this.$set(this.ctrl, 'e0', 0))
          this.i = 0
          this.cursor = this.childs[0].text.length
        }
        const items = this.root._getItem(parent.childs[i], i !== 0, i !== parent.childs.length - 1)
        this.root._tooltip({
          top: getTop(e),
          items,
          success: tapIndex => {
            if (items[tapIndex] === '大小') {
              // 改变字体大小
              const style = parent.childs[i].attrs.style || ''
              let value = style.match(/;font-size:([0-9]+)px/)
              if (value) {
                value = parseInt(value[1])
              } else {
                value = 16
              }
              this.root._slider({
                min: 10,
                max: 30,
                value,
                top: getTop(e),
                changing: val => {
                  if (Math.abs(val - value) > 2) {
                    // 字号变换超过 2 时更新到视图
                    parent.changeStyle('font-size', i, val + 'px', value + 'px')
                    value = e.detail.value
                  }
                },
                change: val => {
                  if (val !== value) {
                    parent.changeStyle('font-size', i, val + 'px', value + 'px')
                  }
                  this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, parent.childs[i].attrs.style)
                }
              })
            } else if (items[tapIndex] === '颜色') {
              // 改变文字颜色
              const items = this.root._getItem('color')
              this.root._color({
                top: getTop(e),
                items,
                success: tapIndex => {
                  const style = parent.childs[i].attrs.style || ''
                  const value = style.match(/;color:([^;]+)/)
                  parent.changeStyle('color', i, items[tapIndex], value ? value[1] : undefined)
                  this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, parent.childs[i].attrs.style)
                }
              })
            } else if (items[tapIndex] === '上移' || items[tapIndex] === '下移') {
              const arr = parent.childs.slice(0)
              const item = arr[i]
              if (items[tapIndex] === '上移') {
                arr[i] = arr[i - 1]
                arr[i - 1] = item
              } else {
                arr[i] = arr[i + 1]
                arr[i + 1] = item
              }
              this.root._editVal(parent.opts[7], parent.childs, arr, true)
            } else if (items[tapIndex] === '删除') {
              remove()
            } else {
              const style = parent.childs[i].attrs.style || ''
              let newStyle = ''
              const item = items[tapIndex]
              let name
              let value
              if (item === '斜体') {
                name = 'font-style'
                value = 'italic'
              } else if (item === '粗体') {
                name = 'font-weight'
                value = 'bold'
              } else if (item === '下划线') {
                name = 'text-decoration'
                value = 'underline'
              } else if (item === '居中') {
                name = 'text-align'
                value = 'center'
              } else if (item === '缩进') {
                name = 'text-indent'
                value = '2em'
              }
              if (style.includes(name + ':')) {
                // 已有则取消
                newStyle = style.replace(new RegExp(name + ':[^;]+'), '')
              } else {
                // 没有则添加
                newStyle = style + ';' + name + ':' + value
              }
              this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, newStyle, true)
            }
          }
        })
      }
    },
    /**
     * @description 音视频被点击
     * @param {Event} e
     */
    mediaTap (e, index) {
      if (this.opts[5]) {
        const i = e.target.dataset.i || index
        const node = this.childs[i]
        const items = this.root._getItem(node)
        this.root._maskTap()
        this.root._edit = this
        this.i = i
        this.root._tooltip({
          top: e.currentTarget.offsetTop - 30,
          items,
          success: tapIndex => {
            switch (items[tapIndex]) {
              case '封面':
                // 设置封面
                this.root.getSrc('img', node.attrs.poster || '').then(url => {
                  this.root._editVal(`${this.opts[7]}.${i}.attrs.poster`, node.attrs.poster, url instanceof Array ? url[0] : url, true)
                }).catch(() => { })
                break
              case '删除':
                this.remove(i)
                break
              case '循环':
              case '不循环':
                // 切换循环播放
                this.root._setData(`${this.opts[7]}.${i}.attrs.loop`, !node.attrs.loop)
                uni.showToast({
                  title: '成功'
                })
                break
              case '自动播放':
              case '不自动播放':
                // 切换自动播放播放
                this.root._setData(`${this.opts[7]}.${i}.attrs.autoplay`, !node.attrs.autoplay)
                uni.showToast({
                  title: '成功'
                })
                break
            }
          }
        })
        // 避免上层出现点击态
        this.root._lock = true
        setTimeout(() => {
          this.root._lock = false
        }, 50)
      }
    },
    /**
     * 改变样式
     * @param {String} name 属性名
     * @param {Number} i 第几个标签
     * @param {String} value 新值
     * @param {String} oldVal 旧值
     */
    changeStyle (name, i, value, oldVal) {
      let style = this.childs[i].attrs.style || ''
      if (style.includes(';' + name + ':' + oldVal)) {
        // style 中已经有
        style = style.replace(';' + name + ':' + oldVal, ';' + name + ':' + value)
      } else {
        // 没有则新增
        style += ';' + name + ':' + value
      }
      this.root._setData(`${this.opts[7]}.${i}.attrs.style`, style)
    }
  },
  handler (file) {
    if (file.isBuffer()) {
      let content = file.contents.toString()
      if (file.path.includes('mp-html.vue')) {
        // 传递 editable 属性和路径
        content = content.replace(/opts\s*=\s*"\[([^\]]+)\]"/, 'opts="[$1,editable,placeholder,\'nodes\']"')
          .replace(/\s*<\/template>/, `  
      
        {{item}}
      
    
    
      
    
    
      
        
      
    
  
`)
          // 添加 data
          .replace(/data\s*\(\)\s*{\s*return\s*{/, `data() {
    return {
      tooltip: null,
      slider: null,
      color: null,`)
          // 添加 editable 属性
          .replace(/props\s*:\s*{/, `props: {
    editable: [Boolean, String],
    placeholder: String,`)
          // 添加 watch
          .replace(/watch\s*:\s*{/, `watch: {
    editable(val) {
      this.setContent(val ? this.content : this.getContent())
      if (!val)
        this._maskTap()
    },`)
          .replace(/if\s*\(this.content/, 'if ((this.content || this.editable)')
          // 处理各类弹窗的事件
          .replace(/methods\s*:\s*{/, `methods: {
    _containTap() {
      if (!this._lock && !this.slider && !this.color) {
        this._edit = undefined
        this._maskTap()
      }
    },
    _tooltipTap(e) {
      this._tooltipcb(e.currentTarget.dataset.i)
      this.$set(this, 'tooltip', null)
    },
    _sliderChanging(e) {
      this._slideringcb(e.detail.value)
    },
    _sliderChange(e) {
      this._slidercb(e.detail.value)
    },
    _colorTap(e) {
      this._colorcb(e.currentTarget.dataset.i)
      this.$set(this, 'color', null)
    },`)
          // 工具弹窗的样式
          .replace('', `
/* 提示条 */
._tooltip_contain {
  position: absolute;
  right: 20px;
  left: 20px;
  text-align: center;
}
._tooltip {
  box-sizing: border-box;
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: 30px;
  padding: 0 3px;
  overflow: scroll;
  font-size: 14px;
  line-height: 30px;
  white-space: nowrap;
}
._tooltip_item {
  display: inline-block;
  width: auto;
  padding: 0 2vw;
  line-height: 30px;
  background-color: black;
  color: white;
}
._color_item {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px 2vw;
  border:1px solid #dfe2e5;
  border-radius: 50%;
}
/* 图片宽度滚动条 */
._slider {
  position: absolute;
  left: 20px;
  width: 220px;
}
._tooltip,
._slider {
  background-color: black;
  border-radius: 3px;
  opacity: 0.75;
}
`)
      } else if (file.path.includes('parser.js')) {
        // 不做 expose 处理
        content = content.replace(/parser.prototype.expose\s*=\s*function\s*\(\)\s*{/, `parser.prototype.expose = function () {
  if (this.options.editable) return`)
          .replace(/popNode\s*=\s*function\s*\(\)\s*{/, 'popNode = function () {\n  const editable = this.options.editable')
          // 不转换标签名
          .replace(/if\s*\(config.blockTags\[node.name\]\)\s*{[\s\S]+?}/, `if (config.blockTags[node.name]) {
    if (!editable) {
      node.name = 'div'
    }
  }`)
          // 转换表格和列表
          .replace(/else\s*if\s*\(node.c\)/, 'else if (!editable && node.c )')
          .replace(/node.c(\)|\s*&&|\s*\n)/g, '(node.c || editable)$1')
          .replace(/while\s*\(map\[row\s*\+\s*'.'\s*\+\s*col\]\)\s*{[\s\S]+?}/, `while (map[row + '.' + col]) {
            col++
          }
          if (editable) {
            td.r = row
          }`)
          .replace(/let\s+str\s*=\s*'