<template>
  <div class="cp-container" v-if="panelVisible">
    <div class="cp-title">
      <span class="back" @click="back"></span>
      <span class="title" v-if="isTeacher">选择题作业</span>
      <span class="title" v-else>选择题作业-{{ sStudent.student }}</span>
      <span class="btn" v-if="type == 1" @click="addPz(type)">提交</span>
    </div>
    <div class="cp-box">
      <div class="cp-conent" v-if="type == 1">
        <div v-for="(item, index) in chooseJson.testJson.testCount" :key="index" class="askBox">
          <div class="askTitle">
            {{ index + 1 + '、' }}
            <div v-if="chooseJson.testJson.testJson[index].type == '1'" style="margin-right: 5px; min-width: 70px">
              (单选题)
            </div>
            <div v-if="chooseJson.testJson.testJson[index].type == '2'" style="margin-right: 5px; min-width: 70px">
              (多选题)
            </div>
            <div>题目：{{ chooseJson.testJson.testJson[index].teststitle }}</div>
          </div>
          <img
            v-if="chooseJson.testJson.testJson[index].img"
            :src="chooseJson.testJson.testJson[index].img"
            style="height: 300px; margin-top: 10px; max-width: 100%"
          />
          <div
            class="timuImgBox"
            v-if="chooseJson.testJson.testJson[index].timuList && chooseJson.testJson.testJson[index].timuList.length"
          >
            <div
              v-for="(timg, tIndex) in chooseJson.testJson.testJson[index].timuList"
              :key="tIndex"
              class="timuImg"
              @click.stop="previewImg(timg.src)"
            >
              <img :src="timg.src" alt="" />
            </div>
          </div>
          <div class="askBody">
            <el-radio-group v-model="radio[index]" v-if="chooseJson.testJson.testJson[index].type == '1'">
              <div class="radioBox">
                <el-radio
                  v-for="(item1, checkIndex1) in chooseJson.testJson.testJson[index].checkList"
                  :key="checkIndex1"
                  :label="checkIndex1"
                  class="redioStyle"
                >
                  <div style="margin-right: 10px" v-if="item1 && item1.imgType && item1.imgType == 1">
                    <div class="inImg" @click.stop="previewImg(item1.src)">
                      <img :src="item1.src" alt="" />
                    </div>
                  </div>
                  <span v-else v-html="item1"></span>
                </el-radio>
              </div>
            </el-radio-group>
            <el-checkbox-group v-model="radio[index]" v-if="chooseJson.testJson.testJson[index].type == '2'">
              <div class="radioBox">
                <el-checkbox
                  v-for="(item2, checkIndex2) in chooseJson.testJson.testJson[index].checkList"
                  :key="checkIndex2"
                  :label="checkIndex2"
                  class="redioStyle"
                >
                  <div style="margin-right: 10px" v-if="item2 && item2.imgType && item2.imgType == 1">
                    <div class="inImg" @click.stop="previewImg(item2.src)">
                      <img :src="item2.src" alt="" />
                    </div>
                  </div>
                  <span v-else v-html="item2"></span>
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addCourseWorks, addCourseWorksTeacher } from '@/api/course'
import { mapGetters } from 'vuex'

