<template>
  <div class="x-money-input">
    <el-input
      v-if="type === 'edit'"
      :value="data"
      :maxlength="15"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      :class="{ 'align-right': alignRight }"
      @input="dataChangeEvent($event)"
      @blur="formatMoney($event)"
      @focus="deleteComma"
      @change="blurOrEnter"
    ></el-input>
    <x-ellipsis
      v-if="type === 'read'"
      mode="origin"
      :label="data"
      :class="{ 'read-align-right': alignRight }"
    ></x-ellipsis>
  </div>
</template>
<script>
import MoneyUtil from '../../utils/money.util'
export default {
  name: 'XMoneyInput',
  model: {
    prop: 'configValue',
    event: 'change'
  },
  props: {
    type: {
      type: String,
      default: 'edit'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    configValue: {
      type: [Number, String],
      require: true
    },
    moneyDisplayStyle: {
      type: String,
      default: 'NUMBER'
    },
    maxValue: {
      type: Number
    },
    minValue: {
      type: Number
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    alignRight: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      data: '',
      flag: false
    }
  },
  watch: {
    configValue: {
      handler(newValue, oldValue) {
        if (!this.flag) {
          if (Object.prototype.toString.call(newValue) === `[object Number]`) {
            this.$emit('change', newValue.toString())
          } else if (newValue === null || newValue === undefined || newValue === '') {
            this.data = ''
          } else {
            if (parseFloat(newValue) === 0) {
              this.data = this.moneyDisplayStyle === 'NUMBER' ? '0.00' : '零'
            } else {
              this.data = this.displayType(newValue)
            }
          }
        }
      },
      immediate: true
    },
    moneyDisplayStyle: {
      handler(newVal, oldVal) {
        if (this.configValue !== undefined && this.configValue !== '') {
          this.data = this.displayType(this.configValue)
        }
      },
      immediate: true
    },
    maxValue: {
      handler(newVal, oldVal) {
        if (newVal !== undefined) {
          if (this.configValue !== undefined && this.configValue !== '') {
            if (parseFloat(this.configValue) > newVal) {
              this.dealValue(this.maxValue)
            }
          }
        }
      },
      immediate: true
    },
    minValue: {
      handler(newVal, oldVal) {
        if (newVal !== undefined) {
          if (this.configValue !== undefined && this.configValue !== '') {
            if (parseFloat(this.configValue) < newVal) {
              this.dealValue(this.minValue)
            }
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    dataChangeEvent(e) {
      const value = e
      const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/ // 数字正则
      if (
        (!isNaN(value) && reg.test(value)) ||
        value === '' ||
        value === '-' ||
        value.startsWith('.') ||
        value.startsWith('-.')
      ) {
        this.flag = true
        if (value === '' || value === '-' || value === '-.' || value === '.') {
          // 如果值为空 提示校验文字，不为空时另value为0 关闭校验文字，在失焦事件时将value在复制成正确的值
          this.$emit('change', '')
        } else if (value.startsWith('.')) {
          this.$emit('change', '0' + value)
        } else if (value.startsWith('-.')) {
          this.$emit('change', '-0' + value.substring(1))
        } else {
          this.$emit('change', value)
        }
        this.data = value
      }
      this.$emit('input', this.data)
    },
    formatMoney(e) {
      if (!this.readonly) {
        const value = this.configValue
        if (this.minValue !== undefined && parseFloat(value) < this.minValue) {
          this.dealValue(this.minValue)
        } else if (this.maxValue !== undefined && parseFloat(value) > this.maxValue) {
          this.dealValue(this.maxValue)
        } else {
          this.dealValue(value)
        }
      }
      this.flag = false
      this.$emit('blur', e)
    },
    dealValue(value) {
      if (parseFloat(value) === 0) {
        this.$emit('change', '0')
        // this.configValue = 0
        this.data = this.moneyDisplayStyle === 'NUMBER' ? '0.00' : '零'
      } else {
        var formatedMoney = this.displayType(value)
        this.data = formatedMoney
        var numberMoney = MoneyUtil.formatThousandth(value, 2, true)
        // eslint-disable-next-line no-useless-escape
        numberMoney = numberMoney.replace(/\,/g, '')
        parseFloat(numberMoney) !== parseFloat(value) && this.$emit('change', numberMoney)
        // this.configValue = parseFloat(numberMoney)
      }
    },
    deleteComma(e) {
      if (!this.readonly) {
        setTimeout(() => {
          if (this.moneyDisplayStyle === 'NUMBER') {
            const tmp = this.data
            // eslint-disable-next-line no-useless-escape
            this.data = this.data.replace(/\,/g, '')
            // 聚焦时光标在最右侧
            if (this.data === tmp && this.data) {
              this.data = ` `
              setTimeout(() => {
                this.data = tmp
              })
            }
          } else if (this.moneyDisplayStyle === 'TEXT') {
            if (this.configValue !== undefined && this.configValue !== '') {
              this.data = MoneyUtil.formatThousandth(this.configValue, 2, true)
              // eslint-disable-next-line no-useless-escape
              this.data = this.data.replace(/\,/g, '')
            }
          }
        })
      }
      this.$emit('focus', e)
    },
    displayType(value) {
      if (this.moneyDisplayStyle === 'NUMBER') {
        return MoneyUtil.formatThousandth(value, 2, true)
      } else if (this.moneyDisplayStyle === 'TEXT') {
        return MoneyUtil.formatDX(value)
      }
    },
    blurOrEnter(e) {
      this.$emit('blurOrEnter', e)
    }
  }
}
</script>
