<template>
    <div>
      <input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur">
    </div>
</template>

<script>
export default {
  name: 'x-input',
  data() {
    return {
        inputValue: '',
        inputValueCopy: '',
        rawValue: 0, // 存储原始数值，不带单位
        unit: '' // 存储单位，如'm', 'k'等
    };
  },
  computed: {
    // formattedValue: {
    //   get() {
    //     return this.formatValue(this.rawValue);
    //   },
    //   set(value) {
    //     this.parseValue(value);
    //   }
    // }
  },
  mounted() {
  },
  methods: {
    formatValue(value) {
      return (value / Math.pow(10, this.unitMultiplier)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    parseValue(value) {
      const match = value.match(/([0-9,.]+)([a-zA-Z]?)/);
      if (match) {
        this.rawValue = parseFloat(match[1].replace(/,/g, ''));
        this.unit = match[2]; // 获取单位，如果有的话
      } else {
        this.rawValue = 0;
        this.unit = '';
      }
    },
    handleInput(event) {
        let value = event.target.value;

        // 使用正则表达式限制只能输入数字、指定英文和一个小数点
        const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/;

        // 如果输入的值不符合正则规则，则回退到上一次的值
        if (!regex.test(value)) {
            this.inputValue = this.inputValueCopy
        } else {
            this.inputValue = value;
            this.inputValueCopy = value;
        }
    },
    handleBlur () {
        console.log('this.value-----', this.inputValue)
        if (this.inputValue.indexOf('k') !== -1) {
            let num = this.inputValue.split('k')[0].replace(/[a-zA-Z]/g, '') * 1
            console.log('num------', num)
            let billon = (num / Math.pow(10, 3)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            console.log('billon------', billon)
        }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>