<template>
  <!-- 外层左右布局flex容器 -->
  <div class="annual-plan-wrap">
    <!-- 左侧：数据驱动的原生表格（绑定右侧行合计值） -->
    <div class="left-table">
      <table class="investment-table">
        <!-- 表头行 -->
        <thead>
          <tr>
            <td class="first-col" colspan="5">指标名称</td>
            <td>合计</td>
          </tr>
        </thead>
        <tbody>
          <!-- 计划资金来源（全口径）模块 -->
          <tr>
            <!-- 调整rowspan：从18改为26（原15行 + 新增11行） -->
            <td rowspan="24" class="first-col">年度投资计划</td>
            <!-- 调整rowspan：从16改为26 -->
            <td rowspan="16" class="second-col">计划投资完成及资金来源</td>
            <td rowspan="9" class="third-col">计划资金来源（全口径）</td>
            <td style="height: 48px">合计</td>
            <td style="height: 48px"></td>
            <td style="height: 48px">{{ getRowTotal(1) }}万元</td>
          </tr>
          <tr>
            <td rowspan="3">资本金</td>
            <td>小计</td>
            <td>{{ getRowTotal(2) }}万元</td>
          </tr>
          <tr>
            <td>能建方*</td>
            <td>{{ getRowTotal(3) }}万元</td>
          </tr>
          <tr>
            <td>外部股东*</td>
            <td>{{ getRowTotal(4) }}万元</td>
          </tr>
          <tr>
            <td rowspan="2">债权融资*</td>
            <td>小计*</td>
            <td>{{ getRowTotal(5) }}万元</td>
          </tr>
          <tr>
            <td>其中：非并表项目我方贷款/担保额*</td>
            <td>{{ getRowTotal(6) }}万元</td>
          </tr>
          <tr>
            <td>回款再投入*</td>
            <td></td>
            <td>{{ getRowTotal(7) }}万元</td>
          </tr>
          <tr>
            <td rowspan="2">其他*</td>
            <td>小计*</td>
            <td>{{ getRowTotal(8) }}万元</td>
          </tr>
          <tr>
            <td>其中：我方其他出资*</td>
            <td>{{ getRowTotal(9) }}万元</td>
          </tr>
          <!-- 资金来源（新口径）模块 -->
          <tr>
            <td rowspan="7" class="third-col">资金来源（新口径）</td>
            <td>合计</td>
            <td></td>
            <td>{{ getRowTotal(10) }}万元</td>
          </tr>
          <tr>
            <td rowspan="3">资本金</td>
            <td>小计</td>
            <td>{{ getRowTotal(11) }}万元</td>
          </tr>
          <tr>
            <td>能建方</td>
            <td>{{ getRowTotal(12) }}万元</td>
          </tr>
          <tr>
            <td>外部股东</td>
            <td>{{ getRowTotal(12 + 1) }}万元</td>
          </tr>
          <tr>
            <td>债权融资</td>
            <td></td>
            <td>{{ getRowTotal(13 + 1) }}万元</td>
          </tr>
          <tr>
            <td>回款再投入</td>
            <td></td>
            <td>{{ getRowTotal(14 + 1) }}万元</td>
          </tr>
          <tr>
            <td>其他</td>
            <td></td>
            <td>{{ getRowTotal(15 + 1) }}万元</td>
          </tr>

          <!-- 新增：计划投资回款及相关模块 -->
          <tr>
            <td rowspan="5" class="fourth-col">计划投资回款</td>
            <td colspan="3">合计</td>
            <td>{{ getRowTotal(16 + 1) }}万元</td>
          </tr>
          <tr>
            <td colspan="3">政府付费*</td>
            <td>{{ getRowTotal(17 + 1) }}万元</td>
          </tr>
          <tr>
            <td colspan="3">使用者付费（销售回款）*</td>
            <td>{{ getRowTotal(18 + 1) }}万元</td>
          </tr>
          <tr>
            <td colspan="3">政府补助*</td>
            <td>{{ getRowTotal(19 + 1) }}万元</td>
          </tr>
          <tr>
            <td colspan="3">其他*</td>
            <td>{{ getRowTotal(20 + 1) }}万元</td>
          </tr>
          <tr>
            <td class="fourth-col">计划投资价差*</td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{ getRowTotal(21 + 1) }}万元</td>
          </tr>
          <tr>
            <td class="fourth-col">计划带动工程合同额*</td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{ getRowTotal(22 + 1) }}万元</td>
          </tr>
          <tr>
            <td class="fourth-col">计划带动工程收益*</td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{ getRowTotal(23 + 1) }}万元</td>
          </tr>
          <tr>
            <td class="first-col">年度投资预算</td>
            <td class="second-col">本年度投资预算</td>
            <td>资本金</td>
            <td colspan="2">我方（仅指本单位）</td>
            <td>{{ getRowTotal(24 + 1) }}万元</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 右侧：Element 时间输入表格（绑定**内部响应式数据**，不再直接绑props） -->
    <div class="right-table">
      <el-table :data="tableData" :row-class-name="tableRowClassName" border>
        <el-table-column
          v-for="time in validDynamicTimeList"
          :key="`time-col-${time}`"
          :label="time"
          width="160"
          align="center"
        >
          <template #default="{ row }">
            <el-input-number
              v-model="row[time]"
              :min="0"
              :precision="2"
              controls-position="right"
              @change="() => handleChange(row)"
              :disabled="isPreview"
              style="width: 100%"
              :value="isNaN(Number(row[time])) ? 0 : Number(row[time])"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

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

