<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2018-08-13 20:18:10
 * @LastEditTime: 2019-11-21 11:04:57
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div
    class="input-currency el-input el-input-group"
    :class="{
      'el-input-group--append': suffix,
      'is-disabled':disabled,
      'el-input--mini': size === 'mini',
      'el-input--small': size === 'small'
    }">
    <input
      key="label"
      ref="label"
      class="el-input__inner input-currency-label"
      v-show="labelVisible"
      @focus="handlerLabelClick"
      :value="label"
      :disabled="disabled"
      :readonly="readonly">
    <input
      key="value"
      ref="value"
      v-show="!labelVisible"
      :maxlength="maxlength"
      type="text"
      :placeholder="placeholder"
      :value="value"
      :disabled="disabled"
      :readonly="readonly"
      @input="updateValue($event.target.value)"
      @focus="selectAll"
      @blur="formatValue"
      class="el-input__inner currency">
    <div class="el-input-group__append" v-if="suffix">{{suffix}}</div>
  </div>
</template>

<script type="text/javascript">
import fmoney from './es/formatMoney';

export default {
  name: 'inputCurrency',
  props: {
    value: {
      type: Number,
      default: 0,
    },
    suffix: {
      type: String,
    },
    negative: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '请输入',
    },
    size: {
      type: String,
      default: 'small',
    },
    maxlength: {
      type: [Number, String],
      default: 15,
    },
  },
  data() {
    return {
      labelVisible: true,
    };
  },
  mounted() {
    this.formatValue();
  },
  directives: {
    focus: {
      componentUpdated(el, { value }) {
        if (value) {
          el.focus();
        }
      },
    },
  },
  computed: {
    label() {
      return fmoney(this.value);
    },
  },
  methods: {
    currencyValidator(value) {
      if (!value) return 0;
      if (this.negative && value === '-') return '-';
      if (isNaN(value)) return this.value;
      if (!this.negative && value < 0) {
        return this.value;
      }
      value = value.toString();
      let integerValue = value.split('.')[0];
      let decimalValue = value.split('.')[1];
      if (integerValue && integerValue.length > 15) {
        integerValue = integerValue.slice(0, 15);
      }
      if (decimalValue && decimalValue.length > 2) {
        decimalValue = decimalValue.slice(0, 2);
      }
      const result = (decimalValue || decimalValue === '') ? `${integerValue}.${decimalValue}` : integerValue;
      return result;
    },
    updateValue(value) {
      const result = this.currencyValidator(value);
      this.$refs.value.value = result;
      this.$emit('input', result);
    },
    formatValue() {
      let result = this.currencyValidator(this.value);
      if (result === '-') {
        result = '0.00';
      }
      this.$refs.value.value = result;
      this.labelVisible = true;
      this.$emit('input', this.$refs.value.value);
    },
    selectAll(event) {
      // this.$refs.value.click();
      setTimeout(() => {
        event.target.select();
      }, 0);
    },
    handlerLabelClick() {
      if (!this.disabled && !this.readonly) {
        this.labelVisible = false;
        this.$nextTick(() => {
          this.$refs.label.blur();
          this.$refs.value.focus();
        });
      }
    },
  },
  watch: {
    value() {
      if (!this.value) this.$emit('input', 0);
    },
  },
};
</script>

<style lang="scss">
.input-currency {
  input {
    text-align: right!important;
  }
  input:read-only {
    border: none;
    background-color: transparent;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
}
</style>
