<template>
  <div class="mixed-table-wrap">
    <!-- 调试用：可删除 -->
    <!-- {{ tableDataRef }}tableData -->
    <el-table
      :data="tableDataRef"
      style="width: 100%"
      border
      :cell-style="tableCellStyle"
      row-key="serialNumber"
      v-if="validConfig"
    >
      <!-- 序号列：保留原逻辑 -->
      <el-table-column
        prop="serialNumber"
        label="序号"
        width="80"
        fixed="left"
        align="center"
      />
      <!-- 指标项列（层级缩进）：保留原逻辑 -->
      <el-table-column
        prop="indicatorName"
        label="名称"
        fixed="left"
        align="left"
        min-width="260"
      >
        <template #default="{ row }">
          <div
            :style="{
              textIndent: row.level ? `${row.level * 20}px` : '0px',
              textAlign: 'left',
            }"
          >
            {{ row.indicatorName }}
          </div>
        </template>
      </el-table-column>
      <!-- 合计列：文本行隐藏合计值，不显示0.00 → 从内部数据取值 -->

      <el-table-column fixed="left" label="合计" width="140" align="right">
        <template #default="{ row }">
          <span v-if="!row.noTotal">
            {{ row.total ? Number(row.total).toFixed(2) : "0.00" }}万元
          </span>
          <span v-else>&nbsp;</span>
        </template>
      </el-table-column>

      <!-- 🌟 新增：多级时间列表头渲染逻辑 -->
      <!-- 有时间列分组 → 渲染多级表头 -->
      <template v-if="hasTimeHeaderGroup">
        <el-table-column
          v-for="group in timeColumnGroups"
          :key="`time-group-${group.key}`"
          :label="group.label"
          align="right"
        >
          <!-- 二级表头：时间列 -->
          <el-table-column
            v-for="timeItem in group.children"
            :key="`time-col-${timeItem.prop}`"
            :label="timeItem.label"
            min-width="140"
            align="center"
          >
            <template #default="{ row }">
              <el-input
                v-if="row.isTextRow"
                v-model="row[timeItem.prop]"
                type="textarea"
                :rows="2"
                :disabled="isPreview"
                placeholder="请输入说明"
                style="width: 100%"
                @input="() => handleTextInput(row)"
              />
              <!-- 2. 数字行：金额输入框 -->
              <el-input-number
                v-else
                v-model="row[timeItem.prop]"
                :min="0"
                :precision="2"
                controls-position="right"
                :disabled="isPreview"
                placeholder="请输入金额"
                style="width: 100%"
                @change="() => handleFinancialChange(row)"
              />
            </template>
          </el-table-column>
        </el-table-column>
      </template>

      <!-- 无时间列分组 → 保持原有单级表头逻辑 -->
      <el-table-column
        v-else
        v-for="time in validDynamicTimeList"
        :key="`time-col-${time.prop || time}`"
        :label="time.label || time"
        min-width="140"
        align="center"
      >
        <template #default="{ row }">
          <!-- 1. 文本行：多行文本输入框 -->
          <el-input
            v-if="row.isTextRow"
            v-model="row[time.prop || time]"
            type="textarea"
            :rows="2"
            :disabled="isPreview"
            placeholder="请输入说明"
            style="width: 100%"
            @input="() => handleTextInput(row)"
          />
          <!-- 2. 数字行：金额输入框 -->
          <el-input-number
            v-else
            v-model="row[time.prop || time]"
            :min="0"
            :precision="2"
            controls-position="right"
            :disabled="isPreview"
            placeholder="请输入金额"
            style="width: 100%"
            @change="() => handleFinancialChange(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 配置不合法提示：保留原逻辑 -->
    <div v-else style="text-align: center; padding: 20px; color: #909399">
      请传入合法的表格配置（包含indicatorList、dynamicTimeList）
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, defineProps, defineEmits } from "vue";

