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

<script>
import LabelBox from '../labelBox/index.vue';
export default {
  components: {
    LabelBox,
  },
  props: {
    formItems: {
      type: Object,
      default: () => {},
    },
    value: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      isFocused: false,
      localValue: this.parseValue(this.value),
    };
  },
  computed: {
    displayValue() {
      if (this.isFocused) {
        return this.localValue.toString();
      }
      return this.formatNumber(this.localValue);
    },
  },
  watch: {
    value(newVal) {
      if (!this.isFocused) {
        this.localValue = this.parseValue(newVal);
      }
    },
  },
  methods: {
    parseValue(value) {
      const num = parseFloat(value);
      if (isNaN(num)) return 0;
      return num;
    },
    formatNumber(num) {
      if (isNaN(num)) return '0.00';
      return num.toLocaleString('en-US', {
        minimumFractionDigits: this.formItems?.attrs?.precision || 2,
        maximumFractionDigits: this.formItems?.attrs?.precision || 2,
      });
    },
    handleInput(e) {
      let value = e
        .replace(/[^\d.]/g, '') // 移除非数字和小数点
        .replace(/\.{2,}/g, '.') // 只保留第一个小数点
        .replace(/(\.\d*)\./g, '$1'); // 禁止输入多个小数点

      // 处理开头的小数点
      if (value.startsWith('.')) {
        value = '0' + value;
      }

      // 拆分整数和小数部分
      const parts = value.split('.');
      const integerPart = parts[0].replace(/\D/g, '');
      let decimalPart = parts[1] || '';

      // 限制小数位数
      if (decimalPart.length > (this.formItems?.attrs?.precision || 2)) {
        decimalPart = decimalPart.substring(0, (this.formItems?.attrs?.precision || 2));
      }

      // 拼接最终值
      const newValue = decimalPart ? `${integerPart}.${decimalPart}` : integerPart;
      const numericValue = parseFloat(newValue) || 0;

      // 更新本地值和触发事件
      this.localValue = numericValue;
      // console.log('this.localValue', this.localValue);

      this.$emit('input', this.localValue);
    },
    handleFocus() {
      this.isFocused = true;
    },
    handleBlur() {
      this.isFocused = false;
      this.localValue = this.parseValue(this.localValue);
      this.$emit('input', this.localValue);
      this.$emit('outOperation', this.localValue);
    },
    handleKeyDown(e) {
      // 阻止非法字符输入
      if (['e', 'E', '+', '-'].includes(e.key)) {
        e.preventDefault();
      }
    },
  },
};
</script>

<style 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>
