<!-- 科学计数法组件 -->
<!-- 小于0.001 自动转成 科学计数法并保留三位小数 -->
<script lang="ts" setup name="ScientificNotation">
import BigNumber from 'bignumber.js'
import { useRound } from '@/commonMethods/useRound'
import { useScientificNotation } from '@/commonMethods/useScientificNotation'
// ------------------定义props、 emit-------------------
const props = defineProps({
  // 数据绑定
  modelValue: {
    type: [Number, String],
    default: '',
  }, // 输入
  // 转换标准  小于这个数才会转化为科学计数法
  standard: {
    type: String,
    default: '0.001',
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 清空按钮
  clearable: {
    type: Boolean,
    default: false,
  },
  // 输入框最大长度
  maxlength: {
    type: [Number, String],
    default: '',
  },
  // 输入框最小长度
  minlength: {
    type: [Number, String],
    default: '',
  },
  // 是否显示统计字数
  showWordLimit: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: '请输入',
  },
  // 计数法保留小数位数    1.2344444e-5 -> 1.234e-5
  notationDigit: {
    type: String,
    default: '2',
  },
  // 数字保留位数  0.1234 -> 0.123
  numberDigit: {
    type: String,
    default: '',
  },
  // 失焦执行的方法(可传可不传)
  blur: {
    type: Function,
    default: () => {},
  },
  // 获取焦点执行的方法(可传可不传)
  focus: {
    type: Function,
    default: () => {},
  },
  // 输入框值变化执行的方法(可传可不传)
  change: {
    type: Function,
    default: () => {},
  },
  // 清空按钮时执行的方法(可传可不传)
  clear: {
    type: Function,
    default: () => {},
  },
  required: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['update:modelValue', 'blur', 'change', 'focus'])
const isFirst = ref(true)
// -------------------------定义数据--------------------
const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})

// 输入框失焦
const handler = () => {
  const inputValue = value.value
  if (Number(inputValue) && String(inputValue)) {
    if (BigNumber(inputValue).comparedTo(props.standard).toString() === '-1') {
      // 转换为科学计数法
      console.log('转换为科学计数法')
      value.value = useScientificNotation(Number(inputValue), Number(props.notationDigit), Number(props.numberDigit))
      console.log(value.value, '转换后')
    }
    else {
      console.log('bu转换为科学计数法')
      // 不转换科学计数法
      if (String(props.numberDigit)) {
        // 判断是否截取小数位数
        value.value = useRound(inputValue, Number(props.numberDigit))
      }
    }
  }
  else {
    if (props.required) {
      value.value = '0'
    }
  }
  emit('blur', value.value)
}
const blur = () => {
  console.log('输入框失焦')
  handler()
}
// 输入框获取焦点
const focus = () => {
  console.log('输入框获取焦点')
  isFirst.value = false
  emit('focus', value.value)
}
// 输入框值变化
const change = () => {
  console.log('输入框值变化')
  emit('change', value.value)
}
// // 清空按钮
// const clear = () => {
//   console.log('清空按钮')
//   props.clear()
// }
// -------------------------钩子--------------------
// 组件挂载的时候转换为科学计数法

watch(() => value.value, (newVal) => {
  if (newVal) {
    if (!isFirst.value) {
      return
    }
    handler()
    isFirst.value = false
  }
})
</script>

<template>
  <el-input
    v-model.trim="value"
    type="number"
    resize="none"
    :disabled="props.disabled"
    :placeholder="props.placeholder"
    :clearable="props.clearable"
    :maxlength="props.maxlength"
    :minlength="props.minlength"
    :show-word-limit="props.showWordLimit"
    style="width: 100%;"
    @blur="blur"
    @change="change"
    @focus="focus"
    @clear="props.clear"
    @mousewheel.prevent
  />
</template>