<!-- 活动解析 -->
<template>
  <div>
    <!-- table 表格 -->
    <el-row :gutter="20" class="main-items">
      <el-col :span="20" class="main">
        <el-row :gutter="20" class="main-header">
          <el-col :span="5">
            <div class="main-header-item">
              报错总次数:
              <span style="color:red;">{{GetTeacherWrongCount.allErrorCount}}次</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="main-header">
          <el-col :span="24">
            <div class="table">
              <div class="table-head">
                <div>时间</div>
                <div>学生</div>
                <div>科目</div>
                <div style="margin-left:40px;">查看报错详情</div>
              </div>
              <div class="tr" v-for="(v, k) of GetTeacherWrongCount.list" :key="k">
                <div class="tr-first" :class="{BgcColor:k%2 !== 1}">
                  <div>{{v.date}}</div>
                  <div>{{v.studentName}}</div>
                  <div>{{v.subject}}</div>
                  <div class="tr-seconds">
                    <span
                      @click="groupDetail(v)"
                      style="cursor: pointer;"
                      class="tr-second-check"
                    >查看详情</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 分页显示 -->
            <el-pagination
              background
              @size-change="handleSizeChange1"
              @current-change="pageChange1"
              :page-sizes="[10]"
              layout="total, prev, pager, next"
              :total="parseInt(errorWarningList.pages)"
              :hide-on-single-page="true"
            ></el-pagination>
            <div style="clear:both;"></div>
          </el-col>
        </el-row>
      </el-col>
         <el-col :span="20" class :offset="2">
            <div style="margin-top:200px; text-align:center;">
              <el-button @click="routerback()" type="success" round>返回</el-button>
            </div>
          </el-col>
    </el-row>
    <div class="showModel" @click="updateIsShowCarouselPictureModal()" v-if="NoAllotManagerModel">
      <div class="modal-cancel" @click="updateIsShowCarouselPictureModal()">X</div>
      <div class="detailinfo">
     
        <div class="detailImg">
          <img :src="BASE_URL + GetWrongDetail[0].pictureUrl" alt />
        </div>
        <div class="detailword">
          <div>
            <h1 class="tipsesson">错误原因:</h1>
            <span class="tipsessonWord">{{GetWrongDetail[0].errorReason}}</span>
          </div>
          <div class="timeAndteacher">
            <h2 class="managertip">{{GetWrongDetail[0].checker}}</h2>
            <div class="timeset">{{GetWrongDetail[0].checkDate}}</div>
            <div class="timesetImg">
              <img src="../../assets/img/pen.png" alt />
            </div>
          </div>
        </div>
        <div class="nextPrveBtn">
          <!-- 上一页 -->
          <!-- <div @click="Clickprvebtn" v-show='pictureIndex >0'  class="prvebtn"  style="height:50px;cursor:pointer;">
                  <img src="../../assets/img/prev_white.png" alt="">
                </div>
                   <div v-show='pictureIndex == 0'  class="prvebtn"  style="height:50px">
                  <img src="../../assets/img/prev_gray.png" alt="">
          </div>-->
          <!-- 张数 -->
          <!-- <div style="color:#ffffff; font-size:25px;margin-top:40px;">
                  <span>{{pictureIndex + 1}}</span><span style="color:#bbbbbb;">/{{errorDetailList.length}}</span>
          </div>-->
          <!-- 下一页 -->
          <!-- <div @click="ClickNextebtn" v-show='pictureIndex < errorDetailList.length - 1' class="Nextebtn"  style="height:50px;cursor:pointer;">
                  <img  src="../../assets/img/next_white.png" alt="">
                </div>
                <div v-show='pictureIndex == errorDetailList.length - 1'  class="Nextebtn" style="height:50px">
                  <img  src="../../assets/img/next_gray.png" alt="">
          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { IMG_BASE_URL, APPOR_BASE_URL } from "@/config";
