<template>
  <div class="table-container">
    <table class="cost-table">
      <thead>
        <!-- 一级表头 -->
        <tr class="header-row level1">
          <th rowspan="2" style="width: 70px">序号</th>
          <th rowspan="2" style="width: 110px">主体类型</th>
          <th colspan="4">1级指标</th>
          <th colspan="4">2级指标</th>
        </tr>
        <!-- 二级表头 -->
        <tr class="header-row level2">
          <th style="width: 70px">编号</th>
          <th>指标名称</th>
          <th>指标考核内容</th>
          <th>建议值</th>
          <th style="width: 70px">编号</th>
          <th>指标名称</th>
          <th>指标考核内容</th>
          <th>建议值</th>
        </tr>
      </thead>
      <tbody>
        <!-- 按主体分组渲染 -->
        <template
          v-for="(group, groupIndex) in groupedTableData"
          :key="groupIndex"
        >
          <tr
            v-for="(item, rowIndex) in group.rows"
            :key="`${groupIndex}-${rowIndex}`"
            class="body-row"
          >
            <!-- 序号：仅每组第一行显示 -->
            <td
              v-if="rowIndex === 0"
              :rowspan="group.rows.length"
              class="cell-item"
            >
              {{ group.serialNumber.placeholder }}
            </td>
            <!-- 主体类型：仅每组第一行显示 -->
            <td
              v-if="rowIndex === 0"
              :rowspan="group.rows.length"
              class="cell-item entity-cell"
            >
              {{ group.entityType.placeholder }}
            </td>
            <!-- 1级指标编号 -->
            <td class="cell-item">
              {{ item.level1Code.placeholder }}
            </td>
            <!-- 1级指标名称 -->
            <td class="cell-item">
              {{ item.level1Name.placeholder }}
            </td>
            <!-- 1级指标考核内容（textarea） -->
            <td class="cell-item">
              <el-input
                type="textarea"
                rows="3"
                v-model="item.level1Content.value"
                :placeholder="item.level1Content.placeholder"
                size="small"
                class="table-input textarea-input"
                :disabled="isPreview"
              />
            </td>
            <!-- 1级指标建议值 -->
            <td class="cell-item">
              <el-input
                type="textarea"
                rows="3"
                v-model="item.level1Target.value"
                :placeholder="item.level1Target.placeholder"
                size="small"
                class="table-input"
                :disabled="isPreview"
              />
            </td>
            <!-- 2级指标编号 -->
            <td class="cell-item">
              {{ item.level2Code.placeholder }}
            </td>
            <!-- 2级指标名称 -->
            <td class="cell-item">
              {{ item.level2Name.placeholder }}
            </td>
            <!-- 2级指标考核内容（textarea） -->
            <td class="cell-item">
              <el-input
                type="textarea"
                rows="3"
                v-model="item.level2Content.value"
                :placeholder="item.level2Content.placeholder"
                size="small"
                class="table-input textarea-input"
                :disabled="isPreview"
              />
            </td>
            <!-- 2级指标建议值 -->
            <td class="cell-item">
              <el-input
                type="textarea"
                rows="3"
                v-model="item.level2Target.value"
                :placeholder="item.level2Target.placeholder"
                size="small"
                class="table-input"
                :disabled="isPreview"
              />
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, watch, computed, defineProps, defineExpose } from "vue";
import { ElInput } from "element-plus";

