<template>
  <div class="data_body">
    <div class="title">
      <span>答对数量</span>
    </div>
    <div style="width: 100%; height: 400px">
      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
      <div
        id="charts_canvas"
        class="echart"
        style="width: 100%; height: 100%; margin: 0 0 0 1rem"
      ></div>
    </div>
    <div class="c_box">
      <div class="correct">
        <span
          >答题人数<span>{{ people.length + "人" }}</span></span
        >
      </div>
      <div class="correct">
        <span
          >全部答对人数为<span>{{
            count+'人'
          }}</span></span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["problemJson", "answer", "people"],
  data() {
    return {
      Aa: "",
      count: 0,
      chartObj: null,
      ooption: {
        xdata: [],
        sdata: [],
      },
      option: {
        tooltip: {
          trigger: "item",
          formatter: "第{b0}题: 答对{c0}人",
        },
        grid: {
          left: "1%",
          bottom: "10%",
          top: "15%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 1],
          minInterval: 1,
          axisLine: {
            onZero: false,
          },
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            textStyle: {
              color: "#000",
            },
          },
        },

        series: [
          {
            type: "bar",
            data: [],
            showBackground: true,
            barWidth: "50px",
            label: {
              show: true,
              position: "top",
              color: "#2e2e2e",
            },
          },
        ],
      },
    };
  },
  methods: {
    setChart(option) {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#charts_canvas")
        );
        this.option.xAxis.data = option.xdata;
        this.option.series[0].data = option.sdata;
        // 初始化雷达图
        this.chartObj = chartObj;
        this.chartObj.setOption(this.option);
      });
    },
  },
  watch: {
    problemJson(val) {
      this.ooption = {
        xdata: [],
        sdata: [],
      };
      for (var i = 0; i < this.problemJson; i++) {
        this.ooption.xdata.push(i + 1);
        this.ooption.sdata.push(0);
      }
      if (!this.chartObj) {
        this.setChart(this.ooption);
      } else {
        this.option.yAxis.data = this.ooption.xdata;
        this.option.series[0].data = this.ooption.sdata;
        this.chartObj.setOption(this.option);
      }
      this.$forceUpdate();
    },
  },
  mounted() {
    this.ooption = {
      xdata: [],
      sdata: [],
    };
    for (var i = 0; i < this.problemJson; i++) {
      this.ooption.xdata.push(i + 1);
      this.ooption.sdata.push(0);
    }
    let count = 0;
    for (var i = 0; i < this.people.length; i++) {
      let el = JSON.parse(this.people[i].upload);
      let count2 = 0;
      for (var j = 0; j < this.problemJson; j++) {
        if (this.answer[j] == el[j]) {
          this.ooption.sdata[j]++;
          count2++;
        }
      }
      if (count2 == this.problemJson) {
        count++;
      }
    }
    this.count = count;
    this.setChart(this.ooption);
    var _this = this;
    window.addEventListener("resize", () => {
      if (_this.chartObj) {
        _this.chartObj.resize();
      }
    });
  },
};
</script>

<style scoped>
.data_body {
  height: 500px;
  /* display: flex; */
  position: relative;
  border-radius: 5px;
  /* border: 1px solid #eee; */
  margin: 10px auto;
  box-sizing: border-box;
  padding: 10px;
  width: 95%;
  background: #fff;
}
.data_body .title {
  /* position: absolute;
  top: 20px;
  left: 20px; */
}

.tips {
  display: flex;
  align-items: flex-start;
  width: 100%;
  background: #eee;
  padding: 6px 6px;
  box-sizing: border-box;
  border-radius: 5px;
  color: #171717;
}

.tips img {
  margin-right: 5px;
}

.tips span span {
  color: #077aff;
  margin: 0 3px;
}
.c_box {
  margin-top: 10px;
  display: flex;
}
.correct + .correct {
  margin-left: 10px;
}
.correct {
  display: flex;
  align-items: flex-start;
  width: fit-content;
  background: #eee;
  padding: 6px 6px;
  box-sizing: border-box;
  border-radius: 5px;
  color: #171717;
}
.correct span span {
  color: #077aff;
  margin: 0 3px;
}
</style>
