<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,
      };
      console.log(this.userid);
      if (!this.userid) {
        return;
      }
      this.ajax
        .get(this.$store.state.api + "getUserInfoMore", 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 _pWork = res.data[3];
          let _allWork = res.data[4];
          for (var z = 0; z < courseList.length; z++) {
            var chapters = JSON.parse(courseList[z].chapters);
            for (var i = 0; i < chapters.length; i++) {
              workJson[i] = {
                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++;
                    workJson[i].tool++;
                  }
                }
              }

              for (var k = 0; k < _pWork.length; k++) {
                if (_pWork[k].stage == i) {
                  workJson[i].ptool++;
                }
              }
              for (var k = 0; k < _allWork.length; k++) {
                if (_allWork[k].stage == i) {
                  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 i = 0; i < workJson.length; i++) {
            if (workJson[i].ptool > workJson[i].tool) {
              workJson[i].work = 100;
            } else if (workJson[i].tool === 0) {
              workJson[i].work = 100;
            } else {
              workJson[i].work = Math.round(
                (workJson[i].ptool / workJson[i].tool) * 100
              );
            }

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

          console.log(workJson);
          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 _array1 = [];
        let _array2 = [];
        let _xarray = [];
        for (var i = 0; i < this.workJson.length; i++) {
          //   this.option.series[0].data[i].value = this.randomNum(30, 80);
          _array1.push(this.workJson[i].work);
          _array2.push(this.workJson[i].allWork);
          _xarray.push("阶段" + (i + 1));
        }
        this.option.series[0].data = _array1;
        this.option.xAxis[0].data = _xarray;
        this.option.series[1].data = _array2;
        // 初始化雷达图
        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>