<template>
    <Input ref="xInput"
    clearable
    @input.native='inputHandler'
    @on-blur="blurHandler"
    @on-focus="focusHandler"
    @on-clear="clearHandler"/>
</template>
<script>
import create from '../utils/create'
import { Input } from 'view-design'
import Inputmask from 'inputmask'

const defaultOptions = {
  valueField: 'value',
  textField: 'text',
  mask: '',
  pattern: /(\w)+/g
}

export default create({
  name: 'code-input',
  components: {
    Input
  },
  props: {
    value: {
      type: [Object, String],
      default: () => {
        return ''
      }
    },
    valueField: {
      required: true,
      type: String,
      default: () => { return defaultOptions.valueField }
    },
    textField: {
      required: true,
      type: String,
      default: () => { return defaultOptions.textField }
    },
    pattern: {
      required: false,
      type: RegExp,
      default: () => { return defaultOptions.pattern }
    },
    mask: {
      required: false,
      type: [Object, String],
      default: () => { return defaultOptions.mask }
    },
    dataList: {
      required: false,
      type: Array,
      default: () => { return [] }
    },
    changingOver: {
      required: false,
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      element: null,
      isCompleted: true,
      currentValue: this.value,
      currentItem: undefined
    }
  },
  computed: {
    currentText: {
      get: function () {
        let text = this.items[this.value] ? this.items[this.value][this.textField] : this.value
        return text
      }
    },
    items () {
      let result = {}
      this.dataList.forEach(item => {
        result[item[this.valueField]] = item
      })
      return result
    }
  },
  mounted () {
    let el = this.$refs.xInput.$el
    this.element = el.querySelector('input')
    if (this.changingOver) { this.element.value = this.currentText || '' } else { this.element.value = this.currentValue }
  },
  methods: {
    setMask (input) {
      if (this.mask) {
        Inputmask(this.mask).mask(input)
      } else if (this.pattern) {
        Inputmask({ regex: this.pattern.source,
          isComplete: (buffer, opts) => {
            return new RegExp(opts.regex).test(buffer.join(''))
          }
        }).mask(input)
      }
    },
    removeMask (input) {
      if (input.inputmask) input.inputmask.remove()
    },
    inputHandler () {
      this.isCompleted = !/_+/g.test(this.element.value)
      this.currentValue = this.element.value.replace(/_+/g, '')
      this.currentItem = this.items[this.currentValue]
      this.$emit('input', this.currentValue)
    },
    blurHandler (event) {
      this.removeMask(this.element)
      this.element.value = this.currentValue
      if (this.changingOver && this.currentText) {
        this.element.value = this.currentValue ? this.currentText : ''
      }
      this.currentItem = this.items[this.currentValue]
      this.$emit('blur', event)
    },
    focusHandler (event) {
      this.element.value = this.currentValue
      this.setMask(this.element)
      this.element.inputmask.setValue(this.currentValue)
      this.$emit('focus', event)
    },
    isComplete () {
      return this.isCompleted
    },
    getCurrentText () {
      return this.currentText
    },
    clearHandler () {
      this.currentValue = ''
      this.currentText = ''
      this.currentItem = null
      this.$emit('input', this.currentValue)
    },
    getItem () {
      return this.currentItem
    }
  },
  watch: {
    value (val) {
      this.isCompleted = !/_+/g.test(this.element.value)
      this.currentValue = val ? val.replace(/_+/g, '') : ''
      let text = this.currentText || ''
      if (text === '') text = this.currentValue
      if (this.changingOver) { this.element.value = text } else { this.element.value = this.currentValue }
      if (this.element.value === '') this.element.value = val
      this.currentItem = this.items[this.currentValue]
      this.$emit('input', val)
    }
  }
})
</script>
