<template>
  <div class="data_body" v-resize="resize">
    <div class="title">
      <span>答对数量</span>
      <el-button type="primary" @click="getA()">查看学生</el-button>
    </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 class="correct">
        <span>正确率为<span>{{
        people.length > 0 ? countA(count,people) : 0
        }}</span></span>
      </div>
    </div>
    <el-dialog title="查看" :visible.sync="dialogVisible" :append-to-body="true" width="900px" :before-close="handleClose"
      class="dialog_diy">
      <div>
        <div v-for="(item, index) in timu" :key="index" class="borderB">
          <div class="s_title">第{{index+1}}题</div>
          <div class="stuBox" style="margin-top: 20px;align-items: flex-start;">
            <div style="margin: 0 0 10px 0; min-width: 70px; color: #adadad">
              答对同学：
            </div>
            <div class="stuBox" style="flex-wrap: wrap">
              <span class="studentClass" v-for="(pe, pi) in person[index]" :key="index + '-' + pi">{{ pe }}</span>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Big from 'big.js'

export default {
  props: ["problemJson", "answer", "people"],
  data() {
    return {
      person: [],
      timu: [],
      Aa: "",
      count: 0,
      dialogVisible: false,
      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",
            },
          },
        ],
      },
    };
  },
  computed: {
    countA: function() {
      return function(count,people)  {
        return (Math.round(new Big(count) / new Big(people.length) * 10000) / 10000 * 100).toFixed(2) + "%";
      }
    }
  },
  directives: {  // 使用局部注册指令的方式
    resize: { // 指令的名称
      bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
        let width = '', height = '';
        function isReize() {
          const style = document.defaultView.getComputedStyle(el);
          if (width !== style.width || height !== style.height) {
            binding.value();  // 关键
          }
          width = style.width;
          height = style.height;
        }
        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__);
      }
    }
  },
  methods: {
    handleClose(done) {
      done();
    },
    getA() {
      this.timu = this.problemJson;
      this.dialogVisible = true;
    },
    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);
      });
    },
    resize(){
      if (this.chartObj) {
        this.chartObj.resize();
      }
    }
  },
  // watch: {
  //   problemJson(val) {

  //   },
  // },
  watch: {
    people: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.ooption = {
          xdata: [],
          sdata: [],
        };
        this.person = []
        for (var i = 0; i < this.problemJson.length; i++) {
          this.ooption.xdata.push(i + 1);
          this.ooption.sdata.push(0);
          this.person[i] = []
        }
        let count = 0;
        for (var i = 0; i < this.people.length; i++) {
          let el = this.people[i].works.split(",");
          let count2 = 0;
          for (var j = 0; j < this.problemJson.length; j++) {
            if (this.problemJson[j] == el[j]) {
              this.person[j].push(this.people[i].sName)
              this.ooption.sdata[j]++;
              count2++;
            }
          }
          if (count2 == this.problemJson.length) {
            count++;
          }
        }
        console.log(this.person);
        this.count = count;
        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();
      }
    },
    problemJson: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.ooption = {
          xdata: [],
          sdata: [],
        };
        this.person = []
        for (var i = 0; i < this.problemJson.length; 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 = this.people[i].works.split(",");
          let count2 = 0;
          this.person[i] = []
          for (var j = 0; j < this.problemJson.length; j++) {
            if (this.problemJson[j] == el[j]) {
              this.person[i].push(this.people[i].sName)
              this.ooption.sdata[j]++;
              count2++;
            }
          }
          if (count2 == this.problemJson.length) {
            count++;
          }
        }
        this.count = count;
        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: [],
    };
    this.person = []
    for (var i = 0; i < this.problemJson.length; 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 = this.people[i].works.split(",");
      let count2 = 0;
      this.person[i] = []
      for (var j = 0; j < this.problemJson.length; j++) {
        if (this.problemJson[j] == el[j]) {
          this.person[i].push(this.people[i].sName)
          this.ooption.sdata[j]++;
          count2++;
        }
      }
      if (count2 == this.problemJson.length) {
        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; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.dialog_diy>>>.el-dialog__header,
.dialog_diy1>>>.el-dialog__header {
  background: #002e81 !important;
  padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title,
.dialog_diy1>>>.el-dialog__title {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn,
.dialog_diy1>>>.el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close,
.dialog_diy1>>>.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover,
.dialog_diy1>>>.el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy1>>>.el-dialog__body {
  padding: 0;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer,
.dialog_diy1>>>.el-dialog__footer {
  background: #fafafa;
}

.s_title {
  /* margin-top: 10px; */
  font-size: 18px;
  margin-bottom: 10px;
  word-break: break-word;
  /* min-width: calc(100% / 2 - 200px); */
}

.stuBox {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: center;
}

.studentClass {
  background: #46a1eb;
  color: #fff;
  width: 90px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 5px;
  margin: 0 15px 0 0;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  text-overflow: ellipsis;
  font-size: 16px;
  margin-bottom: 10px;
}

.borderB {
  margin-bottom: 10px;
  border-bottom: 1px solid #d8d8d8;
}
</style>
