<template>
  <div class="part-box part-box-pad">
    <el-table
      :data="dataList"
      border
      :span-method="spanMethod"
      :max-height="600"
    >
      <el-table-column label="课程信息" align="center" fixed="left" width="500">
        <el-table-column
          label="课程名称（代码）"
          width="240"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>
              {{ scope.row.courseName }}
            </span>
            <span v-if="scope.row.courseCode">
              （{{ scope.row.courseCode }}）
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="学期"
          prop="semesterName"
          width="200"
        ></el-table-column>
        <el-table-column
          label="学分"
          prop="credit"
          width="60"
          align="center"
        ></el-table-column>
      </el-table-column>
      <el-table-column label="毕业要求" align="center">
        <template v-if="hasSubRequirements">
          <el-table-column
            v-for="(column, cindex) in columns"
            :key="cindex"
            :label="column.name"
            align="center"
          >
            <el-table-column
              v-for="(subr, sindex) in column.subRequirements"
              :key="sindex"
              align="center"
              min-width="75"
            >
              <template slot="header">
                <span v-if="subr.name === 'null'"></span>
                <template v-else>
                  <span>{{ subr.name }}</span>
                  <el-tooltip v-if="subr.content" effect="dark" placement="top">
                    <div slot="content" class="tooltip-area">
                      {{ subr.content }}
                    </div>
                    <i class="el-icon-info ml-1 tooltip-info-icon"></i>
                  </el-tooltip>
                </template>
              </template>
              <template slot-scope="scope">
                <template v-if="scope.$index < rowCount - 2">
                  <el-popover
                    v-if="
                      scope.row.obeRequirements[cindex].obeSubRequirements[
                        sindex
                      ].matrixDegree ||
                      scope.row.obeRequirements[cindex].obeSubRequirements[
                        sindex
                      ].matrixDegree === 0
                    "
                    placement="right"
                    trigger="click"
                  >
                    <div class="matrix-content" slot="reference">
                      {{
                        scope.row.obeRequirements[cindex].obeSubRequirements[
                          sindex
                        ].matrixDegree
                      }}
                    </div>
                    <div class="matrix-tips">
                      <h3>
                        <span>
                          {{ scope.row.courseName }}
                        </span>
                        <span v-if="scope.row.courseCode">
                          （{{ scope.row.courseCode }}）
                        </span>
                      </h3>
                      <p>
                        课程目标达成值：{{
                          scope.row.obeRequirements[cindex].obeSubRequirements[
                            sindex
                          ].courseMatrixDegree
                        }}
                      </p>
                      <p>
                        在该指标点下支撑权重：{{
                          scope.row.obeRequirements[cindex].obeSubRequirements[
                            sindex
                          ].scale
                        }}
                      </p>
                      <p>
                        该指标点达成值：{{
                          scope.row.obeRequirements[cindex].obeSubRequirements[
                            sindex
                          ].courseMatrixDegree
                        }}
                        ×
                        {{
                          scope.row.obeRequirements[cindex].obeSubRequirements[
                            sindex
                          ].scale
                        }}
                        =
                        {{
                          scope.row.obeRequirements[cindex].obeSubRequirements[
                            sindex
                          ].matrixDegree
                        }}
                      </p>
                    </div>
                  </el-popover>
                  <span v-else>--</span>
                </template>
                <span v-else>
                  {{
                    scope.row.obeRequirements[cindex].obeSubRequirements[sindex]
                      .matrixDegree | defaultFieldFilter
                  }}
                </span>
              </template>
            </el-table-column>
          </el-table-column>
        </template>

        <template v-else>
          <el-table-column
            v-for="(column, cindex) in columns"
            :key="cindex"
            :label="column.name"
            align="center"
            min-width="60"
          >
            <template slot-scope="scope">
              {{
                scope.row.obeRequirements[cindex].matrixDegree
                  | defaultFieldFilter
              }}
            </template>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { calcSum, minNum, toPrecision, listFilterEmpty } from "@/plugins/utils";
import { requirementStatisticsDetail } from "../../api";

export default {
  name: "requirement-statistics-statement",
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dataList: [],
      columns: [],
      hasSubRequirements: false,
      rowCount: 0,
      totalRowColMap: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await requirementStatisticsDetail({
        cultureProgramId: this.rowData.cultureProgramId,
      });
      this.dataList = res || [];
      if (this.dataList[0]) this.parseColumns(this.dataList[0].obeRequirements);
      this.updateTotalInfo();
      this.rowCount = this.dataList.length;
    },
    parseColumns(requirements) {
      this.hasSubRequirements = requirements.some(
        (item) => item.obeSubRequirements[0].name !== null
      );
      if (!this.hasSubRequirements) {
        this.columns = requirements.map((item) => {
          return { name: item.name };
        });
        return;
      }

      this.columns = requirements.map((item) => {
        return {
          name: item.name,
          subRequirements: item.obeSubRequirements.map((subr) => {
            return {
              name: subr.name,
              content: subr.content,
            };
          }),
        };
      });
    },
    updateTotalInfo() {
      const totalRowColMap = {};
      let columnIndex = 3;
      const totalObeRequirements = this.columns.map((column, cindex) => {
        const obeSubRequirements = column.subRequirements.map(
          (subr, sindex) => {
            const dList = listFilterEmpty(
              this.dataList.map(
                (item) =>
                  item.obeRequirements[cindex].obeSubRequirements[sindex]
                    .matrixDegree
              )
            );
            const matrixDegree = dList.length
              ? toPrecision(calcSum(dList), 2)
              : null;

            return {
              name: subr.name,
              matrixDegree,
            };
          }
        );
        totalRowColMap[columnIndex] = column.subRequirements.length;
        columnIndex += column.subRequirements.length;

        const validVals = listFilterEmpty(
          obeSubRequirements.map((subr) => subr.matrixDegree)
        );
        const minMatrixDegree = validVals.length ? minNum(validVals) : null;

        return {
          name: column.name,
          obeSubRequirements,
          matrixDegree: minMatrixDegree,
        };
      });
      this.totalRowColMap = totalRowColMap;

      const totalRequirementColumn = {
        courseName: "毕业要求指标达成度",
        semesterName: "",
        credit: "",
        obeRequirements: totalObeRequirements,
      };
      this.dataList.push(totalRequirementColumn);

      const totalColumn = {
        courseName: "毕业要求达成度",
        semesterName: "",
        credit: "",
        obeRequirements: totalObeRequirements.map((item) => {
          const nitem = { ...item };
          nitem.obeSubRequirements = item.obeSubRequirements.map(
            (elem, eindex) => {
              const nelem = { ...elem };
              nelem.matrixDegree = item.matrixDegree;
              return nelem;
            }
          );
          return nitem;
        }),
      };
      this.dataList.push(totalColumn);
    },
    spanMethod({ rowIndex, columnIndex, column }) {
      if (rowIndex === this.rowCount - 2) {
        if (columnIndex === 0) {
          return { rowspan: 1, colspan: 3 };
        } else if (columnIndex <= 2) {
          return [0, 0];
        }
      }

      if (rowIndex === this.rowCount - 1) {
        if (columnIndex === 0) {
          return { rowspan: 1, colspan: 3 };
        } else if (columnIndex <= 2) {
          return [0, 0];
        } else {
          return this.totalRowColMap[columnIndex]
            ? [1, this.totalRowColMap[columnIndex]]
            : [0, 0];
        }
      }
    },
  },
};
</script>