// 1. 重构Props/Emit：兼容多级表头配置
const props = defineProps({
  // 核心配置对象：包含indicatorList/dynamicTimeList/tableData
  modelValue: {
    type: Object,
    default: () => ({ indicatorList: [], dynamicTimeList: [], tableData: [] }),
    validator: (val) =>
      val &&
      Array.isArray(val.indicatorList) &&
      Array.isArray(val.dynamicTimeList),
  },
  // 预览模式：保留原配置
  isPreview: {
    type: Boolean,
    default: false,
  },
});

// 定义发射事件：双向绑定+业务事件
const emit = defineEmits([
  "update:modelValue", // v-model双向绑定更新
  "handleTableChange", // 自定义业务变化事件
]);

// 2. 核心：创建组件内部响应式数据
const tableDataRef = ref([]);

// 3. 🌟 新增：处理动态时间列表（兼容单级/多级配置）
// 支持两种格式：
// - 单级：["一月", "二月"]
// - 多级：[{ label: "一月", prop: "一月", headerGroup: "一季度" }, ...]
const validDynamicTimeConfig = computed(() => {
  const rawTimeList = props.modelValue.dynamicTimeList || [];
  if (!Array.isArray(rawTimeList) || rawTimeList.length === 0) {
    // 兜底默认值
    return [
      { label: "2025", prop: "2025", headerGroup: "" },
      { label: "2026", prop: "2026", headerGroup: "" },
      { label: "2027", prop: "2027", headerGroup: "" },
    ];
  }

  // 标准化配置：统一转为对象格式（兼容字符串数组）
  return rawTimeList
    .map((item) => {
      if (typeof item === "string") {
        return {
          label: item.trim(),
          prop: item.trim(),
          headerGroup: "", // 无分组
        };
      }
      return {
        label: item.label?.trim() || "",
        prop: item.prop?.trim() || item.label?.trim() || "",
        headerGroup: item.headerGroup?.trim() || "",
      };
    })
    .filter((item) => !!item.prop); // 过滤空值
});

// 🌟 新增：判断是否有时间列分组（多级表头开关）
const hasTimeHeaderGroup = computed(() => {
  return validDynamicTimeConfig.value.some((item) => !!item.headerGroup);
});

// 🌟 新增：时间列分组计算（按headerGroup自动分组，保持原始顺序）
const timeColumnGroups = computed(() => {
  const timeConfig = validDynamicTimeConfig.value;
  if (!timeConfig.length) return [];

  // 构建分组映射
  const groupMap = {};
  timeConfig.forEach((item) => {
    // 无headerGroup用唯一标识，避免分组混乱
    const groupKey = item.headerGroup || `single_${item.prop}`;
    if (!groupMap[groupKey]) {
      groupMap[groupKey] = {
        label: item.headerGroup || item.label,
        key: groupKey,
        children: [],
      };
    }
    groupMap[groupKey].children.push(item);
  });

  // 保持原始顺序，避免分组后列乱序
  const result = [];
  const addedKeys = new Set();
  timeConfig.forEach((item) => {
    const groupKey = item.headerGroup || `single_${item.prop}`;
    if (!addedKeys.has(groupKey)) {
      result.push(groupMap[groupKey]);
      addedKeys.add(groupKey);
    }
  });

  return result;
});

// 兼容原有逻辑：提取纯时间prop列表（用于数据初始化/计算合计）
const validDynamicTimeList = computed(() => {
  // 兼容多级/单级配置，只提取prop
  return validDynamicTimeConfig.value.map((item) => item.prop);
});

// 4. 配置合法性校验：基于标准化后的时间配置
const validConfig = computed(() => {
  const { indicatorList } = props.modelValue;
  return (
    Array.isArray(indicatorList) &&
    indicatorList.length > 0 &&
    validDynamicTimeList.value.length > 0
  );
});

// 5. 工具方法：初始化行的时间字段（适配新的时间配置）
const initRowTimeField = (row) => {
  if (!row || typeof row !== "object") return;
  validDynamicTimeList.value.forEach((timeProp) => {
    if (row.isTextRow) {
      // 文本行：无值则置空字符串
      row[timeProp] =
        row[timeProp] === undefined || row[timeProp] === null
          ? ""
          : String(row[timeProp]);
    } else {
      // 数字行：无值/非数字则置0
      row[timeProp] =
        row[timeProp] === undefined ||
        row[timeProp] === null ||
        isNaN(Number(row[timeProp]))
          ? 0
          : Number(row[timeProp]);
    }
  });
};

