<template>
    <div>
      <input type="text" v-model="formattedValue" @input="handleInput">
    </div>
</template>

<script>
export default {
  name: 'x-input',
  data() {
    return {
      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() {
      // 可以在这里添加额外的逻辑，比如输入验证等
    },
    unitMultiplier() {
      if (this.unit === 'k') return 3; // 1k = 1000, 即乘以1000的单位转换
      return 0; // 默认无单位转换
    }
  }
};
</script>

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