<template>
  <div v-loading="isloading">
    <div
      style="width: 95%; height: calc(100% - 40px); margin: 20px auto"
      ref="innder"
    >
      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
      <!-- <div
        id="charts_canvas"
        class="echart"
        style="width: 100%; height: 100%"
      ></div> -->
      <div id="charts_canvas3" class="echart" ref="table">
        <!-- <div style="font-size: 13px; font-weight: 600">
          项目综合评估：各个阶段评价平均分
        </div> -->
        <el-table
          class="table"
          :data="tdata"
          :height="tableHeight"
          :fit="true"
          style="width: 100%"
          :header-cell-style="{
            background: '#fff',
            fontSize: '12px',
            fontWeight: 'unset',
            padding: '0',
            border: 'unset',
          }"
          :row-class-name="tableRowClassName"
          header-row-class-name="header_row_class"
        >
          <el-table-column label="排名" min-width="29px" align="center">
            <template slot-scope="scope">
              <div style="font-weight: 600">{{ scope.$index + 1 }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            min-width="39px"
            align="center"
          >
            <template slot-scope="scope">
              <div style="color: rgb(96, 96, 96); font-weight: 600">
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="rate"
            label="完成度"
            min-width="39px"
            align="center"
            ><template slot-scope="scope">
              <div style="color: rgb(35, 91, 188); font-weight: 600">
                {{ scope.row.rate }}
              </div>
            </template></el-table-column
          >
          <el-table-column
            prop="rate1"
            label="活跃度"
            min-width="39px"
            align="center"
            ><template slot-scope="scope">
              <div style="color: rgb(35, 91, 188); font-weight: 600">
                {{ scope.row.rate1 }}
              </div>
            </template></el-table-column
          >
          <el-table-column
            prop="rate2"
            label="参与度"
            min-width="39px"
            align="center"
            ><template slot-scope="scope">
              <div style="color: rgb(35, 91, 188); font-weight: 600">
                {{ scope.row.rate2 }}
              </div>
            </template></el-table-column
          >
          <el-table-column
            prop="rate3"
            label="综合表现"
            min-width="49px"
            align="center"
            ><template slot-scope="scope">
              <div style="color: rgb(233, 140, 148); font-weight: 600">
                {{ scope.row.rate3 }}
              </div>
            </template></el-table-column
          >
          <!-- <el-table-column prop="ratez" label="综合" min-width="29px" align="center"><template slot-scope="scope">
              <div style="color: rgb(233, 140, 148);font-weight: 600">{{ scope.row.ratez }}</div>
            </template></el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["userid", "courseid"],
  data() {
    return {
      isloading: false,
      workJson: [],
      chartObj: null,
      tdata: [],
      tableHeight: 0,
      option: {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
        },
        grid: {},
        series: [
          {
            bottom: "10%",
            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: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row row_class";
      } else {
        return "row_class";
      }
    },
    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 _pWork = res.data[3];
          let _allWork = res.data[4];
          let _allComment = res.data[5];
          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, ishuo: 0, isCan: 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 < _allComment.length; k++) {
                if (_allComment[k].stage == i) {
                  workJson[i].ishuo++;
                }
              }
            }
          }
          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 = 5;
            } else if (workJson[i].tool === 0) {
              workJson[i].work = 5;
            } else {
              workJson[i].work = Math.round(
                ((workJson[i].ptool / workJson[i].tool) * 100) / 20
              );
            }
            if (workJson[i].ptool) {
              workJson[i].isCan = 1;
            }
          }
          this.workJson = 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 _array = [];
        // for (var i = 0; i < 6; 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 = _array;
        // // 初始化雷达图
        // this.chartObj = chartObj;
        // this.chartObj.setOption(this.option);

        this.tdata = [];
        for (var i = 0; i < this.workJson.length; i++) {
          var _rate = this.workJson[i].work < 3 ? 3 : this.workJson[i].work;
          var _rate1 = this.workJson[i].ishuo ? 5 : 3;
          var _rate2 = this.workJson[i].isCan ? 5 : 3;
          var _rate3 = (_rate + _rate1 + _rate2) / 3;
          var _ratez = (_rate + _rate1 + _rate2 + _rate3) / 4;
          this.tdata.push({
            name: "阶段" + (i + 1),
            rate: _rate.toFixed(1),
            rate1: _rate1.toFixed(1),
            rate2: _rate2.toFixed(1),
            rate3: _rate3.toFixed(1),
            ratez: _ratez.toFixed(1),
          });
        }
        this.tdata.sort(this.sortId);
        this.$nextTick(() => {
          this.setTableHeight();
        });
      });
      // let _this = this;
      // window.addEventListener("resize", () => {
      //   if (_this.chartObj) {
      //     _this.chartObj.resize();
      //   }
      // });
    },
    sortId(a, b) {
      return b.ratez - a.ratez;
    },
    setTableHeight() {
      this.tableHeight = this.$refs.innder.offsetHeight;
      // window.innerHeight - this.$refs.table.offsetHeight - 600;
      // 监听窗口大小变化
    },
  },
  watch: {
    userid(newValue, oldValue) {
      this.getInfo();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getInfo();
    });
  },
};
</script>

<style scoped>
.el-table >>> .even_row {
  background-color: rgb(238, 243, 250) !important;
}

.el-table >>> .row_class td {
  padding: 8px 0;
  border: unset;
}

.el-table >>> .row_class {
  background: rgb(249, 249, 249);
}

.el-table >>> .row_class .cell {
  padding: 0;
  white-space: nowrap;
  font-size: 12px;
}

.el-table >>> .header_row_class .cell {
  padding: 0;
  white-space: nowrap;
}

.el-table::before {
  height: 0;
}
</style>