/**
* @Author Sean
* @Date 2019/11/21
*/
<template>
  <input
    :value="formatValue" :readonly="disable" type="text"
    @focus="onFocus" @blur="onBlur" @click="keyboradShow">
</template>

<script>
export default {
  name: 'CurrencyInput',
  props: {
    value: {
      default: '',
    },
    disable: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: '',
    },
  },

  data () {
    return {
      focused: false,
      newVal: '',
    }
  },
  filter: {
    uncurrency (val) {
      if (!val) return null
      return (Number((val).replace(/,/gi, ''))) === 0 ? 0 : Number((val).replace(/,/gi, ''))
    },
  },
  computed: {
    formatValue () {
      let currency = this.$options.filters['currency']
      if (!this.focused) {
        if (this.value !== '' && this.value !== null) {
          return `￥${currency(this.value)}`
        }
      } else {
        return this.value
      }
    },
  },
  methods: {
    keyboradShow () {
      let vm = this
      hlsPopup.showNumberKeyborad({
        title: '数字键盘',
        keyDown: (text) => {
          vm.onInput(text)
        },
        keyDelete: () => {
          vm.onDelete()
        },
      })
    },
    onInput (value) {
      if (this.disable) return
      this.newVal = this.value
      this.newVal += ('' + value)
      this.$emit('input', this.newVal)
    },
    onDelete () {
      this.value = ''
    },
    // onInput: function (value) {
    //   if (this.disable) return
    //   let uncurrency = this.$options.filter['uncurrency']
    //   this.currencyValue = uncurrency(value)
    //   this.$emit('input', this.currencyValue)
    // },
    onFocus (event) {
      if (this.disable) return
      this.focused = true
      let value = event.target.value
      event.target.value = ''
      event.target.value = value
      setTimeout(function () {
        event.target.type = 'number'
        event.target.focus()
      }, 0)
    },
    onBlur (event) {
      if (this.disable) return
      event.target.type = 'text'
      this.focused = false
    },
  },
}
</script>

<style scoped lang="less">

</style>
