<template>
  <div>
    <div style="" class="cdr_box">
      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
      <div id="charts_canvas1" class="echart"></div>
      <div id="charts_canvas2" class="echart"></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(35, 91, 188);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 {
  data() {
    return {
      chartObj1: null,
      chartObj2: null,
      chartObj3: null,
      tableHeight: 0,
      tdata: [],
      option1: {
        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: ["阶段1", "阶段2", "阶段3", "阶段4", "阶段5"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "个人完成度",
            type: "line",
            areaStyle: {},
            data: [0, 0, 0, 0, 0],
            label: {
              show: true,
            },
          },
          {
            name: "班级平均完成度",
            type: "line",
            areaStyle: {},
            data: [0, 0, 0, 0, 0],
            label: {
              show: true,
            },
          },
        ],
      },
      option2: {
        title: {
          text: "项目活跃度:不同任务的学习时间占比",
          textStyle: {
            fontSize: 13,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        grid: {
          left: "15%",
          right: "0%",
          bottom: "15%",
          top: "15%",
        },
        xAxis: {
          type: "category",
          data: ["阶段1", "阶段2", "阶段3", "阶段4", "阶段5"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "任务1",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0],
          },
          {
            name: "任务2",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0],
          },
          {
            name: "任务3",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0],
          },
          {
            name: "任务4",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0],
          },
          {
            name: "任务5",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0],
          },
        ],
      },
    };
  },
  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;
      }
    },
    setChart() {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj1 = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#charts_canvas1")
        );
        let _array1 = [];
        let _array2 = [];
        for (var i = 0; i < 5; i++) {
          //   this.option.series[0].data[i].value = this.randomNum(30, 80);
          _array1.push(this.randomNum(50, 100));
          _array2.push(this.randomNum(50, 100));
        }
        this.option1.series[0].data = _array1;
        this.option1.series[1].data = _array2;

        const chartObj2 = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#charts_canvas2")
        );
        let _array21 = [];
        let _array22 = [];
        let _array23 = [];
        let _array24 = [];
        let _array25 = [];
        for (var i = 0; i < 5; i++) {
          //   this.option.series[0].data[i].value = this.randomNum(30, 80);
          _array21.push(this.randomNum(2, 20));
          _array22.push(this.randomNum(2, 20));
          _array23.push(this.randomNum(2, 20));
          _array24.push(this.randomNum(2, 20));
          _array25.push(this.randomNum(2, 20));
        }
        this.option2.series[0].data = _array21;
        this.option2.series[1].data = _array22;
        this.option2.series[2].data = _array23;
        this.option2.series[3].data = _array24;
        this.option2.series[4].data = _array25;
        this.chartObj1 = chartObj1;
        this.chartObj1.setOption(this.option1);
        this.chartObj2 = chartObj2;
        this.chartObj2.setOption(this.option2);
        this.tdata = [];
        for (var i = 0; i < 5; i++) {
          var _rate = this.randomNum(3, 5);
          var _rate1 = this.randomNum(3, 5);
          var _rate2 = this.randomNum(3, 5);
          var _rate3 = this.randomNum(3, 5);
          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.chartObj1) {
          _this.chartObj1.resize();
          _this.chartObj2.resize();
          _this.setTableHeight();
        }
      });
    },
    sortId(a, b) {
      return b.ratez - a.ratez;
    },
    setTableHeight() {
      this.tableHeight =
        window.innerHeight - this.$refs.table.offsetHeight - 190;
      // 监听窗口大小变化
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.setChart();
    });
  },
};
</script>

<style scoped>
.cdr_box {
  width: calc(100% - 5px);
  height: calc(100%);
  display: flex;
  justify-content: space-between;
}
.echart {
  height: 100%;
  width: calc(100% / 3 - 5px);
}
.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;
}
</style>