<template>
  <div v-loading="isloading">
    <div style="width: 95%; height: calc(100%); margin: 0 auto">
      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
      <div
        id="charts_canvas"
        class="echart"
        style="width: 100%; height: 100%"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["userid", "courseid"],
  data() {
    return {
      isloading: false,
      workJson: [],
      chartObj: null,
      option: {
        // title: {
        //   text: "项目完成度:各个阶段完成情况",
        //   textStyle: {
        //     fontSize: 13,
        //   },
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["个人完成度", "班级平均完成度"],
          top: "bottom",
          icon: "circle",
        },
        grid: {
          left: "15%",
          right: "5%",
          bottom: "20%",
          top: "15%",
        },
        xAxis: [
          {
            type: "category",
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          // {
          //   name: "个人完成度",
          //   type: "line",
          //   areaStyle: {},
          //   data: [],
          //   label: {
          //     show: true,
          //   },
          // },
          // {
          //   name: "班级平均完成度",
          //   type: "line",
          //   areaStyle: {},
          //   data: [],
          //   label: {
          //     show: true,
          //   },
          // },
        ],
      },
    };
  },
  methods: {
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    getInfo() {
      this.isloading = true;
      let params = {
        uid: this.userid,
        cid: this.courseid,
      };
      if (!this.userid) {
        return;
      }
      this.ajax
        .get(this.$store.state.api + "getClassUserInfoMore", params)
        .then((res) => {
          this.isloading = false;
          let courseList = res.data[2];
          // let chapters = JSON.parse(res.data[2][0].chapters);
          var tool = 0;
          let workJson = [];
          let personWorkJson = [];
          let _pWork = res.data[3];
          let _allWork = res.data[4];
          for (var q = 0; q < _pWork.length; q++) {
            personWorkJson[q] = { workJson: [], sName: _pWork[q].sName };
            for (var z = 0; z < courseList.length; z++) {
              var chapters = JSON.parse(courseList[z].chapters);
              for (var i = 0; i < chapters.length; i++) {
                personWorkJson[q].workJson.push({
                  tool: 0,
                  ptool: 0,
                  work: 0,
                  allTool: 0,
                  allWork: 0,
                });
                for (
                  var j = 0;
                  j < chapters[i].chapterInfo[0].taskJson.length;
                  j++
                ) {
                  // 1、电子白板，3、思维导图，6协同文档，7思维网格 16、作业提交,40.项目-学生互评 41.项目-下拉选择题 42.项目-录音功能
                  let _toolsAarry = [
                    1, 3, 6, 7, 16, 15, 4, 40, 41, 42, 49, 50, 52, 32, 57,
                  ];
                  for (
                    var k = 0;
                    k <
                    chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
                    k++
                  ) {
                    if (
                      _toolsAarry.indexOf(
                        chapters[i].chapterInfo[0].taskJson[j].toolChoose[k]
                          .tool[0]
                      ) != -1
                    ) {
                      tool++;
                      personWorkJson[q].workJson[i].tool++;
                    }
                  }
                }

                for (var k = 0; k < _pWork.length; k++) {
                  if (
                    _pWork[k].stage == i &&
                    _pWork[q].userid == _pWork[k].userid
                  ) {
                    personWorkJson[q].workJson[i].ptool++;
                  }
                }
                for (var k = 0; k < _allWork.length; k++) {
                  if (_allWork[k].stage == i) {
                    personWorkJson[q].workJson[i].allTool++;
                  }
                }
              }
            }
          }

          this.userinfo = res.data[0][0];
          this.ccount = tool;
          this.islearn = tool - parseInt(res.data[1][0].vcount);

          this.iscount = res.data[1][0].vcount;
          this.vcount = 0;
          for (var j = 0; j < personWorkJson.length; j++) {
            for (var i = 0; i < personWorkJson[j].workJson.length; i++) {
              if (
                personWorkJson[j].workJson[i].ptool >
                personWorkJson[j].workJson[i].tool
              ) {
                personWorkJson[j].workJson[i].work = 100;
              } else if (personWorkJson[j].workJson[i].tool === 0) {
                personWorkJson[j].workJson[i].work = 100;
              } else {
                personWorkJson[j].workJson[i].work = Math.round(
                  (personWorkJson[j].workJson[i].ptool /
                    personWorkJson[j].workJson[i].tool) *
                    100
                );
              }

              if (
                personWorkJson[j].workJson[i].allTool /
                  res.data[1][0].workCount >
                personWorkJson[j].workJson[i].tool
              ) {
                personWorkJson[j].workJson[i].allWork = 100;
              } else {
                personWorkJson[j].workJson[i].allWork = Math.round(
                  (personWorkJson[j].workJson[i].allTool /
                    res.data[1][0].workCount /
                    personWorkJson[j].workJson[i].tool) *
                    100
                );
              }
            }
          }

          this.workJson = personWorkJson;

          this.setChart();
        })
        .catch((err) => {
          this.isloading = false;
          console.error(err);
        });
    },
    setChart() {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#charts_canvas")
          //   document.getElementById("#charts_canvas")
        );
        let _xarray = [];
        var a = this.workJson;
        const existObj = {};

        // 对原数组进行遍历
        const newArr = a.filter((item) => {
          // 如果 sName 为 null，则直接过滤掉该项
          if (item.sName === null) {
            return false;
          }
          // 如果 sName 已经存在，则返回 false，过滤掉该项
          if (existObj[item.sName]) {
            return false;
          }
          // 将该 sName 加入已经存在的对象中
          existObj[item.sName] = true;
          // 返回 true，保留该项
          return true;
        });
        
        this.workJson = [];
        this.workJson = newArr;
        // this.workJson[j].workJson[i].allWork
        for (var i = 0; i < this.workJson[0].workJson.length; i++) {
          _xarray.push("阶段" + (i + 1));
        }
        for (var i = 0; i < this.workJson.length; i++) {
          this.option.series.push({
            name: this.workJson[i].sName,
            type: "line",
            data: [],
            label: {
              show: true,
            },
          });
          for (var j = 0; j < this.workJson[i].workJson.length; j++) {
            this.option.series[i].data.push(this.workJson[i].workJson[j].work);
          }
        }
        this.option.series.push({
          name: "班级平均完成度",
          type: "line",
          data: [],
          label: {
            show: true,
          },
        });
        for (var i = 0; i < this.option.series.length; i++) {
          if (this.option.series[i].name == "班级平均完成度") {
            for (var j = 0; j < this.workJson[0].workJson.length; j++) {
              this.option.series[i].data = this.workJson[0].workJson.map(
                (item) => {
                  // 判断 allWork 是否为 NaN
                  if (isNaN(item.allWork)) {
                    return 100; // 如果是 NaN，则 push 100
                  } else {
                    return item.allWork; // 如果不是 NaN，则 push allWork 值
                  }
                }
              );
            }
          }
        }
        this.option.xAxis[0].data = _xarray;
        // 初始化雷达图
        this.chartObj = chartObj;
        this.chartObj.setOption(this.option);
      });
      let _this = this;
      window.addEventListener("resize", () => {
        if (_this.chartObj) {
          _this.chartObj.resize();
        }
      });
    },
  },
  watch: {
    userid(newValue, oldValue) {
      this.getInfo();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getInfo();
    });
  },
};
</script>

<style>
</style>