<template>
  <div>
    <div class="sd_class">
      <div class="sd_module">
        <div class="sd_module_content">
          <div class="sd_module_children">
            <span class="s">课堂时长</span>
            <span class="s2">
              <span>{{randomNum(1,15)}}</span>时
              <span>{{randomNum(1,60)}}</span>分
              <span>{{randomNum(1,60)}}</span>秒
            </span>
            <span>已经击败99%教师</span>
          </div>
        </div>
        <div class="sd_module_content">
          <div class="sd_module_children">
            <span class="s">课堂互动</span>
            <span class="s2">
              <span>{{randomNum(1,10)}}</span>次
            </span>
            <span>已经击败99%教师</span>
          </div>
        </div>

        <div class="sd_module_content">
          <div class="sd_module_children">
            <span class="s">提交作业</span>
            <span class="s2">
              <span>{{randomNum(1,15)}}</span>次
            </span>
            <span>已经击败99%教师</span>
          </div>
        </div>
      </div>
    </div>
    <div class="sd_module_data">
      <span class="sdddtitle">数据统计</span>
      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%;"></div>
    </div>
    <div class="sd_class sd_class2">
       <span class="sdddtitle">学生个人能力</span>
      <!-- <div class="sd_person_button">
        <span @click="setType(6)" :class="{'active':type == 6}">学生个人能力</span>
      </div> -->
      <div class="sd_person_data">
        <div
          id="person_canvas1"
          class="echart"
          style="width: 50%; height: 100%; margin: 0 0 0 1rem"
        ></div>
        <div
          id="person_canvas2"
          class="echart"
          style="width: 50%; height: 100%; margin: 0 0 0 1rem"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 6,
      chartObj: null,
      chartObj2: null,
      chartObj3: null,
      ooption: [],
      option: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "50",
          top: "center",
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["65%", "50%"],
            label: {
              color: "inherit",
              formatter: "{b|{b}：} {d}%  ",
              rich: {
                b: {
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
              },
            },
            data: [
              { value: 0, name: "学习时间" },
              { value: 0, name: "自我介绍" },
              { value: 0, name: "提交活动表" },
              { value: 0, name: "讨论交流" },
              { value: 0, name: "作业提交" },
              { value: 0, name: "能力测试" },
              { value: 0, name: "自我评价调查问卷" },
              { value: 0, name: "课程满意度调查问卷" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      data: [],
      //const colors = ['red', 'blue', 'green', 'purple'];
      option2: {
        //color:colors,
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "50",
          top: "center",
        },
        series: {
          type: "sunburst",
          data: [],
          radius: [20, "80%"],
          itemStyle: {
            borderRadius: 7,
            borderWidth: 2,
          },
          label: {
            show: true,
          },
        },
      },
      option3: {
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
          boundaryGap: false,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: [
            "信息应用意识",
            "信息安全意识",
            "信息感知意识",
            "信息社会责任",
            "信息法律法规",
            "信息应用技能",
            "信息科学知识",
            "信息思维",
            "信息行为",
          ],
          axisLine: {
            show: false,
          },
        },
        grid: {
          left: 100,
          bottom: 50,
          right: 30,
          top: 50,
        },
        series: [
          {
            name: "Punch Card",
            type: "scatter",
            symbolSize: function (val) {
              return val[2] * 2;
            },
            data: [],
            animationDelay: function (idx) {
              return idx * 5;
            },
          },
        ],
      },
    };
  },
  methods: {
    setChart() {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#charts_canvas")
        );
        var optionB = [
          { value: this.randomNum(0, 300), name: "学习时间" },
          { value: this.randomNum(0, 300), name: "自我介绍" },
          { value: this.randomNum(0, 300), name: "能力闯关" },
          { value: this.randomNum(0, 300), name: "提交活动表" },
          { value: this.randomNum(0, 300), name: "讨论交流" },
          { value: this.randomNum(0, 300), name: "作业提交" },
          { value: this.randomNum(0, 300), name: "能力测试" },
          { value: this.randomNum(0, 300), name: "自我评价调查问卷" },
          { value: this.randomNum(0, 300), name: "课程满意度调查问卷" },
        ];
        this.option.series[0].data = optionB;
        const chartObj2 = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#person_canvas1")
        );
        this.option2.series.data = [
          {
            name: "信息意识",
            value: 15,
            children: [
              {
                name: "信息应用意识",
                value: this.randomNum(1, 5),
              },
              {
                name: "信息安全意识",
                value: this.randomNum(1, 5),
              },
              {
                name: "信息感知意识",
                value: this.randomNum(1, 5),
              },
            ],
          },
          {
            name: "信息社会责任",
            value: 15,
            children: [
              {
                name: "信息伦理道德",
                value: this.randomNum(1, 5),
              },
              {
                name: "信息法律法规",
                value: this.randomNum(1, 10),
              },
            ],
          },
          {
            name: "信息知识与技能",
            value: 15,
            children: [
              {
                name: "信息应用技能",
                value: 5,
              },
              {
                name: "信息科学知识",
                value: 10,
              },
            ],
          },
          {
            name: "信息思维与行为",
            value: 15,
            children: [
              {
                name: "信息思维",
                value: this.randomNum(1, 10),
              },
              {
                name: "信息行为",
                value: this.randomNum(1, 5),
              },
            ],
          },
        ];
        const chartObj3 = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#person_canvas2")
        );
        let data = [];
        for (var i = 1; i < 10; i++) {
          for (var j = 0; j < 9; j++) {
            var x = i;
            var y = j;
            var z = this.randomNum(0, 10);
            data.push([x, y, z]);
          }
        }
        this.option3.series[0].data = data;
        // console.log(this.option.series[0].data);
        // 初始化雷达图
        this.chartObj = chartObj;
        this.chartObj2 = chartObj2;
        this.chartObj3 = chartObj3;
        this.chartObj.setOption(this.option);
        this.chartObj2.setOption(this.option2);
        this.chartObj3.setOption(this.option3);
      });
    },
    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;
      }
    },

    setType(type) {
      this.type = type;
      this.option2.series.data = [
        {
          name: "信息意识",
          value: 15,
          children: [
            {
              name: "信息应用意识",
              value: this.randomNum(1, 5),
            },
            {
              name: "信息安全意识",
              value: this.randomNum(1, 5),
            },
            {
              name: "信息感知意识",
              value: this.randomNum(1, 5),
            },
          ],
        },
        {
          name: "信息社会责任",
          value: 15,
          children: [
            {
              name: "信息伦理道德",
              value: this.randomNum(1, 5),
            },
            {
              name: "信息法律法规",
              value: this.randomNum(1, 10),
            },
          ],
        },
        {
          name: "信息知识与技能",
          value: 15,
          children: [
            {
              name: "信息应用技能",
              value: 5,
            },
            {
              name: "信息科学知识",
              value: 10,
            },
          ],
        },
        {
          name: "信息思维与行为2",
          value: 15,
          children: [
            {
              name: "信息思维",
              value: this.randomNum(1, 10),
            },
            {
              name: "信息行为",
              value: this.randomNum(1, 5),
            },
          ],
        },
      ];
      this.chartObj2.setOption(this.option2);
      let data = [];
      for (var i = 1; i < 10; i++) {
        for (var j = 0; j < 9; j++) {
          var x = i;
          var y = j;
          var z = this.randomNum(0, 10);
          data.push([x, y, z]);
        }
      }
      this.option3.series[0].data = data;
      this.chartObj3.setOption(this.option3);
    },
  },
  mounted() {
    this.setChart();
  },
};
</script>

