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

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

  data () {
    return {
      focused: false,
      disable: true,
      newVal: '',
    }
  },
  filter: {
    uncurrency (val) {
      if (!val) return ''
      return Number((val).replace(/,|%/gi, ''))
    },
  },
  computed: {
    formatValue () {
      let currency = this.$options.filters['rate']
      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
      // let uncurrency = this.$options.filter['uncurrency']
      // this.newVal = uncurrency(this.value)
      this.newVal = this.value
      if (this.newVal.includes('.') && value === '.') {
      } else {
        this.newVal += ('' + value)
      }
      this.$emit('input', this.newVal)
    },
    onDelete () {
      this.newVal = ''
      this.$emit('input', this.newVal)
    },
    // 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
      let vm = this
      this.focused = true
      let value = (event.target.value).trim()
      let uncurrency = this.$options.filter['uncurrency']
      let newVal = uncurrency(value)
      event.target.value = newVal
      setTimeout(function () {
        let dom = document.querySelector('.content')
        let veiwHeight = vm.getClientHeight()
        let eleHeight = vm.getOffsetTop(event.target)
        let scrollTop = Math.floor(dom.scrollTop)
        let result = Math.floor(veiwHeight - (eleHeight - scrollTop))
        let fontS = parseFloat(document.documentElement.style.fontSize) * 5
        console.log(fontS)
        if (result >= fontS) {
        } else {
          let ele = document.createElement('div')
          ele.setAttribute('class', 'add-height')
          ele.style.height = (fontS - result + 44) + 'px'
          ele.style.background = '#fff'
          // setTimeout(() => {
          dom.appendChild(ele)
          // }, 100)
          dom.scrollTop = scrollTop + (fontS - result + 44)
          // dom.scrollTo(dom.scrollLeft, scrollTop + (256 - result))
        }
        console.log(veiwHeight, eleHeight, scrollTop, result)
        event.target.type = 'text'
        event.target.value = newVal
        // event.target.focus()
      }, 0)
    },
    onBlur (event) {
      // if (this.disable) return
      if (document.querySelector('.add-height')) {
        document.querySelector('.content').removeChild(document.querySelector('.add-height'))
      }
      event.target.type = 'text'
      this.focused = false
    },
    // 取窗口可视范围的高度
    getClientHeight () {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      return clientHeight
    },
    // 取窗口滚动条高度
    getOffsetTop (obj) {
      var tmp = obj.offsetTop
      var node = obj.offsetParent
      while (node !== null) {
        tmp += node.offsetTop
        node = node.offsetParent
      }
      return tmp
    },
  },
}
</script>

<style scoped lang="less">

</style>