// 1. 定义props和emit（保持不变）
const props = defineProps({
  modelValue: { type: Array, default: () => [] },
  dynamicTimeList: { type: Array, default: () => [] }, // 父组件必须传
  isPreview: { type: Boolean, default: false },
});
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 0 ? "even-row" : "odd-row";
};
const emit = defineEmits([
  "update:modelValue", // v-model双向绑定
  "handleAnnualPlanChange", // 原有业务事件
]);

// 2. 核心：组件内部响应式数据，隔离props循环
const tableData = ref([]);

// 3. 处理时间列表 - 去重+非空+去除隐形空白字符+**兜底默认值**（关键修复）
const validDynamicTimeList = computed(() => {
  if (
    !Array.isArray(props.dynamicTimeList) ||
    props.dynamicTimeList.length === 0
  ) {
    return ["2025及以前", "2026", "2026-小记"]; // 兜底，保证列能渲染
  }
  return [...new Set(props.dynamicTimeList)]
    .map((time) => {
      return typeof time === "string" ? time.trim() : "";
    })
    .filter((time) => !!time);
});

// 工具方法：初始化行的时间字段，无值则补0【仅赋值年份字段，不碰其他字段】
const initRowTimeField = (row) => {
  if (!row || typeof row !== "object") return;
  validDynamicTimeList.value.forEach((time) => {
    // 仅对年份字段做处理，其他字段完全不碰
    if (
      row[time] === undefined ||
      row[time] === null ||
      isNaN(Number(row[time]))
    ) {
      row[time] = 0;
    } else {
      // 确保是数字类型，不修改原有值
      row[time] = Number(row[time]);
    }
  });
};

// 工具方法：计算行合计【仅读取年份字段，不碰其他字段】
const calcRowTotal = (row) => {
  if (!row || typeof row !== "object") return 0;
  const total = validDynamicTimeList.value.reduce((sum, time) => {
    return sum + (Number(row[time]) || 0);
  }, 0);
  return total;
};

// 工具方法：深拷贝+数据处理【强制保留所有原有字段，仅新增/更新total、处理年份】
const handleTableData = (sourceData) => {
  if (!Array.isArray(sourceData) || sourceData.length === 0) return [];
  // 深拷贝：保留原始数据的所有字段（id、名称等）
  const newData = JSON.parse(JSON.stringify(sourceData));
  newData.forEach((row) => {
    initRowTimeField(row); // 仅处理年份字段
    row.total = calcRowTotal(row); // 新增/更新total字段，不删除其他字段
  });
  return newData;
};

// 监听props.modelValue变化，仅同步到内部tableData，不emit【修复：nextTick确保时间列表先处理】
watch(
  () => props.modelValue,
  async (newVal) => {
    if (newVal.length > 0) {
      console.log(Object.keys(newVal[0]), "值：", newVal[0]);
    }
    // 关键修复：等待validDynamicTimeList计算完成后再处理数据
    await nextTick();
    const newData = handleTableData(newVal);
    tableData.value = newData; // 只更新内部数据，不emit
  },
  { deep: true, immediate: true },
);

