<template>
  <div>
    <div class="sd_name">
      <span>学生姓名:</span>
      <span>{{studentInfo.sName}}</span>
    </div>

    <div class="sd_class">
      <div class="sd_tTitle">課堂表現</div>
      <div class="sd_module">
        <div class="sd_module_content">
          <div class="sd_module_children">
            <span class="s">課堂活動</span>
            <span class="s2">
              <span>{{randomNum(1,20)}}</span>次
            </span>
            <span>已經擊敗99%學生</span>
          </div>
          <div class="sd_module_count">
            <span>挑戰:</span>
            <span>{{randomNum(1,5)}}</span>次
          </div>
          <div class="sd_module_count">
            <span>選項挑戰:</span>
            <span>{{randomNum(1,5)}}</span>次
          </div>
          <div class="sd_module_count">
            <span>分數挑戰:</span>
            <span>{{randomNum(1,5)}}</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 class="sd_module_count">
            <span>作品上傳:</span>
            <span>{{randomNum(1,20)}}</span>张
          </div>
          <div class="sd_module_count">
            <span>視頻上傳:</span>
            <span>{{randomNum(1,5)}}</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>{{randomNum(1,60)}}</span>秒
            </span>
            <span>已經擊敗99%學生</span>
          </div>
          <div class="sd_module_count">
            <span>計時:</span>
            <span>{{randomNum(1,5)}}</span>分
          </div>
          <div class="sd_module_count">
            <span>小組計分:</span>
            <span>{{randomNum(1,10)}}</span>次
          </div>
          <div class="sd_module_count">
            <span>個人計分:</span>
            <span>{{randomNum(1,10)}}</span>次
          </div>
        </div>
      </div>
      <div class="sd_module_data">
        <div
          id="charts_canvas"
          class="echart"
          style="width: 100%; height: 100%; margin: 0 0 0 1rem"
        ></div>
      </div>
    </div>
    <div class="sd_class">
      <div class="sd_tTitle">個人能力</div>
      <div class="sd_person_button">
        <span @click="setType(1)" :class="{'active':type == 1}">語文</span>
        <span @click="setType(2)" :class="{'active':type == 2}">數學</span>
        <span @click="setType(3)" :class="{'active':type == 3}">英語</span>
        <span @click="setType(4)" :class="{'active':type == 4}">資訊科技</span>
        <span @click="setType(5)" :class="{'active':type == 5}">藝術</span>
        <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 {
  props: ["studentInfo"],
  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: "60%",
            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: "总结其它动物保护自己" },
              { 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, "90%"],
          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: "作业提交" },
          { 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_tTitle {
  width: 100%;
  background: rgb(199, 217, 212);
  padding: 10px 10px;
  border-radius: 5px;
  border: 1px solid rgb(165, 182, 177);
  font-size: 18px;
  font-weight: 500;
  margin: 20px 0;
  box-sizing: border-box;
  font-weight: 600;
}
.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%;
}

.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>
