<template>
  <LabelBox
    :label="formItems.attrs?.label"
    :need-star="formItems.attrs?.needStar"
    :width="formItems.attrs?.width"
  >
    <el-input
      v-model="inputValue"
      type="text"
      :placeholder="formItems.attrs?.placeholder || '请填写'"
      v-bind="formItems.attrs"
      @input="handleInput"
      @blur="handleBlur"
      @focus="handleFocus"
    />
  </LabelBox>
</template>

<script>
// d天 m月，y年，
import LabelBox from '../labelBox/index.vue';
export default {
  name: 'NumberInput',
  components: {
    LabelBox,
  },
  props: {
    formItems: {
      type: Object,
      default: () => {},
    },
    value: {
      type: [Number, String],
      default: null,
    },
    digit: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      inputValue: '',
      inputValueCopy: '',
    };
  },
  mounted() {
    this.inputValue = this.value
      ? this.value.toLocaleString('en-US', {
        minimumFractionDigits: this.digit,
        maximumFractionDigits: this.digit,
      })
      : ''; // 转换千分位
  },
  methods: {
    handleInput(value) {
      // 使用正则表达式限制只能输入数字、指定英文和一个小数点
      const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/;
      // 如果输入的值不符合正则规则，则回退到上一次的值
      if (!regex.test(value)) {
        this.inputValue = this.inputValueCopy;
      } else {
        this.inputValue = value;
        this.inputValueCopy = value;
      }
    },
    handleBlur() {
      if (this.inputValue) {
        const lastLetter = this.getLastLetter(this.inputValue);
        const firstLetter = this.getFirstLetter(this.inputValue);
        const num = firstLetter
          ? this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1
          : this.inputValue.replace(/[a-zA-Z]/g, '') * 1; // 去除字母
        let unit = 0;
        if (lastLetter === 'd') {
          unit = 1;
        } else if (lastLetter === 'm') {
          unit = 30;
        } else if (lastLetter === 'y') {
          unit = 365;
        }
        this.inputValue = (num * unit).toLocaleString('en-US', {
          minimumFractionDigits: this.digit,
          maximumFractionDigits: this.digit,
        }); // 转换千分位
      }
      this.$emit('input', this.inputValue);
      this.$emit('outOperation', this.inputValue);
    },
    handleFocus() {
      this.inputValue = this.inputValueCopy = this.inputValue.replace(/,/g, '');
    },
    // 获取第一个字母
    getFirstLetter(str) {
      return str.match(/[a-zA-Z]/)?.[0] || '';
    },
    // 获取最后一个字母
    getLastLetter(str) {
      const letters = str.match(/[a-zA-Z]/g); // 使用正则表达式匹配所有字母
      if (letters) {
        return letters[letters.length - 1]; // 返回最后一个字母
      }
      return '';
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.el-input {
  height: 32px;
  line-height: 32px;
}

::v-deep.input-box {
  height: 32px;
}

::v-deep.el-input .el-input__icon {
  height: 32px;
  line-height: 25px;
}

::v-deep.el-input .el-input-group__prepend {
  box-sizing: border-box;
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  border: none;
}

::v-deep.el-input .el-input__inner {
  height: 32px;
  line-height: 32px;
}
</style>