// 监听时间列表变化，更新内部数据后统一emit【保留所有字段emit】
watch(
  () => validDynamicTimeList.value,
  () => {
    if (tableData.value.length === 0) return;
    const newData = handleTableData(tableData.value);
    tableData.value = newData;
    emitDataChange(newData);
  },
  { deep: true, immediate: true },
);

// 工具方法：数据变化校验+深拷贝emit【完整保留所有字段emit给父组件】
const emitDataChange = (newData) => {
  if (props.isPreview) return;
  const emitData = JSON.parse(JSON.stringify(newData)); // 深拷贝保留所有字段
  emit("update:modelValue", emitData);
  emit("handleAnnualPlanChange", emitData);
};

// 7. 获取对应行的合计值 - 从内部tableData取值
const getRowTotal = (index) => {
  const row = tableData.value[index - 1];
  if (!row || isNaN(Number(row.total))) return "0.00";
  return Number(row.total).toFixed(2);
};

// 8. 输入变化处理 - 更新内部数据后emit【仅更新年份/total，保留其他字段】
const handleChange = (row) => {
  if (props.isPreview || !row || typeof row !== "object") return;
  row.total = calcRowTotal(row); // 仅更新total
  emitDataChange(tableData.value); // 完整emit所有字段
};

// 9. 计算整列合计 - 所有行的合计列相加
const getAllRowsTotal = () => {
  if (!tableData.value || tableData.value.length === 0) return "0.00";
  const total = tableData.value.reduce((sum, row) => {
    return sum + (Number(row.total) || 0);
  }, 0);
  return total.toFixed(2);
};

// 表格单元格样式
const tableCellStyle = ({ row, columnIndex }) => {
  const baseStyle = {
    border: "1px solid #ebeef5",
  };

  if (row.isTotal) {
    return { ...baseStyle, background: "#f5f7fa", fontWeight: "bold" };
  }
  // 左边三列（序号、指标项、合计）使用 #f7faff 背景色
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
    return { ...baseStyle, background: "#f7faff" };
  }
  return baseStyle;
};
</script>

<style scoped lang="scss">
::v-deep .odd-row {
  background-color: #f5f5f5 !important;
}
// 偶数行 2、4、6、8…
::v-deep .even-row {
  background-color: #edf0f5 !important;
}
.annual-plan-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow-x: auto;
}
.left-table {
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #f7faff;
}
.right-table {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.investment-table {
  width: fit-content;
  border-collapse: collapse;
  border: 1px solid #ebeef5;
  border-right: 0;
  background: #f7faff;
}
.investment-table td {
  width: 110px;
  height: 48px;
  border: 1px solid #ebeef5;
  padding: 0 4px !important;
  text-align: center;
  vertical-align: middle;
  word-break: break-all;
  box-sizing: border-box;
}
.investment-table thead td {
  height: 48px;
  font-weight: bold;
  // background: #f7faff;
}

// 样式优化：移除不必要的隐藏，确保元素可见
:deep(.el-table) {
  --el-table-border-color: #ebeef5;
  --el-table-row-height: 49px !important;
  // 移除border-left:0，避免表格左边无框看似没渲染
  border-left: 1px solid #ebeef5 !important;
}
:deep(.el-table__header tr),
:deep(.el-table__body tr) {
  height: 49px !important;
}
:deep(.el-table-cell) {
  padding: 0 !important;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
}
// 确保输入框完全显示
:deep(.el-input-number) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.el-input-number__input) {
  text-align: right;
  padding-right: 25px;
  width: 100% !important; // 改为100%，确保填满单元格
}
.flex {
  display: flex;
}

// ========== 小屏适配：左侧列收窄，给右侧更多填写空间 ==========
@media screen and (max-width: 1600px) {
  .investment-table td {
    width: 110px;
    font-size: 12px;
  }
  .investment-table td.first-col {
    width: 70px;
  }
  .investment-table td.second-col {
    width: 80px;
  }
}
@media screen and (max-width: 1280px) {
  .investment-table td {
    width: 80px;
    font-size: 11px;
  }
  .investment-table td.first-col {
    width: 50px;
  }
  .investment-table td.second-col {
    width: 60px;
  }
  .investment-table td.third-col {
    width: 70px;
  }
}
</style>