export default {
  components: {},
  name: "actvResolveLabel",
  props: {},
  data() {
    return {
      BASE_URL: IMG_BASE_URL,
      accessToken: localStorage.getItem("accessToken"),
      NoAllotManagerModel: false, //token
      filters1: {
        pageNo: 1,
        pageSize: 10,
        teacherId:'',
        oneMonth:""
      },
      pictureIndex: 0
    };
  },
  created() {
    const teacherId = this.$route.query.teacherId;
    const oneMonth = this.$route.query.oneMonth;
    this.teacherId = teacherId;
     this.oneMonth = oneMonth;
  },
  watch: {},
  computed: {
    ...mapGetters(["errorWarningList","GetTeacherWrongCount","GetWrongDetail"])
  },
  methods: {
    ...mapActions(["setUser"]),
    // 去批改前分配老师
    async GeterrorWarningLists() {
      this.$store.dispatch("GetTeacherWrongCountInfo", {
        pageNo: this.filters1.pageNo,
        pageSize: this.filters1.pageSize,
        accessToken: this.accessToken,
        teacherId:this.teacherId,
        oneMonth:this.oneMonth,
      });
    },
    handleSizeChange1(val) {
      this.filters1.pageSize = val;
      this.GeterrorWarningLists();
    },
    pageChange1(val) {
      this.filters1.pageNo = val;
      this.GeterrorWarningLists();
    },
    updateIsShowCarouselPictureModal() {
      this.NoAllotManagerModel = false;
    },
    //报错详情
    groupDetail(str) {
      this.pictureIndex = 0;
      this.NoAllotManagerModel = true;
      this.$store.dispatch("GetWrongDetailInfo", {
        pictureId: str.pictureId,
        teacherId:this.teacherId,
        accessToken: this.accessToken
      });
    },
            // 回退
    routerback() {
      this.$router.back(-1);
    },
    // 下一页
    ClickNextebtn() {
      this.pictureIndex++;
      console.log(this.pictureIndex);
      // if (this.pictureIndex >= errorDetailList.list.length){
      //     return
      // }
    },
    // 上一页
    Clickprvebtn() {
      this.pictureIndex--;
      console.log(this.pictureIndex);
      // if (this.pictureIndex <= errorDetailList.list.length){
      //     return
      // }
    },
  },
  mounted() {
    console.log(this.pictureIndex);
    this.GeterrorWarningLists();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.showModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(5, 5, 5, 0.5);
  opacity: 1 !important;
  overflow: hidden !important;
  /* color: #fff; */
}
.modal-cancel {
  position: absolute;
  top: 20px;
  right: 40px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: rgba(66, 56, 56, 0.5);
  border-radius: 100px;
  font-size: 16;
  color: #eee;
  cursor: pointer;
}
.detailinfo {
  position: absolute;
  left: 50%;
  margin-left: -650px;
  top: 10%;
  width: 1300px;
  height: 1000px;
  /* background: #eee; */
  text-align: center;
  line-height: 50px;
  border-radius: 100px;
  font-size: 16;
  z-index: 9999;
  opacity: 1 !important;
  color: #000000;
  padding: 50px !important;
}
.detailImg {
  background: #000000;
  position: absolute;
  left: 0;
  top: 20px;
  width: 600px;
  height: 700px;
  text-align: center;
  line-height: 50px;
  border-radius: 15px;
  font-size: 16;
  color: rgb(0, 0, 0);
  opacity: 1 !important;
  /* cursor: pointer; */
}
.detailword {
  background: #eee;
  position: absolute;
  right: 0;
  top: 20px;
  width: 600px;
  height: 700px;
  text-align: center;
  line-height: 50px;
  border-radius: 15px;
  font-size: 16;
  color: #000000;
  opacity: 1 !important;
  /* cursor: pointer; */
}
.detailImg img {
  width: 600px;
  height: 700px;
  border-radius: 15px;
}
.tipsesson {
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  left: 10px;
  top: 20px;
}
.tipsessonWord {
  width: 100%;
  height: 400px;
  font-size: 14px;
  position: absolute;
  left: 10px;
  top: 50px;
  padding: 0 20px;
  line-height: 20px;
  text-align: left;
}
.BgcColor {
  background-color: #f7fbfc;
}
.managertip {
  font-size: 20px;
  font-weight: 700;
}
.timeAndteacher {
  height: 200px;
  position: absolute;
  right: 50px;
  bottom: 50px;
}
.nextPrveBtn {
  width: 400px;
  left: 50%;
  margin-left: -200px;
  height: 200px;
  position: absolute;
  bottom: 50px;
}
.timeset {
  color: #5de26c;
  font-size: 16px;
}
.Nextebtn {
  height: 100px;
  position: absolute;
  right: 50px;
  bottom: 50px;
}
.prvebtn {
  height: 100px;
  position: absolute;
  left: 50px;
  bottom: 50px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #52cc60 !important;
  color: #fff;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
ul {
  text-align: center;
  margin: 0 !important;
}
.aside {
  /* background-color: #fbfbfb; */
  margin-top: 16px;
  padding: 0;
  min-height: 880px;
}
.main {
  background-color: #fff;
  margin: 16px;
  padding: 0 !important;
  margin-left: 180px;
  min-height: 980px;
}
.table-aside {
  color: #666666;
  font-size: 18px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
el-table {
  color: #999999;
  font-size: 18px;
}
.main-items {
  color: #393939;
  text-align: center;
  line-height: 80px;
}
.main-header-item {
  font-size: 16px;
}
.model-manager {
  display: flex;
  justify-content: space-between;
  margin: 30px;
  color: #393939;
  font-size: 24px;
}
.main-header-link {
  color: #52cc60;
  font-size: 18px;
  margin-left: 10px;
  cursor: pointer;
  text-decoration: underline;
}
.el-select {
  width: 100px;
  margin: 0 5px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.input-with-new {
  border: 1px solid #cccccc;
  border-radius: 15px;
  height: 30px;
  line-height: 30px;
  padding: 10px;
  font-size: 12px;
  color: #eeeeee;
  width: 180px;
}
.active {
  background-color: #52cc60;
  color: #fff;
}
.el-input__inner {
  height: 32px;
}

.table-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  margin-left: 14px;
  cursor: pointer;
}
.table {
  width: 94.5%;
  border-top: 1px solid #e5e5e5;
  margin: 0 43px;
}
.table-head {
  margin-right: 6%;
  color: #999999;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads {
  margin-left: 15%;
  width: 60%;
  color: #3ab548;
  font-size: 14px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads > div {
  width: 13.528%;
}
.table-head > div {
  width: 13.528%;
}
.tr {
  width: 100%;
  color: #393939;
  text-align: center;
  /* font-weight: 700; */
  font-family: "PingFang-SC-Bold";
  font-size: 16px;
}
.tr-first {
  margin-right: 2%;
  display: flex;
  justify-content: space-around;
}
.tr-first > div {
  width: 14.528%;
}
.tr-s {
  display: flex;
  justify-content: space-around;
}
.tr-set {
  background-color: #fbfbfb;
  display: flex;
  justify-content: space-around;
  color: #393939;
  font-size: 12px;
  margin: 20px;
}
.tr-setNo {
  display: flex;
  justify-content: space-around;
  color: #000000f1;
  font-size: 16px;
  margin: 20px;
}
.tr-secon {
  font-size: 12px;
  text-align: center;
  word-wrap: break-word;
  width: 40px;
}
.tr-second {
  background-color: #fbfbfb;
  display: flex;
  color: #393939;
  font-size: 20px;
  word-wrap: break-word;
}
.tr-seconds {
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  margin: 0 50px;
  /* height: 30px; */
}
.width40 {
  width: 60px;
}
.tr-sw180 {
  width: 230px;
  text-align: center;
}
.tr-secondsA {
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  width: 200px;
}
.tr-w120 {
  width: 160px;
  text-align: left;
  display: inline-block;
  /*height: 80px;*/
  /*line-height: 80px;*/
}
.tr-second-check {
  color: #3ab548;
  font-size: 17px;
  text-decoration: underline;
}
.Online {
  display: inline-block;
}
.Onlinename {
  display: inline-block;
}
.tr-active {
  color: #3ab548;
}
.model {
  z-index: 10000;
  width: 60%;
  height: auto;
  position: fixed;
  top: 15%;
  left: 30%;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}
.model-text {
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}
.model-items-first {
  padding: 0 34px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.model-items-first-img {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  position: relative;
  bottom: 20px;
}
.model-items-first-left {
  display: inline-block;
  color: #393939;
  font-size: 24px;
  margin-left: 14px;
  text-align: left;
}
.model-items-first-left-down {
  color: #7e7e7e;
  font-size: 18px;
}
.model-text-head {
  padding: 40px 50px;
  display: flex;
  color: #393939;
  font-size: 24px;
  justify-content: space-between;
}
.model-items-other {
  height: 60px;
  line-height: 60px;
  color: #393939;
  font-size: 20px;
  text-align: left;
  padding: 0 34px;
}
.model-active {
  background-color: #f6f7fb;
}
.model-active-last {
  border-radius: 0 0 30px 30px;
  background-color: #f6f7fb;
}
.model-items-left {
  width: 100%;
  color: #393939;
  font-size: 24px;
}
.buttonAppoval {
  display: inline-block;
}
.model-items-left-top {
  display: flex;
  justify-content: space-between;
}
.model-items {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  display: inline-block;
  width: 100%;
}
.model-itemss {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  display: inline-block;
}
.model-items-left-top-img {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  position: relative;
  bottom: 25px;
}
.model-items-left-top-number {
  color: #7e7e7e;
  font-size: 18px;
  margin-left: 10px;
}

.today-time {
  color: #7e7e7e;
  font-size: 18px;
  margin: 0 20px;
}
.el-pagination {
  padding: 30px;
}
.no-homework {
  width: 16.5%;
  height: 328px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 14px 0px rgba(228, 228, 228, 1);
  border-radius: 10px;
  margin: auto;
  position: fixed;
  top: 27%;
  left: 41.75%;
  text-align: center;
  padding: 35px;
  z-index: 1000;
  display: none;
}
.no-homework > div {
  margin-bottom: 25px;
  font-size: 24px;
}
.no-homework > img {
  width: 226px;
  height: 203px;
}
.allocation-items {
  width: 45%;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 30px;
}
</style>
