<template>
  <div class="data_body" v-resize="resize">
    <div class="title">
      <span>{{ lang.ssCorrectCount }}</span>
      <el-button type="primary" @click="getA()">{{ lang.ssViewStudent }}</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>
    <el-dialog
      :title="lang.ssView"
      :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">{{ lang.ssQuestionNum.replace(/\*/g, 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;font-size:16px;">
              {{ lang.ssCorrectStudents }}
            </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 @click="dialogVisible = false"
          >{{ lang.ssCloseBtn }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { myMixin } from "@/mixins/mixin.js"

export default {
  mixins: [myMixin],
  props: ["people"],
  data() {
    return {
      person: [],
      timu: [],
      Aa: "",
      count: 0,
      dialogVisible: false,
      chartObj: null,
      ooption: {
        xdata: [],
        sdata: [],
      },
      option: {
        tooltip: {
          trigger: "item",
          formatter: this.lang.ssQuestionTooltip,
        },
        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",
            },
          },
        ],
      },
    };
  },
  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.people;
      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.people.length; i++) {
          this.ooption.xdata.push(i + 1);
          this.ooption.sdata.push(0);
        }

        for (var j = 0; j < this.people.length; j++) {
          this.person[j] = this.people[j].rightPerson;
          this.ooption.sdata[j] = this.people[j].rightPerson.length;
        }
        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.people.length; i++) {
      this.ooption.xdata.push(i + 1);
      this.ooption.sdata.push(0);
    }

    for (var j = 0; j < this.people.length; j++) {
      this.person[j] = this.people[j].rightPerson;
      this.ooption.sdata[j] = this.people[j].rightPerson.length;
    }
    this.setChart(this.ooption);
  },
};
</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: #454545 !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 {
  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;
  background: #fff;
  color: #0061ff;
  border: 1px solid #0061ff;
}

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