import JVxeCellMixins from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins'

// tags 组件的显示组件
export const TagsSpanCell = {
  name: 'JVxeTagsCell',
  mixins: [JVxeCellMixins],
  data() {
    return {
      innerTags: [],
    }
  },
  watch: {
    innerValue: {
      immediate: true,
      handler(value) {
        if (value !== this.innerTags.join(';')) {
          let rv = replaceValue(value)
          this.innerTags = rv.split(';')
          this.handleChangeCommon(rv)
        }
      },
    },
  },
  methods: {
    renderTags(h) {
      let tags = []
      for (let tag of this.innerTags) {
        if (tag) {
          let tagProps = {}
          let tagStyle = {}
          let setTagColor = this.originColumn.setTagColor
          if (typeof setTagColor === 'function') {
            /**
             * 设置 tag 颜色
             *
             * @param event 包含的字段：
             * event.tagValue 当前tag的值
             * event.value 当前原始值
             * event.row 当前行的所有值
             * event.column 当前列的配置
             * event.column.own 当前列的原始配置
             * @return Array | String 可以返回一个数组，数据第一项是tag背景颜色，第二项是字体颜色。也可以返回一个字符串，即tag背景颜色
             */
            let color = setTagColor({
              tagValue: tag,
              value: this.innerValue,
              row: this.row,
              column: this.column,
            })
            if (Array.isArray(color)) {
              tagProps.color = color[0]
              tagStyle.color = color[1]
            } else if (color && typeof color === 'string') {
              tagProps.color = color
            }
          }
          tags.push(h('a-tag', {
            props: tagProps,
            style: tagStyle,
          }, [tag]))
        }
      }
      return tags
    },
  },
  render(h) {
    return h('div', {}, [
      this.renderTags(h)
    ])
  },
}

// tags 组件的输入框
export const TagsInputCell = {
  name: 'JVxeTagsInputCell',
  mixins: [JVxeCellMixins],
  data() {
    return {
      innerTagValue: '',
    }
  },
  watch: {
    innerValue: {
      immediate: true,
      handler(value) {
        if (value !== this.innerTagValue) {
          this.handleInputChange(value)
        }
      },
    },
  },
  methods: {

    handleInputChange(value, event) {
      this.innerTagValue = replaceValue(value, event)
      this.handleChangeCommon(this.innerTagValue)
      return this.innerTagValue
    },

  },
  render(h) {
    return h('a-input', {
      props: {
        value: this.innerValue,
        ...this.cellProps
      },
      on: {
        change: (event) => {
          let {target, target: {value}} = event
          let newValue = this.handleInputChange(value, event)
          if (newValue !== value) {
            target.value = newValue
          }
        }
      },
    })
  },
}

// 将值每隔两位加上一个分号
function replaceValue(value, event) {
  if (value) {
    // 首先去掉现有的分号
    value = value.replace(/;/g, '')
    // 然后再遍历添加分号
    let rv = ''
    let splitArr = value.split('')
    let count = 0
    splitArr.forEach((val, index) => {
      rv += val
      let position = index + 1
      if (position % 2 === 0 && position < splitArr.length) {
        count++
        rv += ';'
      }
    })
    if (event && count > 0) {
      let {target, target: {selectionStart}} = event
      target.selectionStart = selectionStart + count
      target.selectionEnd = selectionStart + count
    }
    return rv
  }
  return ''
}