<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="tips">
      <img src="../../../assets/tips.png" alt />
      <span>
        提示：目前答对
        <span>正确选项{{ Aa }}</span
        >的，有<span>{{ count }}</span
        >位同学！要继续往“实践探究”方向继续加强学习哦！
      </span>
    </div>
    <div class="c_box">
      <div class="correct">
        <span
          >答题人数<span>{{ people.length + "人" }}</span></span
        >
      </div>
      <div class="correct">
        <span
          >正确率为<span>{{
            people.length > 0 ? Math.round(count / people.length * 10000) / 10000 * 100 + "%" : 0
          }}</span></span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["problemJson", "answer", "people"],
  data() {
    return {
      Aa: "",
      count: 0,
      chartObj: null,
      ooption: {
        xdata: ["A", "B", "C", "D"],
        sdata: [0, 0, 0, 0],
      },
      option: {
        tooltip: {
          trigger: "item",
        },
        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.Aa = "";
      if (this.answer.indexOf(1) != -1) {
        this.Aa += "A";
      }
      if (this.answer.indexOf(2) != -1) {
        this.Aa += "B";
      }
      if (this.answer.indexOf(3) != -1) {
        this.Aa += "C";
      }
      if (this.answer.indexOf(4) != -1) {
        this.Aa += "D";
      }

      if (this.people.length) {
        this.count = 0;
        for (var i = 0; i < this.people.length; i++) {
          var a = JSON.parse(this.people[i].upload);
          if (a.join(",") == this.answer.join(",")) {
            this.count++;
          }
        }
      } else {
        this.count = 0;
      }

      this.ooption = {
        xdata: ["A", "B", "C", "D"],
        sdata: [],
      };

      this.ooption.sdata[0] = this.problemJson.A;
      this.ooption.sdata[1] = this.problemJson.B;
      this.ooption.sdata[2] = this.problemJson.C;
      this.ooption.sdata[3] = this.problemJson.D;
      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.Aa = "";
    if (this.answer.indexOf(1) != -1) {
      this.Aa += "A";
    }
    if (this.answer.indexOf(2) != -1) {
      this.Aa += "B";
    }
    if (this.answer.indexOf(3) != -1) {
      this.Aa += "C";
    }
    if (this.answer.indexOf(4) != -1) {
      this.Aa += "D";
    }
    if (this.people.length) {
      this.count = 0;
      for (var i = 0; i < this.people.length; i++) {
        var a = JSON.parse(this.people[i].upload);
        if (a.join(",") == this.answer.join(",")) {
          this.count++;
        }
      }
    } else {
      this.count = 0;
    }

    this.ooption.sdata[0] = this.problemJson.A;
    this.ooption.sdata[1] = this.problemJson.B;
    this.ooption.sdata[2] = this.problemJson.C;
    this.ooption.sdata[3] = this.problemJson.D;
    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>
