<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="5">1级指标</th>
          <th colspan="5">2级指标</th>
        </tr>
        <!-- 二级表头 -->
        <tr class="header-row level2">
          <th style="width: 70px">编号</th>
          <th>指标名称</th>
          <th>指标考核内容</th>
          <th>建议值</th>
          <th style="width: 120px">考核结果</th>
          <th style="width: 70px">编号</th>
          <th>指标名称</th>
          <th>指标考核内容</th>
          <th>建议值</th>
          <th style="width: 120px">考核结果</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">
              {{ item.level1Content.placeholder }}
            </td>
            <!-- 1级指标建议值 -->
            <td class="cell-item">
              {{ item.level1Target.placeholder }}
            </td>
            <td class="cell-item">
              <el-input
                type="textarea"
                rows="3"
                v-model="item.level1EvaluationResult.value"
                :placeholder="item.level1EvaluationResult.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"
              /> -->
              {{ item.level2Content.placeholder }}
            </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"
              /> -->
              {{ item.level2Target.placeholder }}
            </td>
            <td class="cell-item">
              <el-input
                type="textarea"
                rows="3"
                v-model="item.level2EvaluationResult.value"
                :placeholder="item.level2EvaluationResult.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: () => [],
  },
});

// ===================== 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>