// ===================== 1. 接收父组件传入的初始化数据 =====================
const props = defineProps({
  // 新增：预览模式控制属性
  isPreview: {
    type: Boolean,
    required: false,
    default: false,
  },
  // 父组件传入的初始化表格数据，默认值为原有结构
  initTableData: {
    type: Array,
    required: false,
    default: () => [
      {
        serialNumber: { value: "", placeholder: "1" },
        entityType: { value: "", placeholder: "交投本部" },
        rows: [
          {
            level1Code: { value: "", placeholder: " (1) " },
            level1Name: { value: "", placeholder: "ROA，辅以总资产周转率" },
            level1Content: {
              value: "",
              placeholder:
                "ROA=净利率×总资产周转率；重资产企业要不断提高净利水平，要不加快资产变现。",
            },
            level1Target: { value: "", placeholder: "中期ROA提升2%" },
            level2Code: { value: "", placeholder: "①" },
            level2Name: { value: "", placeholder: "3类费用压降比例" },
            level2Content: {
              value: "",
              placeholder: "考核非生产性支出控制成果",
            },
            level2Target: { value: "", placeholder: "近期降1%" },
          },
          {
            level1Code: { value: "", placeholder: "(2)" },
            level1Name: { value: "", placeholder: "成本营收比" },
            level1Content: {
              value: "",
              placeholder: "衡量企业成本控制效率和资产盈利能力（重资产企业）。",
            },
            level1Target: { value: "", placeholder: "≥能建考核值的90%" },
            level2Code: { value: "", placeholder: "②" },
            level2Name: { value: "", placeholder: "每亿元“投资+营收”管理费" },
            level2Content: { value: "", placeholder: "成本费用支出效率" },
            level2Target: { value: "", placeholder: "近期升5%" },
          },
          {
            level1Code: { value: "", placeholder: "(3)" },
            level1Name: { value: "", placeholder: "投资控制偏差率*" },
            level1Content: {
              value: "",
              placeholder: "考核建设项目投资控制能力。",
            },
            level1Target: { value: "", placeholder: "≤0" },
            level2Code: { value: "", placeholder: "③" },
            level2Name: { value: "", placeholder: "概预差*" },
            level2Content: {
              value: "",
              placeholder: "设计阶段限额设计和设计优化的工作成果",
            },
            level2Target: { value: "", placeholder: "≥3%" },
          },
        ],
      },
      {
        serialNumber: { value: "", placeholder: "2" },
        entityType: { value: "", placeholder: "建设项目" },
        rows: [
          {
            level1Code: { value: "", placeholder: "(4)" },
            level1Name: { value: "", placeholder: "投资价差收取达成率" },
            level1Content: {
              value: "",
              placeholder:
                "考核投资项目设计优化、合同策划、承包穿透管理和投资价差催收4方面综合能力。",
            },
            level1Target: { value: "", placeholder: "≥100%" },
            level2Code: { value: "", placeholder: "④" },
            level2Name: { value: "", placeholder: "施工合同降造比例*" },
            level2Content: {
              value: "",
              placeholder:
                "协同施工单位承包合同价（单价水平）较批复预算（除激励基金和风险费外）下降比例。",
            },
            level2Target: { value: "", placeholder: "能建要求≥15%" },
          },
          {
            level1Code: { value: "", placeholder: "(5)" },
            level1Name: { value: "", placeholder: "综合融资成本率**" },
            level1Content: {
              value: "",
              placeholder: "建设期融资成本控制水平。",
            },
            level1Target: { value: "", placeholder: "≤银行业自律利率" },
            level2Code: { value: "", placeholder: "⑤" },
            level2Name: { value: "", placeholder: "投资价差同步收取比例" },
            level2Content: {
              value: "",
              placeholder: "投资价差收取同步性情况。",
            },
            level2Target: { value: "", placeholder: "≥100%" },
          },
          {
            level1Code: { value: "", placeholder: "/" },
            level1Name: { value: "", placeholder: "" },
            level1Content: { value: "", placeholder: "" },
            level1Target: { value: "", placeholder: "" },
            level2Code: { value: "", placeholder: "⑥" },
            level2Name: { value: "", placeholder: "变更索赔费用占预备费比例" },
            level2Content: {
              value: "",
              placeholder: "衡量履约阶段投资控制质量。",
            },
            level2Target: { value: "", placeholder: "<70%" },
          },
        ],
      },
      {
        serialNumber: { value: "", placeholder: "3" },
        entityType: { value: "", placeholder: "运营项目" },
        rows: [
          {
            level1Code: { value: "", placeholder: "(6)" },
            level1Name: { value: "", placeholder: "百元营收“管理费+运行费”" },
            level1Content: { value: "", placeholder: "管理、运行成本控制水平" },
            level1Target: { value: "", placeholder: "同行业均值之下" },
            level2Code: { value: "", placeholder: "⑦" },
            level2Name: { value: "", placeholder: "集约化、智能化措施完成率" },
            level2Content: {
              value: "",
              placeholder: "考核公司“三定方案”等降本措施落实情况",
            },
            level2Target: { value: "", placeholder: "100%" },
          },
        ],
      },
    ],
  },
});

// ===================== 2. 初始化可编辑数据（深拷贝，避免修改父组件传入的原始数据） =====================
const rawTableData = ref(JSON.parse(JSON.stringify(props.initTableData)));

// 计算属性：保持分组渲染逻辑
const groupedTableData = computed(() => rawTableData.value);

// ===================== 3. 暴露方法给父组件：获取编辑后的数据 =====================
const getEditedTableData = () => {
  console.log(rawTableData.value, "rawTableData.value");

  return rawTableData.value;
};

// 暴露方法给父组件调用
defineExpose({
  getEditedTableData,
  // 可选：暴露原始编辑数据（含placeholder），按需使用
  getRawTableData: () => JSON.parse(JSON.stringify(rawTableData.value)),
});
</script>

<style scoped>
/* 容器样式 */
.table-container {
  width: 98%;
  margin: 20px auto;
  padding: 10px;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  overflow-x: auto; /* 小屏幕横向滚动 */
}

/* 表格核心样式 */
.cost-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  font-size: 14px;
  color: #333;
  min-width: 1200px;
}

/* 一级表头 */
.header-row.level1 th {
  background-color: #2c5aa0;
  color: #fff;
  padding: 12px 8px;
  border: 1px solid #2c5aa0;
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  font-size: 15px;
}

/* 二级表头 */
.header-row.level2 th {
  background-color: #4073b8;
  color: #fff;
  padding: 10px 8px;
  border: 1px solid #2c5aa0;
  text-align: center;
  vertical-align: middle;
  font-weight: 500;
  font-size: 14px;
}

/* 表体单元格 */
.cell-item {
  padding: 8px 4px;
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: middle;
  height: 80px; /* 适配textarea高度 */
}

/* 主体类型单元格特殊样式 */
.entity-cell {
  font-weight: 500;
}

/* el-input通用样式 */
.table-input {
  width: 95%;
  --el-input-placeholder-color: #666; /* 占位符文字颜色 */
}

/* 多行文本域适配 */
.textarea-input {
  resize: none;
  height: 70px !important;
  line-height: 1.5;
}

/* 新增：优化禁用状态的输入框样式 */
:deep(.el-input.is-disabled) {
  --el-input-text-color: #333; /* 禁用时文字仍显示黑色 */
  --el-input-bg-color: #f8f9fa; /* 禁用背景色更柔和 */
  cursor: default;
}
:deep(.el-input__inner:disabled) {
  background-color: #f8f9fa;
  color: #333;
  border-color: #e9ecef;
}
</style>
