<template>
  <div>
    <div id="mainAxios" style="width: 100%; height: 400px;"></div>

    <H2>{{ userId }}学生能力分析报告</H2>
    <el-table :data="tableData"
              :span-method="objectSpanMethod" border style="width: 100%">
      <el-table-column prop="ksd" label="一级能力分类" width="105"/>
      <el-table-column prop="ksd2" label="二级能力分类" width="157"/>
      <el-table-column prop="description" label="能力描述">
        <template #default="scope">
          <div class="description-cell">{{ scope.row.description }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="得分" width="307">
        <template #default="scope">
          <div class="description-cell">{{ scope.row.score }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="rank" label="排名" width="75">
        <template #default="scope">
          前{{ scope.row.rank }}%
        </template>
      </el-table-column>

    </el-table>

    <div id="mainAssessmentChart" style="width: 70%; height: 300px; margin-top: 30px; margin-left: 10%"></div>

    <div class="ksd-main">
      <div>
        <div id="KAssessmentChart" style="width: 70%; height: 300px; margin-left: 10%"></div>
      </div>

      <div v-if="KIdx === 1">
        <el-card class="ksd-card">
          “K1软件工程知识储备”指参加课程数量、种类、以及测评的情况。有三个评判指标：<br>
          1.是否选软工一、二。<br>
          2.课程进展：（当前时间-开课时间）/（结课时间-开课时间）。<br>
          3.eval平台评测的平均分。<br>
          当前“K1软件工程知识储备”的得分为{{ K1.score.toFixed(2) }}。<br>
          是否已选课《软件工程与计算Ⅰ》？
          <span v-if="K1.chooseSE1">是。当前《软工Ⅰ》课程进展为{{ K1.processSE1.toFixed(2) }}%<br></span>
          <span v-else>否<br></span>
          是否已选课《软件工程与计算Ⅱ》？
          <span v-if="K1.chooseSE2">是。当前《软工Ⅱ》课程进展为{{ K1.processSE2.toFixed(2) }}%<br></span>
          <span v-else>否<br></span>
          eval平台评测的平均分为{{ K1.evalAverageScore.toFixed(2) }}。
        </el-card>
      </div>

      <div v-if="KIdx === 2">
        <el-card class="ksd-card">
          “K2软件工程开发流程”指软工二项目开发流程进度。有一个评判指标：<br>
          1.devcloud上软工二项目的提交、部署、规划次数。<br>
          当前“K2软件工程开发流程”的得分为{{ K2.score }}。<br>
          提交次数为{{ K2.commitTimes }}，部署次数为{{ K2.deployTimes }}，规划次数为{{ K2.nodeTimes }}。
        </el-card>
      </div>

      <div v-if="KIdx === 3">
        <el-card class="ksd-card">
          “K3编程语言”指对Java、Python、C++三种语言的掌握程度。有一个评判指标：<br>
          1.coder平台考试成绩，及使用的什么语言。<br>
          当前“K3编程语言”的得分为{{ K3.score }}。<br>
          在coder平台的平均分为{{ K3.coderAverageScore }}。
        </el-card>
      </div>
    </div>

    <div class="ksd-main">
      <div id="SAssessmentChart" style="width: 70%; height: 300px; margin-left: 10%"></div>

      <div v-if="SIdx === 1">
        <el-card class="ksd-card">
          “S1文档能力”指编写项目文档的能力。有一个评判指标：<br>
          1.软工二课程中提交的文档是否规范。（包括1项目计划文档、2用例文档、3需求分析文档、4人机交互设计文档、5体系架构文档、6详细设计文档、7测试文档）<br>
          当前“S1软件工程知识储备”的得分为{{ S1.score }}。<br>
        </el-card>
      </div>

      <div v-if="SIdx === 2">
        <el-card class="ksd-card">
          “S2项目管理工具使用能力”指使用Git工具的能力。有一个评判指标：<br>
          1.git记录是否合理正常，commit信息是否规范。<br>
          当前“S2软件工程开发流程”的得分为{{ S2.score.toFixed(2) }}。<br>
          符合规范的提交比率为{{ S2.commitComplianceRate.toFixed(2) }}%。
        </el-card>
      </div>

      <div v-if="SIdx === 3">
        <el-card class="ksd-card">
          “S3测试能力”指项目代码的测试覆盖率。有一个评判指标：<br>
          1.获取coder和gitee里所有提交的项目代码与项目结构，使用JPA获取测试覆盖率。<br>
          当前“S3测试能力”的得分为{{ S3.score }}。<br>
        </el-card>
      </div>

      <div v-if="SIdx === 4">
        <el-card class="ksd-card">
          “S4代码规范”指项目代码的静态规范程度。有一个评判指标：<br>
          1.coder提交后SonarQube评估出的分数。<br>
          当前“S4代码规范”的得分为{{ S4.score }}。<br>
        </el-card>
      </div>
    </div>

    <div class="ksd-main">
      <div id="DAssessmentChart" style="width: 70%; height: 300px; margin-left: 10%"></div>

      <div v-if="DIdx === 1">
        <el-card class="ksd-card">
          “D1合作能力”指团队贡献力。有一个评判指标：<br>
          1.提交占比：用户commit的次数/小组commit总次数<br>
          当前“D1合作能力”的得分为{{ D1.score.toFixed(2) }}。<br>
          提交占比为{{ D1.commitRate.toFixed(2) }}%。
        </el-card>
      </div>

      <div v-if="DIdx === 2">
        <el-card class="ksd-card">
          “D2求知欲”指获取知识的积极程度。有一个评判指标：<br>
          1.是否及时查看通知、查看与下载课件，布置的任务有没有及时完成，是否经常登录门户查看和操作。<br>
          当前“D2求知欲”的得分为{{ D2.score }}。<br>
        </el-card>
      </div>

      <div v-if="DIdx === 3">
        <el-card class="ksd-card">
          “D3时间管理能力”指是否能合理把控任务时间。有两个评判指标：<br>
          1.是否有在0：00~6：00进行操作，如果有，则视为不健康。<br>
          2.完成任务的时间和任务ddl是否差距在1h内。<br>
          当前“D3时间管理能力”的得分为{{ D3.score }}。<br>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AssessmentPage",
  data() {
    return {
      userId: 0,
      KIdx: 1,
      SIdx: 1,
      DIdx: 1,
      KValue: 0,
      SValue: 0,
      DValue: 0,
      K1: {
        chooseSE1: false,
        chooseSE2: false,
        processSE1: 0,
        processSE2: 0,
        evalAverageScore: 0,
        score: 0,
        rank: 0
      },
      K2: {
        commitTimes: 0,
        deployTimes: 0,
        nodeTimes: 0,
        score: 0,
        rank: 0
      },
      K3: {
        coderAverageScore: 0,
        score: 0,
        rank: 0
      },
      S1: {
        score: 0,
        rank: 0
      },
      S2: {
        commitComplianceRate: 0,
        score: 0,
        rank: 0
      },
      S3: {
        score: 0,
        rank: 0
      },
      S4: {
        score: 0,
        rank: 0
      },
      D1: {
        commitRate: 0,
        score: 0,
        rank: 0
      },
      D2: {
        score: 0,
        rank: 0
      },
      D3: {
        stayUpLate: false,
        score: 0,
        rank: 0
      },
      tableData: [
        {
          ksd: "K-知识",
          ksd2: "K1-软件工程知识储备",
          description: "",
          score: "",
          rank: 0
        },
        {
          ksd: "K-知识",
          ksd2: "K2-软件工程开发流程",
          description: "",
          score: "",
          rank: 0
        },
        {
          ksd: "K-知识",
          ksd2: "K3-编程语言",
          description: "",
          score: "",
          rank: 0
        },
        {
          ksd: "S-技能",
          ksd2: "S1-文档编写",
          description: "",
          score: "",
          rank: 0
        },
        {
          ksd: "S-技能",
          ksd2: "S2-项目管理工具使用",
          description: "",
          score: "",
          rank: 0
        },
        {
          ksd: "S-技能",
          ksd2: "S3-测试编写",
          description: "",
          score: "",
          rank: 0
        },
        {
          ksd: "S-技能",
          ksd2: "S4-代码规范",
          description: "",
          score: "",
          rank: 0
        },
        {
          ksd: "D-态度",
          ksd2: "D1-合作能力",
          description: "",
          score: "",
          rank: 0
        },
        {
          ksd: "D-态度",
          ksd2: "D2-求知欲",
          description: "",
          score: "",
          rank: 0
        },
        {
          ksd: "D-态度",
          ksd2: "D3-时间管理能力",
          description: "",
          score: "",
          rank: 0
        }
      ],
    };
  },
  mounted() {
    this.getValues();
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.userId = this.$store.state.user.id;
      //this.userId = 1058;
      this.overrideApiBaseUrl();
      this.getSpanArr(this.tableData);
    },

    overrideApiBaseUrl() {
      // 覆盖全局 URL 为8082端口的 URL
      this.$apis = "http://localhost:8082/";
    },

    async getValues() {
      this.K1 = (await (await fetch(this.$apis + `api/knowledge/K1/${this.userId}`)).json()).data;
      this.K2 = (await (await fetch(this.$apis + `api/knowledge/K2/${this.userId}`)).json()).data;
      this.K3 = (await (await fetch(this.$apis + `api/knowledge/K3/${this.userId}`)).json()).data;

      this.KValue = (this.K1.score + this.K2.score + this.K3.score) / 3;
      this.drawKAssessmentChart();


      this.S1 = (await (await fetch(this.$apis + `api/skill/S1/${this.userId}`)).json()).data;
      this.S2 = (await (await fetch(this.$apis + `api/skill/S2/${this.userId}`)).json()).data;
      this.S3 = (await (await fetch(this.$apis + `api/skill/S3/${this.userId}`)).json()).data;
      this.S4 = (await (await fetch(this.$apis + `api/skill/S4/${this.userId}`)).json()).data;


      this.SValue = (this.S1.score + this.S2.score + this.S3.score + this.S4.score) / 4;
      this.drawSAssessmentChart();

      this.D1 = (await (await fetch(this.$apis + `api/dilemma/D1/${this.userId}`)).json()).data;
      this.D2 = (await (await fetch(this.$apis + `api/dilemma/D2/${this.userId}`)).json()).data;
      this.D3 = (await (await fetch(this.$apis + `api/dilemma/D3/${this.userId}`)).json()).data;

      this.DValue = (this.D1.score + this.D2.score + this.D3.score) / 3;
      this.drawDAssessmentChart();


      this.drawMain();
    },

    drawMain() {
      this.drawMainAssessmentChart();
      this.getTableData();
      this.drawMainAxios();
    },

    getTableData() {
      //K1
      this.tableData[0].description = "指参加课程数量、种类、以及测评的情况。\n" +
          "有三个评判指标：\n" +
          "1. 是否选软工一、二；\n" +
          "2. 课程进展：（当前时间-开课时间）/（结课时间-开课时间）；\n" +
          "3. eval平台评测的平均分。\n";
      this.tableData[0].score = "当前得分为" + this.K1.score.toFixed(2) + "分。\n" +
          "当前《软工Ⅰ》课程进展为" + this.K1.processSE1.toFixed(2) + "%。\n" +
          "当前《软工Ⅱ》课程进展为" + this.K1.processSE2.toFixed(2) + "%。\n" +
          "eval平台评测的平均分为" + this.K1.evalAverageScore.toFixed(2) + "分。";
      this.tableData[0].rank = (this.K1.rank * 100).toFixed(0);

      //K2
      this.tableData[1].description = "指软工二项目开发流程进度。\n" +
          "有一个评判指标：\n" +
          "1. devcloud上软工二项目的提交、部署、规划次数。\n";
      this.tableData[1].score = "当前得分为" + this.K2.score.toFixed(2) + "分。\n" +
          "提交次数为" + this.K2.commitTimes + "，部署次数为" + this.K2.deployTimes
          + "，规划次数为" + this.K2.nodeTimes + "。";
      this.tableData[1].rank = (this.K2.rank * 100).toFixed(0);

      //K3
      this.tableData[2].description = "指对Java、Python、C++三种语言的掌握程度。\n" +
          "有一个评判指标：\n" +
          "1. coder平台考试成绩，及使用的什么语言。\n";
      this.tableData[2].score = "当前得分为" + this.K3.score + "分。\n" +
          "在coder平台的平均分为" + this.K3.coderAverageScore + "分。";
      this.tableData[2].rank = (this.K3.rank * 100).toFixed(0);

      //S1
      this.tableData[3].description = "指编写项目文档的能力。\n" +
          "有一个评判指标：\n" +
          "1. 软工二课程中提交的文档是否规范。（包括1项目计划文档、2用例文档、3需求分析文档、4人机交互设计文档、5体系架构文档、6详细设计文档、7测试文档）\n";
      this.tableData[3].score = "当前得分为" + (this.S1.score * 100).toFixed(2) + "分。";
      this.tableData[3].rank = (this.S1.rank * 100).toFixed(0);

      //S2
      this.tableData[4].description = "指使用Git工具的能力。\n" +
          "有一个评判指标：\n" +
          "1. git记录是否合理正常，commit信息是否规范。\n";
      this.tableData[4].score = "当前得分为" + this.S2.score.toFixed(2) + "分。\n" +
          "符合规范的提交比率为" + this.S2.commitComplianceRate.toFixed(2) + "%。";
      this.tableData[4].rank = 50;

      //S3
      this.tableData[5].description = "指项目代码的测试覆盖率。\n" +
          "有一个评判指标：\n" +
          "1. 获取coder和gitee里所有提交的项目代码与项目结构，使用JPA获取测试覆盖率。\n";
      this.tableData[5].score = "当前得分为" + (this.S3.score * 100).toFixed(2) + "分。";
      this.tableData[5].rank = (this.S3.rank * 100).toFixed(0);

      //S4
      this.tableData[6].description = "指项目代码的静态规范程度。\n" +
          "有一个评判指标：\n" +
          "1. coder提交后SonarQube评估出的分数。\n";
      this.tableData[6].score = "当前得分为" + (this.S4.score * 100).toFixed(2) + "分。";
      this.tableData[6].rank = (this.S4.rank * 100).toFixed(0);

      //D1
      this.tableData[7].description = "指团队贡献力。\n" +
          "有一个评判指标：\n" +
          "1. 提交占比：用户commit的次数/小组commit总次数。\n";
      this.tableData[7].score = "当前得分为" + this.D1.score.toFixed(2) + "分。\n" +
          "提交占比为" + this.D1.commitRate.toFixed(2) + "%。";
      this.tableData[7].rank = (this.D1.rank * 100).toFixed(0);

      //D2
      this.tableData[8].description = "指获取知识的积极程度。\n" +
          "有一个评判指标：\n" +
          "1. 是否及时查看通知、查看与下载课件，布置的任务有没有及时完成，是否经常登录门户查看和操作。\n";
      this.tableData[8].score = "当前得分为" + (this.D2.score * 100).toFixed(2) + "分。";
      this.tableData[8].rank = (this.D2.rank * 100).toFixed(0);

      //D3
      this.tableData[9].description = "指是否能合理把控任务时间。\n" +
          "有两个评判指标：\n" +
          "1. 是否有在0：00~6：00进行操作，如果有，则视为不健康。\n" +
          "2. 完成任务的时间和任务ddl是否差距在1h内。\n";
      this.tableData[9].score = "当前得分为" + this.D3.score + "分。";
      this.tableData[9].rank = (this.D3.rank * 100).toFixed(0);
    },

    //设置单元格
    getSpanArr(list) {
      // 先给所有的数据都加一个v.rowspan = 1
      list.forEach(item => {
        item.rowspan = 1;
      });
      // 双层循环
      for (let i = 0; i < list.length; i++) {
        for (let j = i + 1; j < list.length; j++) {
          //此处可根据相同字段进行合并，此处是根据的id
          if (list[i].ksd === list[j].ksd) {
            list[i].rowspan++;
            list[j].rowspan--;
          }
        }
        // 这里跳过已经重复的数据
        i = i + list[i].rowspan - 1;
      }
      this.tableData = list;
    },

    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      //第一列
      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        };
      }
    },

    drawMainAxios() {
      let myChart = this.$echarts.init(document.getElementById("mainAxios"));
      let option = {
        xAxis: {
          data: ["K1\n软件工程知识储备", "K2\n项目开发流程", "K3\n编程语言",
            "S1\n文档编写", "S2\n项目管理工具", "S3\n测试编写", "S4\n代码规范",
            "D1\n合作能力", "D2\n求知欲", "D3\n时间管理能力"],
          axisLabel: {
            interval: 0,//代表显示所有x轴标签显示
            //rotate: 20, //代表逆时针旋转45度
          }
        },
        yAxis: {},
        legend: {
          orient: "vertical",
          top: "0%",
          x: "81%",
          y: "center",
          itemWidth: 10,
          itemHeight: 10,
          data:["大一年级","大二年级"],
          textStyle:{
            fontSize: 10,//字体大小
            color: "#000000"
          }
        },
        series: [
          {
            name: "大一年级",
            type: "bar",
            data: [43, 24, 40, 56, 75, 43, 78, 19, 68, 95],
            barWidth: "20%",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            },
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: { //数值样式
                color: "black",//字体颜色
                fontSize: 12//字体大小
              }
            }
          },
          {
            name: "大二年级",
            type: "bar",
            data: [66, 72, 51, 88, 87, 68, 80, 64, 72, 91],
            barWidth: "20%",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            },
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: { //数值样式
                color: "black",//字体颜色
                fontSize: 12//字体大小
              }
            }
          },
        ]
      };
      myChart.setOption(option);
    },

    drawKAssessmentChart() {
      let myChart = this.$echarts.init(document.getElementById("KAssessmentChart"));
      let option = {
        title: {
          text: "Knowledge 知识能力评估"
        },
        legend: {
          data: []
        },
        radar: {
          shape: "circle",
          indicator: [
            {name: "K1 软件工程知识储备", max: 100},
            {name: "K2 软件工程开发流程", max: 100},
            {name: "K3 编程语言", max: 100},
          ]
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [this.K1.score, this.K2.score, this.K3.score],
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
      myChart.on("click", (param) => {
        this.KIdx = param.event.topTarget.__dimIdx + 1;
      });
    },

    drawSAssessmentChart() {
      let myChart = this.$echarts.init(document.getElementById("SAssessmentChart"));
      let option = {
        title: {
          text: "Skill 技术能力评估"
        },
        legend: {
          data: []
        },
        radar: {
          shape: "circle",
          indicator: [
            {name: "S1 文档能力", max: 100},
            {name: "S2 项目管理工具使用能力", max: 100},
            {name: "S3 代码规范", max: 100},
            {name: "S4 测试能力", max: 100},
          ]
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [this.S1.score, this.S2.score, this.S3.score, this.S4.score],
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
      myChart.on("click", (param) => {
        this.SIdx = param.event.topTarget.__dimIdx + 1;
      });
    },

    drawDAssessmentChart() {
      let myChart = this.$echarts.init(document.getElementById("DAssessmentChart"));
      let option = {
        title: {
          text: "Dilemma 态度能力评估"
        },
        legend: {
          data: []
        },
        radar: {
          shape: "circle",
          indicator: [
            {name: "D1 团队合作能力", max: 100},
            {name: "D2 求知欲", max: 100},
            {name: "D3 时间管理能力", max: 100},
          ]
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [this.D1.score, this.D2.score, this.D3.score],
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
      myChart.on("click", (param) => {
        this.DIdx = param.event.topTarget.__dimIdx + 1;
      });
    },

    drawMainAssessmentChart() {
      let myChart = this.$echarts.init(document.getElementById("mainAssessmentChart"));
      let option = {
        title: {
          text: "软工能力评估"
        },
        legend: {
          data: []
        },
        radar: {
          shape: "circle",
          indicator: [
            {name: "Knowledge 知识", max: 100},
            {name: "Skill 技术", max: 100},
            {name: "Dilemma 态度", max: 100},
          ]
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [this.KValue, this.SValue, this.DValue],
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
  }
};
</script>

<style scoped>
.ksd-main {
  margin-top: 50px;
  margin-bottom: 30px;
  align-items: center;
}

.ksd-card {
  width: 60%;
  margin-left: 10%;
  line-height: 30px;
}

.description-cell {
  white-space: pre-line; /* 保留换行符，同时不保留其他空白符 */
}
</style>
