<template>
  <!-- 外层左右布局flex容器 -->
  <div class="annual-plan-wrap">
    <!-- 左侧：数据驱动的原生表格（绑定右侧行合计值） -->
    <div class="left-table">
      <table class="investment-table">
        <tbody>
          <!-- 计划资金来源（全口径）模块 -->
          <tr>
            <td rowspan="18" class="first-col">年度投资计划</td>
            <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">合计</td>
          </tr>
          <tr>
            <td rowspan="3">资本金</td>
            <td>小计</td>
            <td>{{ getRowTotal(1) }}万元</td>
          </tr>
          <tr>
            <td>能建方*</td>
            <td>{{ getRowTotal(2) }}万元</td>
          </tr>
          <tr>
            <td>外部股东*</td>
            <td>{{ getRowTotal(3) }}万元</td>
          </tr>
          <tr>
            <td rowspan="2">债权融资*</td>
            <td>小计*</td>
            <td>{{ getRowTotal(4) }}万元</td>
          </tr>
          <tr>
            <td>其中：非并表项目我方贷款/担保额*</td>
            <td>{{ getRowTotal(5) }}万元</td>
          </tr>
          <tr>
            <td>回款再投入*</td>
            <td></td>
            <td>{{ getRowTotal(6) }}万元</td>
          </tr>
          <tr>
            <td rowspan="2">其他*</td>
            <td>小计*</td>
            <td>{{ getRowTotal(7) }}万元</td>
          </tr>
          <tr>
            <td>其中：我方其他出资*</td>
            <td>{{ getRowTotal(8) }}万元</td>
          </tr>
          <!-- 资金来源（新口径）模块 -->
          <tr>
            <td rowspan="6" class="third-col">资金来源（新口径）</td>
            <td>合计</td>
            <td></td>
            <td>{{ getRowTotal(9) }}万元</td>
          </tr>
          <tr>
            <td rowspan="3">资本金</td>
            <td>小计</td>
            <td>{{ getRowTotal(10) }}万元</td>
          </tr>
          <tr>
            <td>能建方</td>
            <td>{{ getRowTotal(11) }}万元</td>
          </tr>
          <tr>
            <td>外部股东</td>
            <td>{{ getRowTotal(12) }}万元</td>
          </tr>
          <tr>
            <td>债权融资</td>
            <td></td>
            <td>{{ getRowTotal(13) }}万元</td>
          </tr>
          <tr>
            <td>回款再投入</td>
            <td></td>
            <td>{{ getRowTotal(14) }}万元</td>
          </tr>
          <tr>
            <td>其他</td>
            <td></td>
            <td></td>
            <td>{{ getRowTotal(15) }}万元</td>
          </tr>
          <!-- 合计与政府付费模块 -->
          <tr>
            <td>合计</td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{ getRowTotal(16) }}万元</td>
          </tr>
          <tr>
            <td>政府付费*</td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{ getRowTotal(17) }}万元</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 右侧：Element 时间输入表格（绑定父组件传递的数据源+动态时间） -->
    <div class="right-table">
      <el-table
        :data="modelValue"
        style="width: 100%"
        border
        :cell-style="tableCellStyle"
        :row-style="{ height: '48px' }"
        :header-row-style="{ height: '48px' }"
      >
        <el-table-column
          v-for="time in dynamicTimeList"
          :key="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%"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

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

// 🔥 核心：接收父组件参数，v-model双向绑定核心（modelValue对应父组件v-model值）
const props = defineProps({
  // 双向绑定的表格数据源（父组件formData.xmndjh）
  modelValue: {
    type: Array,
    default: () => [],
  },
  // 父组件传递的动态时间列表（替代子组件内部定义）
  dynamicTimeList: {
    type: Array,
    default: () => [],
  },
  // 预览状态（禁用输入）
  isPreview: {
    type: Boolean,
    default: false,
  },
});

// 🔥 核心：触发双向绑定更新+原有事件兼容
const emit = defineEmits([
  "update:modelValue", // v-model必须的更新事件，同步数据给父组件
  "handleAnnualPlanChange", // 保留原有事件，兼容父组件逻辑
]);

// 监听数据源变化（父组件回填时触发），确保合计值正确
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal.length === 0) return;
    // 父组件回填数据后，重新计算所有行合计
    newVal.forEach((row) => {
      if (row) {
        row.total = props.dynamicTimeList.reduce((sum, time) => {
          return sum + (Number(row[time]) || 0);
        }, 0);
      }
    });
    // 同步更新父组件数据
    emit("update:modelValue", newVal);
  },
  { deep: true, immediate: true },
);

// 获取对应行的合计值（父组件数据源，保留2位小数）
const getRowTotal = (index) => {
  const row = props.modelValue[index - 1];
  return row?.total ? row.total.toFixed(2) : "0.00";
};

onMounted(() => {
  console.log(props.dynamicTimeList, " props.dynamicTimeList");
});
// 右侧数据变更：计算行合计 + 双向同步父组件 + 触发原有事件
const handleChange = (row) => {
  // 计算当前行合计（适配父组件动态时间列表）

  row.total = props.dynamicTimeList.reduce((sum, time) => {
    return sum + (Number(row[time]) || 0);
  }, 0);
};

// 合计行样式（和父组件表格样式统一）
const tableCellStyle = ({ row }) =>
  row.isTotal ? { background: "#f5f7fa", fontWeight: "bold" } : {};
</script>

<style scoped lang="scss">
// 核心：左右布局样式
.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;
}
// 左侧原生表格样式（160px列宽 + 48px行高 + 无缝边框）
.investment-table {
  width: fit-content;
  border-collapse: collapse;
  border: 1px solid #ebeef5; // 和父组件表格边框色统一
  border-right: 0; // 取消右侧边框，和右侧EL表格无缝衔接
}

.investment-table td {
  width: 160px; // 和右侧EL表格列宽完全统一
  height: 49px; // 匹配原有行高，避免错位
  border: 1px solid #ebeef5; // 和父组件表格边框色统一
  padding: 0 !important; // 取消内边距，文字居中更整齐
  text-align: center;
  vertical-align: middle;
  word-break: break-all;
  box-sizing: border-box;
}

// 左侧表格层级背景色（保留原有样式）
.first-col {
  font-weight: bold;
  background-color: #f5f7fa; // 和父组件合计行背景统一
}
.second-col {
  background-color: #f5f7fa;
}
.third-col {
  font-weight: 500;
  background-color: #f5f7fa;
}

// 右侧EL表格样式优化（和父组件完全统一：行高/边框/内边距）
:deep(.el-table) {
  --el-table-border-color: #ebeef5; // 边框色和父组件表格一致
  --el-table-row-height: 48px !important; // 行高和左侧强制统一
  border-left: 0; // 取消左侧边框，和左侧无缝衔接
}

// 表头行高也强制48px，避免表头错位
:deep(.el-table__header tr),
:deep(.el-table__body tr) {
  height: 48px !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: 90%; // 微调宽度，避免输入框溢出
}

// 去除多余样式
.flex {
  display: flex;
}
</style>