export default {
  props: {
    panelVisible: {
      type: Boolean
    },
    courseid: {
      type: String,
      default: ''
    },
    courseType: {
      type: Number,
      default: 0
    },
    taskCount: {
      type: Number,
      default: 0
    },
    toolindex: {
      type: Number
    },
    isTeacher: {
      type: Boolean
    },
    chooseJson: {
      type: Object
    },
    sStudent: {
      type: Object
    }
  },
  components: {},
  data() {
    return {
      type: 1,
      message: '',
      imgList: [],
      radio: [],
      chooseList: []
    }
  },
  computed: {
    ...mapGetters(['userinfo'])
  },
  mounted() {
    for (var k = 0; k < this.chooseJson.testJson.testJson.length; k++) {
      if (this.chooseJson.testJson.testJson[k].type == '2') {
        this.radio.push([])
      } else {
        this.radio.push('')
      }
    }
  },
  methods: {
    back() {
      this.$emit('setChoosePanelVisible', false)
    },
    previewImg(url) {
      this.$hevueImgPreview(url)
    },
    setType(type) {
      this.type = type
    },
    getImage(imgList) {
      this.imgList = imgList
      this.$forceUpdate()
    },
    addPz() {
      if (!this.radio.length) {
        this.$message.error('请选择选项')
        return
      }
      for (var i = 0; i < this.chooseJson.testJson.testCount; i++) {
        if ((this.radio[i] instanceof Array && !this.radio[i].length) || (this.radio[i] !== 0 && !this.radio[i])) {
          this.$message.error('请选择选项')
          return
        }
      }
      const fun = [addCourseWorks, addCourseWorksTeacher]
      const chooseList = [
        {
          testJson: this.chooseJson.testJson,
          anwer: this.radio
        }
      ]
      let params = []
      if (this.isTeacher) {
        params = [
          {
            uid: this.userinfo.userid,
            cid: this.courseid,
            stage: this.courseType,
            task: this.taskCount,
            tool: this.toolindex,
            content: JSON.stringify(chooseList).replaceAll(/%/g, '%25'),
            type: 8
          }
        ]
      } else {
        params = [
          {
            uid: this.sStudent.userid,
            cid: this.courseid,
            stage: this.courseType,
            task: this.taskCount,
            tool: this.toolindex,
            content: JSON.stringify(chooseList),
            type: 8,
            ateacher: this.userinfo.userid
          }
        ]
      }
      fun[this.isTeacher ? 0 : 1](params)
        .then(res => {
          this.$toast({
            message: '上传成功',
            type: 'success'
          })
          this.$emit('setChoosePanelVisible', false)
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.cp-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 2;
  .cp-title {
    height: 1.5rem;
    width: 100%;
    border-bottom: 1px solid #cecece;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    .back {
      width: 0.3rem;
      height: 0.3rem;
      border-top: 2px solid #000000;
      border-left: 2px solid #000000;
      position: absolute;
      transform: rotate(-45deg) translateY(-50%);
      top: 47%;
      left: 0.8rem;
      cursor: pointer;
    }
    .title {
      font-size: 16px;
    }
    .btn {
      font-size: 14px;
      transform: translateY(-50%);
      top: 50%;
      right: 0.8rem;
      position: absolute;
      color: #2274ff;
      cursor: pointer;
    }
  }
  .cp-box {
    width: 100%;
    height: calc(100% - 1.5rem);
    overflow: auto;
    .type-nav {
      height: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 10px 0.3rem;
      box-sizing: border-box;

      .type-nav-box {
        height: 100%;
        opacity: 0.5;
        transition: all 0.5s;

        + .type-nav-box {
          margin-left: 0.3rem;
        }

        &.active {
          opacity: 1;
        }
        > img {
          height: 100%;
        }
      }
    }
    .cp-quest {
      width: 100%;
      padding: 10px 15px;
      font-size: 18px;
      word-break: break-all;
      box-sizing: border-box;
    }
    .cp-conent {
      // margin-top: 10px;
      height: auto;
      overflow: auto;
      font-size: 14px;
      width: 100%;
      /deep/ .van-field__control {
        // height: auto !important;
      }
      .askBox {
        padding: 0.26667rem 0.4rem;
        .askTitle {
          display: flex;
        }
        .askBody {
          margin-top: 10px;
          /deep/.redioStyle {
            margin-bottom: 10px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            .el-radio__label > span,
            .el-checkbox__label > span {
              word-break: break-all;
              white-space: normal;
            }
          }
          .radioBox {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: flex-start;
          }

          .radioBox > div {
            margin: 10px 0 0 10px;
          }

          .radioBox >>> .el-radio__label,
          .radioBox >>> .el-checkbox__label {
            display: flex;
            align-items: center;
          }

          .radioBox >>> .el-radio__label > span {
            width: 100%;
            display: -webkit-box;
            overflow: hidden;
            white-space: normal !important;
            text-overflow: ellipsis;
            word-wrap: break-word;
          }
          .inImg {
            width: 100px;
            cursor: pointer;
          }

          .inImg > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .timuImgBox {
          margin: 10px 0;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: flex-start;
        }

        .timuImg {
          width: 150px;
          margin: 5px 0;
          cursor: pointer;
        }

        .timuImg > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .cp-audio {
      height: calc(100% - 60px);
      position: relative;
      width: 100%;
    }
  }
}
</style>
