<!-- 活动解析 -->
<template>
  <div>
    <!-- table 表格 -->
    <el-row :gutter="20" class="main-items">
      <el-col :span="20" class="main" :offset="2">
        <el-row>
          <el-col :span="20" class :offset="2">
            <div class="studentInfo">
              <span class="studentName">{{StudentHomeworkDetail.name}}同学/{{StudentHomeworkDetail.subject}}作业</span>
              <span v-if="StudentHomeworkDetail.status ==1" style="color:#52cc60;">/未分配</span>
               <span v-if="StudentHomeworkDetail.status ==2" style="color:#52cc60;">/已分配未批改</span>
             <span v-if="StudentHomeworkDetail.status ==2" style="color:#52cc60;">/批改中</span>
              <br />
              <span class="timeInfo">{{StudentHomeworkDetail.statusTime}}开始匹配</span>
            </div>
          
          </el-col>
          <el-col :span="20" class :offset="2">
            <div class="topLine"></div>
          </el-col>
          <el-col :span="20" class :offset="2">
              <!-- {{StudentHomeworkDetail}} -->
            <div class="beginPictrue">
              <div class="studentName">原图</div>
              <ul>
                <li class="picLists" @click="pictrueAddView(v)" v-for="(v, k) of StudentHomeworkDetail.originPicList" :key="k">
                    <img :src="BASE_URL + v.url" alt class="table-img pictrueStyle" v-if="v.url"  />
                    <img src="../../assets/img/attt.png" alt v-if="v.url ==''"  class="table-img pictrueStyle"/>
                  <div v-if="v.type ==21" class="TeacherWords">已分配给其他老师</div>
                   <div v-if="v.type ==20"  class="TeacherWords">作文有评语</div>
                  <!-- 模糊 -->
                  <img v-if="v.type ==1" class="logoPic" src="../../assets/img/Mohu (1).png" />
                  <!-- 不全 -->
                  <img v-if="v.type ==3" class="logoPic" src="../../assets/img/Reless (3).png" />
                  <!-- 登记 -->
                  <img  v-if="v.type ==22" class="logoPic" src="../../assets/img/sigin (3).png" />
                  <!-- 补拍 -->
                  <img v-if="v.type ==2" class="logoPic" src="../../assets/img/ReCamrea (1).png" />
                  <!-- 不批改 -->
                  <img v-if="v.type ==10" class="logoPic" src="../../assets/img/NoReset (1).png" />
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="20" class :offset="2">
            <div class="beginPictrue">
              <div class="studentName">批改图片</div>
              <ul>
                <li class="picLists" @click="pictrueAddView(v)" v-for="(v, k) of StudentHomeworkDetail.correctPicList" :key="k">
                   <img :src="BASE_URL + v.url" alt class="table-img pictrueStyle" v-if="v.url"  />
                    <img src="../../assets/img/attt.png" alt v-if="v.url ==''"  class="table-img pictrueStyle"/>
                  <div v-if="v.type ==21" class="TeacherWords">已分配给其他老师</div>
                   <div v-if="v.type ==20"  class="TeacherWords">作文有评语</div>
                  <!-- 模糊 -->
                  <img v-if="v.type ==1" class="logoPic" src="../../assets/img/Mohu (1).png" />
                  <!-- 不全 -->
                  <img v-if="v.type ==3" class="logoPic" src="../../assets/img/Reless (3).png" />
                  <!-- 登记 -->
                  <img  v-if="v.type ==22" class="logoPic" src="../../assets/img/sigin (3).png" />
                  <!-- 补拍 -->
                  <img v-if="v.type ==2" class="logoPic" src="../../assets/img/ReCamrea (1).png" />
                  <!-- 不批改 -->
                  <img v-if="v.type ==10" class="logoPic" src="../../assets/img/NoReset (1).png" />-->
                </li>
              </ul>
            </div>
          </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>
      </el-col>
    </el-row>
    <!-- 升级校区管理员弹框 -->
    <div class="showModel" @click="allShowModel(1)" v-if="PictruePush"></div>
    <div class="modelspec" v-if="PictruePush">
      <div class="detaillogo">
        <img src="../../assets/img/del@2x.png" alt @click="allShowModel(1)" />
      </div>
      <img class="LargepictrueStyle" :src="BASE_URL + this.PrewPictrue " />
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { IMG_BASE_URL, APPOR_BASE_URL } from "@/config";
export default {
  components: {},
  name: "",
  props: {},
  data() {
    return {
      BASE_URL: IMG_BASE_URL,
      PictruePush: false,
      PrewPictrue:""
    };
  },
  created() {},
  methods: {
    pictrueAddView(v) {
        this.PrewPictrue = v.url
      this.PictruePush = true;
    },
        // 回退
    routerback() {
      this.$router.back(-1);
    },
    //关闭弹框
    allShowModel(str) {
      let _this = this;
      if (str == 1) {
        _this.PictruePush = false;
      }
    }
  },
  watch: {},
  mounted() {},
  computed: {
    ...mapGetters(["StudentHomeworkDetail"])
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  background-color: #fff;
  margin-top: 16px;
  padding: 0 !important;
  border: 1px solid #e1e1e1;
  min-height: 980px;
}

.topLine {
  width: 100%;
  background-color: rgba(207, 204, 204, 0.815);
  height: 1px;
}
.picLists {
  position: relative;
}
.TeacherWords {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 30px;
  background: #000000;
  text-align: center;
  line-height: 30px;
  opacity: 0.6;
  color: #ffff;
  font-size: 8px;
}
.logoPic {
  position: absolute;
  top: 0;
  right: 0;
}
.userstyle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.studentInfo {
  display: inline-block;
  float: left;
  /* height: 70px; */
  margin-top: 30px;
  text-align: left;
}
.loginMock {
  color: #333333;
  font-size: 14px;
  display: inline-block;
  float: right;
  margin-top: 30px;
}
.timeInfo {
  color: #999999;
  font-size: 14px;
}
.studentName {
  font-size: 18px;
  color: black;
  width: 120px;
  text-align: left;
}
.pictrueStyle {
  width: 120px;
  height: 120px;
  border-radius: 5px;
}
.beginPictrue ul li {
  float: left;
  margin: 15px 20px 15px 0px;
  cursor: pointer;
}
.showModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
.modelspec {
  margin: 0 auto;
}
.LargepictrueStyle {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.modelspec {
  z-index: 10000;
  width: 70%;
  height: 600px;
  height: auto;
  position: fixed;
  top: 10%;
  left: 15%;
  bottom: 10%;
  margin: auto;
  border-radius: 10px;
  text-align: center;
}
.detaillogo {
  position: fixed;
  top: 5%;
  right: 13%;
  cursor: pointer;
}
</style>