<style scoped>
.sd_name {
  font-size: 20px;
}

.sd_class {
  width: 100%;
}

.sd_class2 {
  background: #fff;
  margin: 20px 0;
  border-radius: 5px;
  padding: 20px 0;
  box-sizing: border-box;
  position: relative;
}

.sd_module {
  display: flex;
  justify-content: space-between;
}
.sd_module_content {
  width: calc(100% / 3 - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sd_module_content:nth-child(1) .sd_module_children {
  background: rgb(232, 141, 105);
}
.sd_module_content:nth-child(2) .sd_module_children {
  background: rgb(87, 156, 238);
}
.sd_module_content:nth-child(3) .sd_module_children {
  background: rgb(112, 221, 232);
}
.sd_module_children {
  width: 100%;
  height: 130px;
  position: relative;
  border-radius: 5px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sd_module_children .s {
  position: absolute;
  font-size: 16px;
  top: 10px;
  left: 10px;
}
.sd_module_children .s2 span {
  font-size: 45px;
  margin-right: 3px;
}

.sd_module_count {
  font-size: 18px;
  margin: 20px 0 0 0;
}
.sd_module_count {
  display: flex;
  align-items: center;
}
.sd_module_count span:nth-child(1) {
  width: 100px;
  text-align: right;
}
.sd_module_count span:nth-child(2) {
  width: 100px;
  text-align: center;
  color: rgb(214, 132, 150);
}
.sd_module_data {
  height: 700px;
  width: 100%;
  background: #fff;
  margin: 20px 0;
  border-radius: 5px;
  position: relative;
}

.sdddtitle {
  border-bottom: 2px solid rgb(30, 146, 255);
  color: rgb(30, 146, 255);
  position: absolute;
  top: 20px;
  left: 40px;
  font-size: 18px;
}

.sd_person_data {
  height: 500px;
  width: 100%;
  display: flex;
}
.sd_person_button {
  font-size: 16px;
  display: flex;
}

.sd_person_button span {
  margin-left: 20px;
  padding: 0 0 6px;
  cursor: pointer;
}

.sd_person_button .active {
  border-bottom: 2px solid rgb(30, 146, 255);
  color: rgb(30, 146, 255);
}
</style>
