<template>
  <div v-loading="isloading">
    <div class="ci_info" v-if="Object.keys(courseInfo).length">
      <div class="ci_info_box">
        <span>课程名称：</span><span>{{ courseInfo.title }}</span>
      </div>
      <div class="ci_info_box">
        <span>创建人：</span><span>{{ courseInfo.name }}</span>
      </div>
      <div class="ci_info_box">
        <span>协同人员：</span><span>{{ teacher ? teacher : "无协同人员" }}</span>
      </div>
      <div class="ci_info_box2">
        <div>
          阶段<span>{{ tool.stage }}</span>个
        </div>
        <div>
          任务<span>{{ tool.task }}</span>个
        </div>
        <div>
          工具<span>{{ tool.tool }}</span>个
        </div>
      </div>
    </div>
    <div style="width: 90%; height: calc(100% - 130px); margin: 10px auto 0">
      <!-- <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: ["courseid"],
  data() {
    return {
      isloading:false,
      chartJson: {},
      courseInfo: {},
      teacher: "",
      chartObj: null,
      tool: {
        stage: 0,
        task: 0,
        tool: 0,
      },
      option: {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
        },
        grid: {},
        series: [
          {
            bottom: "20%",
            name: "学习活动时间分配图",
            type: "pie",
            // radius: [10, "80%"],
            center: ["50%", "50%"],
            // roseType: "area",
            // itemStyle: {
            //   borderRadius: 8,
            // },
            label: {
              show: true,
              position: "inside",
              formatter: "{b}\n{d}%",
            },
            data: [
              { value: 0, name: "思维网格" },
              { value: 0, name: "思维导图" },
              { value: 0, name: "电子白板" },
              { value: 0, name: "选择题" },
              // { value: 0, name: "自主学习" },
              { value: 0, name: "其他" },
            ],
          },
        ],
      },
    };
  },
  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 = {
        cid: this.courseid,
      };
      if (!this.courseid) {
        return;
      }
      this.ajax
        .get(this.$store.state.api + "getCourseInfoMore", params)
        .then((res) => {
          this.isloading = false;
          var ctitle = "";
          for (var i = 0; i < res.data[0].length; i++) {
            if (ctitle == "") {
              ctitle = res.data[0][i].title;
            } else {
              if (ctitle.split(",").indexOf(res.data[0][i].title) == -1) {
                ctitle += "," + res.data[0][i].title;
              }
            }
          }
          this.courseInfo.title = ctitle;

          var task = 0;
          var tool = 0;

          var wang = 0; //7
          var si = 0; //3
          var dian = 0; //1
          var xuan = 0; //4
          var other = 0;
          for (var z = 0; z < res.data[0].length; z++) {
            var chapters = JSON.parse(res.data[0][z].chapters);
            for (var i = 0; i < chapters.length; i++) {
              task += chapters[i].chapterInfo[0].taskJson.length;
              for (
                var j = 0;
                j < chapters[i].chapterInfo[0].taskJson.length;
                j++
              ) {
                if (chapters[i].chapterInfo[0].taskJson[j].toolChoose.length) {
                  for (
                    var k = 0;
                    k <
                    chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
                    k++
                  ) {
                    if (
                      chapters[i].chapterInfo[0].taskJson[j].toolChoose[
                        k
                      ].tool.indexOf(7) != -1
                    ) {
                      wang++;
                    } else if (
                      chapters[i].chapterInfo[0].taskJson[j].toolChoose[
                        k
                      ].tool.indexOf(3) != -1
                    ) {
                      si++;
                    } else if (
                      chapters[i].chapterInfo[0].taskJson[j].toolChoose[
                        k
                      ].tool.indexOf(1) != -1
                    ) {
                      dian++;
                    } else if (
                      chapters[i].chapterInfo[0].taskJson[j].toolChoose[
                        k
                      ].tool.indexOf(4) != -1
                    ) {
                      xuan++;
                    } else {
                      other++;
                    }
                  }
                }

                tool +=
                  chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
              }
            }
          }
          this.chartJson = {
            wang,
            si,
            dian,
            xuan,
            other,
          };
          this.tool.stage = chapters.length;
          this.tool.task = task;
          this.tool.tool = tool;
          this.$nextTick(() => {
            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 _array = [];
        // for (var i = 0; i < 5; i++) {
        //   this.option.series[0].data[i].value = this.randomNum(30, 80);
        //   // _array.push(this.randomNum(0, 80));
        // }
        this.option.series[0].data[0].value = this.chartJson.wang
        this.option.series[0].data[1].value = this.chartJson.si
        this.option.series[0].data[2].value = this.chartJson.dian
        this.option.series[0].data[3].value = this.chartJson.xuan
        this.option.series[0].data[4].value = this.chartJson.other

        // this.option.series[0].data[0].value = _array;
        // 初始化雷达图
        this.chartObj = chartObj;
        this.chartObj.setOption(this.option);
      });
      let _this = this;
      window.addEventListener("resize", () => {
        if (_this.chartObj) {
          _this.chartObj.resize();
        }
      });
    },
  },
  watch: {
    courseid(newValue, oldValue) {
      this.getInfo();
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style scoped>
.ci_info {
  font-size: 14px;
}

.ci_info_box {
  width: 90%;
  margin: 0 auto;
  display: flex;
}

.ci_info_box span {
  white-space: nowrap;
}

.ci_info_box span+span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ci_info_box+.ci_info_box {
  margin-top: 10px;
}

.ci_info_box2 {
  width: 90%;
  margin: 0 auto;
  display: flex;
  margin-top: 10px;
  font-size: 16px;
  justify-content: space-between;
  color: rgb(15, 120, 187);
  align-items: center;
}

.ci_info_box2 div {
  display: flex;
  align-items: center;
}

.ci_info_box2 span {
  color: rgb(234, 146, 59);
  width: 30px;
  font-size: 25px;
  text-align: center;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>