<template>
  <div class="app-container">
    <!-- 使用el-form进行表单展示 -->
    <el-form ref="detailForm" :model="detailFormData" label-width="0px">
      <!-- 数据表格 -->
      <el-table
        v-loading="loading"
        :data="detailsList"
        stripe
        :header-cell-class-name="headerCellClassName"
        :span-method="objectSpanMethod"
      >
        <el-table-column label="广西水利电力职业技术学院" align="center">
          <el-table-column :label="reportName" align="center">
            <el-table-column :label="'班级：'+deptName+'  |  学号：' + stuNo + '   | 姓名：' + studentName" align="center">
              <!-- 表格列 -->
              <el-table-column label="维度名称" align="center" prop="dimensionName" />
              <el-table-column label="质控点名称" align="center" prop="qualityControlPointName" />
              <el-table-column label="指标名称" align="center" prop="indicatorName" />
              <el-table-column label="学校合格标准" align="center" prop="schoolQualifiedStandard" />
              <el-table-column label="二级学院标准" align="center" prop="secondaryCollegeStandard" />
              <el-table-column label="个人目标规划" align="center" prop="personalTargetStandard" />

              <!-- 完成情况改为只读展示 -->
              <el-table-column label="完成情况" align="center">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.completionStatus"
                    :readonly="true"
                    size="small"
                  />
                </template>
              </el-table-column>

              <!-- 未完成原因改为只读展示 -->
              <el-table-column label="未完成原因" align="center">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.reasonForIncompletion"
                    :readonly="true"
                    size="small"
                  />
                </template>
              </el-table-column>

              <!-- 改进措施改为只读展示 -->
              <el-table-column label="改进措施" align="center">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.improvementActions"
                    :readonly="true"
                    size="small"
                  />
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import { filloutreportlistinfo } from "@/api/diagnostic/DiaFillOutReport";
import { Message } from "element-ui";

export default {
  name: "Details",
  props: {
    // 接收父组件传递的stuNo
    stuNo: {
      type: String,
      default: ""
    },
    // 接收父组件传递的rowData
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: true,
      detailsList: [],
      spanArr: [], // 维度名称列的合并规则
      qcSpanArr: [], // 质控点名称列的合并规则
      queryParams: {
        reportId: null,
        stuNo: null // 用于存储学号
      },
      // 头部信息
      reportName: "未命名报表",
      studentName: "-", // 姓名
      deptName: "-", // 班级
      // 表单数据
      detailFormData: { detailsList: [] }
    };
  },
  created() {
    // 初始化时获取数据
    this.queryParams.reportId = this.$route.params.reportId || "1";
    this.queryParams.stuNo = this.stuNo; // 设置学号参数
    this.getList();
  },
  watch: {
    // 监听stuNo变化，重新获取数据
    stuNo(newVal) {
      if (newVal) {
        this.queryParams.stuNo = newVal;
        this.getList();
      }
    }
  },
  methods: {
    headerCellClassName({ column }) {
      if (column.label === '广西水利电力职业技术学院') {
        return 'school-header';
      } else if (column.label === this.reportName) {
        return 'report-header';
      } else if (column.label.includes('学号：')) {
        return 'student-header';
      }
      return '';
    },

    // 计算合并规则的方法 - 保持原始顺序
    getSpanArr(data) {
      this.spanArr = [];
      this.qcSpanArr = [];

      // 记录上一行的维度和质控点
      let prevDimension = null;
      let prevQcPoint = null;

      // 记录当前维度和质控点的合并行数
      let currentDimensionRowspan = 0;
      let currentQcRowspan = 0;

      for (let i = 0; i < data.length; i++) {
        const current = data[i];

        // 处理维度名称列的合并
        if (prevDimension === null || prevDimension !== current.dimensionName) {
          // 新维度，开始新的合并组
          this.spanArr.push(1);
          currentDimensionRowspan = 1;
          prevDimension = current.dimensionName;
        } else {
          // 延续当前维度的合并组
          this.spanArr[i - currentDimensionRowspan] += 1;
          this.spanArr.push(0);
          currentDimensionRowspan += 1;
        }

        // 处理质控点名称列的合并
        if (prevDimension !== current.dimensionName || prevQcPoint !== current.qualityControlPointName) {
          // 新维度或新质控点，开始新的合并组
          this.qcSpanArr.push(1);
          currentQcRowspan = 1;
          prevQcPoint = current.qualityControlPointName;
        } else {
          // 延续当前质控点的合并组
          this.qcSpanArr[i - currentQcRowspan] += 1;
          this.qcSpanArr.push(0);
          currentQcRowspan += 1;
        }
      }
    },

    // 合并单元格的方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 维度名称列
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      } else if (columnIndex === 1) { // 质控点名称列
        const _row = this.qcSpanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      // 其他列不合并
      return { rowspan: 1, colspan: 1 };
    },

    async getList() {
      try {
        this.loading = true;
        // 构建包含reportId和stuNo的查询参数
        const params = {
          reportId: this.queryParams.reportId,
          stuNo: this.queryParams.stuNo
        };
        const response = await filloutreportlistinfo(params);

        // 提取头部信息
        if (response.rows.length > 0) {
          const firstRecord = response.rows[0];
          this.reportName = firstRecord.reportName || "未命名报表";
          this.stuNo = firstRecord.stuNo || "-";
          this.studentName = firstRecord.studentName || "-";
          this.deptName = firstRecord.deptName || "-";
        }

        // 处理表格数据
        this.detailsList = response.rows.map(item => ({
          id: item.id,
          dimensionName: item.dimensionName,
          qualityControlPointName: item.qualityControlPointName,
          indicatorName: item.indicatorName,
          schoolQualifiedStandard: item.schoolQualifiedStandard,
          secondaryCollegeStandard: item.secondaryCollegeStandard,
          personalTargetStandard: item.personalTargetStandard,
          completionStatus: item.completionStatus || "",
          reasonForIncompletion: item.reasonForIncompletion || "",
          improvementActions: item.improvementActions || ""
        }));

        this.detailFormData.detailsList = [...this.detailsList];

        // 计算合并规则（保持原始顺序）
        this.getSpanArr(this.detailsList);
      } catch (error) {
        console.error("数据获取失败:", error);
        Message.error("数据获取失败: " + error.message);
        this.detailsList = [];
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
/* 表格样式 */
.el-table {
  margin-top: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 表头字体大小调整 */
::v-deep .school-header .cell {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

::v-deep .report-header .cell {
  font-size: 20px;
  font-weight: 500;
  color: #444;
}

::v-deep .student-header .cell {
  font-size: 20px;
  color: #666;
}

/* 表格内容样式 */
::v-deep .el-table__body-wrapper {
  font-size: 14px;
}

/* 只读输入框样式 */
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: default;
}
</style>