<!--百分比组件-->
<template>
  <el-input
    :percent.sync="percent"
    v-model="number"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    :type="type"
    :digits="digits"
    :maxlength="maxlength"
    :style="{width: width}"
    @change="changeCheck"
    @blur="blurCheck"
    :size="size">
  </el-input>
</template>

<script>
import * as format from '@/filters/index'
import { regExp } from 'newepoch-components'

export default {
  props: {
    // 输入框类型
    type: {
      type: String,
      default () {
        return 'text'
      }
    },
    // 输入框尺寸
    size: {
      type: String,
      default () {
        return null
      }
    },
    // 是否可清除
    clearable: {
      type: Boolean,
      default () {
        return true
      }
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 绑定值
    percent: {
      type: [Number, String],
      default () {
        return null
      }
    },
    // 保留位数
    digits: {
      type: Number,
      default () {
        return 2
      }
    },
    // 输入框占位文本
    placeholder: {
      type: String,
      default () {
        return '请输入'
      }
    },
    width: {
      type: String,
      default () {
        return '200px'
      }
    },
    maxlength: {
      type: Number,
      default () {
        return 6
      }
    }
  },
  data () {
    return {
      number: null,
      numberSize: null
    }
  },
  methods: {
    blurCheck () {
      let p = ''
      if (this.percent !== null && this.percent !== '') {
        p = format.accMul(this.percent, 100)
      }
      if (!regExp.rate.test(p)) {
        this.number = ''
        this.$emit('update:percent', null)
      }
    },
    changeCheck (percent) {
      this.$emit('changeCheck', percent)
    },
    input: function () {
      if (this.UtilJs.isEmpty(this.number)) {
        this.$emit('update:percent', null)
      } else {
        let num = this.number / 100
        this.numberSize = this.number
        if (num + '' === 'NaN') {
          num = null
        }
        this.$emit('update:percent', parseFloat(parseFloat(num).toFixed(this.digits + 2)))
      }
    },
    set: function () {
      if (this.UtilJs.isEmpty(this.percent)) {
        this.number = null
      }
      if (this.percent + '' === 'NaN') {
        this.number = null
      } else {
        if (this.percent !== 0 && this.percent !== null && this.percent !== '') {
          if (this.numberSize) {
            this.number = this.numberSize
            this.numberSize = null
          } else {
            this.number = format.accMul(this.percent, 100)
          }
        } else {
          this.number = this.numberSize
        }
      }
    }
  },
  watch: {
    percent: {
      handler (val) {
        let p = ''
        if (val !== null && val !== '') {
          p = format.accMul(val, 100)
        }
        if (!regExp.rate.test(p) && p !== 0) {
          this.number = ''
          this.$emit('update:percent', null)
        }
        this.numberSize = null
        this.set()
      },
      immediate: true
    },
    number: function () {
      let a = String(this.number).split('.')
      if (a.length === 2 && a[1].length > this.digits) {
        this.number = ''
        this.$emit('update:percent', null)
      }
      if (typeof (this.number) === 'string') {
        this.number = this.number.replace(/[^\d.]/g, '')
        this.input()
      }
      // if (!regExp.percent.test(this.number)) {
      //   this.number = ''
      //   this.$emit('update:percent', null)
      // }
      // this.number = this.number.replace(/[^\d.]/g, '')
      // if (this.number >= 0) {
      //   this.input()
      // }
    }
  }
}
</script>

<style scoped>

</style>