// 6. 工具方法：计算单行合计（逻辑不变，适配prop列表）
const calculateRowTotal = (row) => {
  if (!row || typeof row !== "object" || row.noTotal || row.isTextRow) return 0;
  const total = validDynamicTimeList.value.reduce((sum, timeProp) => {
    return sum + (Number(row[timeProp]) || 0);
  }, 0);
  return Number(total.toFixed(2)); // 解决浮点精度问题
};

// 7. 核心工具方法：深拷贝+数据处理（逻辑不变）
const handleTableData = (sourceIndicatorList, sourceTableData) => {
  if (!validConfig.value) return [];
  const newData = [];
  sourceIndicatorList.forEach((item, index) => {
    const { name, isTextRow = false, noTotal = false } = item;
    const level = item?.level || 0;
    const serialNumber = item?.serialNumber || index + 1;
    // 深拷贝源数据行
    const originRow =
      sourceTableData.find((row) => row.indicatorName === name) || {};
    const rowData = JSON.parse(
      JSON.stringify({
        serialNumber,
        level,
        indicatorName: name,
        isTextRow,
        noTotal,
        total: 0,
        ...originRow,
      }),
    );
    // 初始化时间字段
    initRowTimeField(rowData);
    // 计算合计
    rowData.total = calculateRowTotal(rowData);
    newData.push(rowData);
  });
  return newData;
};

// 8. 工具方法：数据变化后统一发射（逻辑不变）
const emitDataChange = (newInnerData) => {
  if (props.isPreview) return;
  const emitData = JSON.parse(JSON.stringify(newInnerData));
  const newModelValue = {
    ...props.modelValue,
    tableData: emitData,
  };
  emit("update:modelValue", newModelValue);
  emit("handleTableChange", newModelValue);
};

// 9. 监听Props变化：同步到内部数据（逻辑不变）
watch(
  () => props.modelValue,
  async (newVal) => {
    if (!validConfig.value) return;
    await nextTick();
    const newTableData = handleTableData(
      newVal.indicatorList,
      newVal.tableData,
    );
    tableDataRef.value = newTableData;
  },
  { deep: true, immediate: true },
);

// 10. 数字行输入回调（逻辑不变）
const handleFinancialChange = (currentRow) => {
  if (props.isPreview || !currentRow || currentRow.noTotal) return;
  currentRow.total = calculateRowTotal(currentRow);
  emitDataChange(tableDataRef.value);
};

// 11. 文本行输入回调（逻辑不变）
const handleTextInput = (currentRow) => {
  if (props.isPreview || !currentRow) return;
  emitDataChange(tableDataRef.value);
};

// 12. 表格单元格样式（保留原逻辑）
const tableCellStyle = ({ row }) => {
  if (row?.isTotal) {
    return { background: "#f5f7fa", fontWeight: "bold", textAlign: "right" };
  }
  return { textAlign: "right" };
};
</script>

<style scoped lang="scss">
// 外层容器：适配滚动
.mixed-table-wrap {
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

// 数字输入框样式
:deep(.el-input-number) {
  width: 100%;
}
:deep(.el-input-number__input) {
  text-align: right;
  padding-right: 25px;
  width: 100% !important;
}

// 文本输入框样式
:deep(.el-input__textarea) {
  resize: none;
  text-align: left !important;
  min-height: 40px !important;
}

// 表格列头样式
:deep(.el-table__header-cell) {
  text-align: right !important;
  &.el-table__header-cell--align-center {
    text-align: center !important;
  }
}

// 表格单元格
:deep(.el-table__cell) {
  padding: 4px 8px !important;
  height: 48px !important;
  vertical-align: middle !important;
}

// 表格行高
:deep(.el-table__row) {
  height: 48px !important;
}
</style>
