<script lang="ts" setup name="TableColumn">
import { caculateDecimalDigits } from '@/views/business/measure/item/useCalculateResolution'
import { useRound } from '@/commonMethods/useRound'
const props = defineProps({
  coloumnHeader: { // 表头
    type: Object,
    required: true,
  },
  min: {
    type: Number,
    default: undefined,
  },
  width: {
    type: String,
  },
  showOverflowTooltip: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits([
  'handleInputChange',
  'handleInputBlur',
  'handleInputNumberChange',
  'handleClickHeader',
  'handleInputTypeNumberChange',
])
function handleInputChange(val: any) {
  console.log(val, 'handleInputChange')
}
function handleInputBlur(row: any) {
  console.log(row, 'handleInputBlur')
}
function handleInputNumberChange(val: any) {
  emits('handleInputNumberChange', val)
}

const precisionRecord = ref(0)
function handleInputTypeNumberBlur(val: any) {
  precisionRecord.value = caculateDecimalDigits(val)
  console.log('记录小数点有几位', val, precisionRecord.value)
}

// 计算步长：小数点最后一位计算， 2位小数：0.01,3位小数0.001
function handleInputTypeNumberChange({ row }: any, val: any, prop: string) {
  // emits('handleInputTypeNumberChange', scope, val)
  const count = caculateDecimalDigits(val)
  if (!count) {
    row.elInputNumberStep = 1
  }
  else {
    setTimeout(() => {
      const step = 1 / 10 ** precisionRecord.value
      console.log('计算步长', step)
      row.elInputNumberStep = step
      row[prop] = useRound(val, precisionRecord.value)
    })
  }
}

// 点击表头
function clickHeader(val: any, checkDateDetailId: string) {
  emits('handleClickHeader', val, checkDateDetailId)
}
</script>

<template>
  <el-table-column :label="coloumnHeader.text" :prop="coloumnHeader.value">
    <template v-for="item in coloumnHeader.children">
      <table-column
        v-if="item.children && item.children.length"
        :key="item.id"
        :coloumn-header="item"
        :width="item.width"
        :align="item.align"
        :show-overflow-tooltip="showOverflowTooltip"
      />
      <el-table-column
        v-else
        :key="item.name"
        :label="item.text"
        :prop="item.value"
        :width="item.width"
        :align="item.align"
        :show-overflow-tooltip="showOverflowTooltip"
      >
        <template #header="scope">
          <!-- 稳定性表头处理 -->
          <el-link v-if="item.customHeader && item.text !== '-' && item.checkDateDetailId" :underline="false" style="color: #3d7eff;font-weight: 600;" @click="clickHeader(scope.column, item.checkDateDetailId)">
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </el-link>
          <div v-else>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </div>
        </template>
        <template #default="scope">
          <el-select
            v-if="item.type === 'select' && scope.row.editable"
            v-model="scope.row[item.value]"
            placeholder="请选择"
          >
            <el-option
              v-for="opt in item.options"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
            />
          </el-select>
          <el-date-picker
            v-else-if="item.type === 'date' && scope.row.editable"
            v-model="scope.row[item.value]"
            type="date"
            style="width: 100%;"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
          <el-input
            v-else-if="item.type === 'input' && scope.row.editable"
            v-model="scope.row[item.value]"
            size="small"
            @change="handleInputChange(scope)"
            @blur="handleInputBlur(scope.row)"
          />
          <scientific-notation
            v-else-if="item.type === 'notation' && scope.row.editable"
            v-model="scope.row[item.value]"
            :placeholder="`${item.text}`"
            style="width: 100%;"
            :number-digit="item.numberDigit || ''"
            :notation-digit="item.notationDigit || '2'"
            @change="handleInputNumberChange(scope)"
          />
          <!-- <el-input-number
            v-else-if="item.type === 'inputNumber' && scope.row.editable "
            v-model="scope.row[item.value]"
            :precision="item.precision"
            :min="min"
            @change="handleInputNumberChange(scope)"
          /> -->
          <div v-else-if="item.type === 'inputNumber'" style="display: flex; justify-content: center; align-items: center;">
            <el-input-number
              v-if="scope.row.editable && item.useElInputNumber === 'true'"
              v-model="scope.row[item.value]"
              :precision="item.precision || scope.row.useRowPrecisionData"
              placeholder="请输入"
              :min="min"
              :disabled="scope.row.setDisabled"
              :step="(`${scope.row.elInputNumberStep}` !== '' && `${scope.row.elInputNumberStep}` !== '0') ? scope.row.elInputNumberStep : undefined"
              @change="handleInputNumberChange(scope)"
            />
            <precision-input-number
              v-if="scope.row.editable && (item.useElInputNumber !== 'true' || !item.useElInputNumber) && !item.useELInput"
              v-model="scope.row[item.value]"
              :precision="item.precision || scope.row.useRowPrecisionData || scope.row.validDigit"
              placeholder="请输入"
              :min="min"
              :disabled="scope.row.setDisabled"
              :step="(`${scope.row.elInputNumberStep}` !== '' && `${scope.row.elInputNumberStep}` !== '0') ? scope.row.elInputNumberStep : undefined"
              @change="handleInputNumberChange(scope)"
            />
            <el-input
              v-if="scope.row.editable && (item.useElInputNumber !== 'true' || !item.useElInputNumber) && item.useELInput"
              v-model="scope.row[item.value]"
              type="number"
              :precision="item.precision || scope.row.useRowPrecisionData || scope.row.validDigit"
              placeholder="请输入"
              :min="min"
              :disabled="scope.row.setDisabled"
              resize="none"
              :step="(`${scope.row.elInputNumberStep}` !== '' && `${scope.row.elInputNumberStep}` !== '0') ? scope.row.elInputNumberStep : undefined"
              @change="(val: any) => handleInputTypeNumberChange(scope, val, item.value)"
              @blur="handleInputTypeNumberBlur(scope.row[item.value])"
              @mousewheel.prevent
            />
            <span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
            <span v-if="item.showUnit" style="white-space: nowrap;">{{ scope.row.showUnitData }}</span>
          </div>
          <template v-else-if="item.type === 'text'">
            <span>{{ scope.row[item.value] }}</span>
          </template>
          <template v-else>
            <span v-show="!scope.row.editable">{{
              scope.row[item.value]
            }}</span>
          </template>
        </template>
      </el-table-column>
    </template>
  </el-table-column>
</template>