<script lang="ts" setup name="TableColumn">
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',
])
function handleInputChange(val: any) {
  console.log(val, 'handleInputChange')
}
function handleInputBlur(row: any) {
  console.log(row, 'handleInputBlur')
}
function handleInputNumberChange(val: any) {
  emits('handleInputNumberChange', val)
}
// 点击表头
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)"
          />
          <!-- <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"
              v-model="scope.row[item.value]"
              :precision="item.precision"
              :min="min"
              @change="handleInputNumberChange(scope)"
            />
            <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>