<template>
  <div class="work-container">
    <!-- v-if="work.type == " -->
    <div class="w-work">
      <div class="work" v-if="work.type == 0" @click="imageView(work.works)"><img :src="work.works" alt="" /></div>
      <div class="work" v-else-if="work.type == 3" @click="mediaPreview(work.works)">
        <img src="@/assets/images/works/isVideo.png" alt="" />
      </div>
      <div class="work" v-else-if="work.type == 2" @click="checkAnswer(work.works)">
        <img src="@/assets/images/works/answerBgNew.png" alt="" />
        <div class="anwerBox">{{ JSON.parse(work.works)[0].answer }}</div>
      </div>
      <div class="work" @click="lookAnswer(work.works, work.type)" v-else-if="work.type == 4">
        <img src="@/assets/images/works/askAndChoose.png" alt="" />
      </div>
      <div class="work" @click="lookAnswer(work.works, work.type)" v-else-if="work.type == 8">
        <img src="@/assets/images/works/askAndChoose.png" alt="" />
      </div>
      <div class="work" @click="unDeveloped" v-else>
        <img src="@/assets/images/works/undeveloped.png" alt="" />
      </div>
    </div>
    <div class="s-name">
      <span>{{ work.sName }}</span>
    </div>
    <van-overlay v-if="show" :show="show" @click="overlayShow" style="display: flex; align-items: center">
      <div class="wrapper" @click.stop>
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="playsinline"
          @canplay="onPlayerCanplay($event)"
          :options="playerO"
          @play="onPlayerPlay($event)"
          style="width: 100%; height: 100%"
        ></video-player>
      </div>
    </van-overlay>
    <van-overlay
      v-if="answerShow"
      :show="answerShow"
      @click="overlayAnswerShow"
      style="display: flex; align-items: center"
    >
      <div class="wrapper" @click.stop>
        <div class="answerBox">
          <div class="cancel" @click="overlayAnswerShow"></div>
          <div class="box" v-if="Object.keys(answerJson).length !== 0" @touchmove.stop="">
            <div class="answerTitle">提问: {{ answerJson.answerTitle }}</div>
            <div class="answerContent">{{ answerJson.answer }}</div>
          </div>
        </div>
      </div>
    </van-overlay>
    <van-overlay v-if="askShow" :show="askShow" @click="overlayAskShow" style="display: flex; align-items: center">
      <div class="wrapper" @click.stop>
        <div class="answerBox">
          <div class="cancel" @click="overlayAskShow"></div>
          <div class="box" v-if="Object.keys(askJson).length !== 0" @touchmove.stop="">
            <div class="answerTitle">标题：{{ askJson.askJson.askTitle }}</div>
            <div class="answerContent">
              <div v-for="(item, index) in askJson.askJson.askCount" :key="index" class="askBox">
                <div class="askT">
                  {{ index + 1 + '、' }}
                  <div>题目：{{ askJson.askJson.askJson[index].askstitle }}</div>
                </div>
                <img v-if="askJson.askJson.askJson[index].img" :src="askJson.askJson.askJson[index].img" />
                <div class="askBody">
                  <el-radio-group
                    v-model="askRadio[index]"
                    v-if="askJson.askJson.askJson[index].type == '1' || !askJson.askJson.askJson[index].type"
                  >
                    <el-radio
                      v-for="(item1, checkIndex) in askJson.askJson.askJson[index].checkList"
                      :key="checkIndex"
                      :label="checkIndex"
                      disabled
                      class="redioStyle"
                      ><span v-html="item1"></span
                    ></el-radio>
                  </el-radio-group>
                  <el-checkbox-group v-model="askRadio[index]" v-if="askJson.askJson.askJson[index].type == '2'">
                    <el-checkbox
                      v-for="(item1, checkIndex) in askJson.askJson.askJson[index].checkList"
                      :key="checkIndex"
                      :label="checkIndex"
                      disabled
                      class="redioStyle"
                      ><span v-html="item1"></span>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
    <van-overlay
      v-if="chooseShow"
      :show="chooseShow"
      @click="overlayChooseShow"
      style="display: flex; align-items: center"
    >
      <div class="wrapper" @click.stop>
        <div class="answerBox">
          <div class="cancel" @click="overlayChooseShow"></div>
          <div class="box" v-if="Object.keys(chooseJson).length !== 0" @touchmove.stop="">
            <div class="answerContent">
              <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="chooseRadio[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"
                        disabled
                        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="chooseRadio[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"
                        disabled
                        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>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  props: {
    work: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: '' // url地址require("../../assets/media/aaa.mp4")
          }
        ],
        // poster: require("../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 全屏按钮
        }
      },
      show: false,
      playerO: {},
      answerShow: false,
      askShow: false,
      chooseShow: false,
      answerJson: {},
      askJson: {},
      chooseJson: {},
      askRadio: [],
      chooseRadio: []
    }
  },
  computed: {
    playsinline() {
      const ua = navigator.userAgent.toLocaleLowerCase()
      // x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        return false
      } else {
        // ios端
        return true
      }
    }
  },
  methods: {
    imageView(src) {
      // ImagePreview([src]);
      this.$hevueImgPreview({ url: src, clickMaskCLose: true })
    },
    previewImg(url) {
      this.$hevueImgPreview(url)
    },
    mediaPreview(file) {
      console.log(file)
      this.show = true
      this.playerOptions.sources[0].src = file
      this.playerO = JSON.parse(JSON.stringify(this.playerOptions))
    },
    overlayShow() {
      this.show = false
      this.$refs.videoPlayer.player.pause()
    },
    overlayAnswerShow() {
      this.answerShow = false
    },
    overlayAskShow() {
      this.askShow = false
    },
    overlayChooseShow() {
      this.chooseShow = false
    },
    onPlayerCanplay() {},
    onPlayerPlay() {},
    checkAnswer(work) {
      this.answerJson = JSON.parse(work)[0]
      this.answerShow = true
    },
    lookAnswer(work, t) {
      var a = JSON.parse(work)[0]
      if (t == 4) {
        this.askJson = a
        if (a.anwer instanceof Array) {
          this.askRadio = a.anwer
        } else {
          this.askRadio.push(parseInt(a.anwer))
        }
        this.askShow = true
      } else if (t == 8) {
        this.chooseJson = a
        if (a.anwer instanceof Array) {
          this.chooseRadio = a.anwer
        } else {
          this.chooseRadio.push(parseInt(a.anwer))
        }
        this.chooseShow = true
      }
    },
    unDeveloped() {
      this.$toast('手机端暂不支持查看，请前往PC端查看。')
    }
  }
}
</script>

<style lang="scss" scoped>
.work-container {
  max-width: 4.5rem;
  width: calc((100% - 20px) / 2);
  // overflow: hidden;
  height: 3rem;
  border-radius: 10px;
  box-shadow: rgb(223, 218, 218) 0px 0px 6px 1px;
  margin: 0 10px 15px 0;

  .w-work {
    width: 100%;
    height: calc(100% - 0.7rem);
    .work {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }
      > .anwerBox {
        text-align: center;
        max-height: 95%;
        width: 100%;
        position: absolute;
        color: #fff;
        font-size: 14px;
        word-break: break-all;
        padding: 0px 13px;
        box-sizing: border-box;
        @include textoverflow(4);
      }
    }
  }
  .s-name {
    width: 100%;
    height: 0.6rem;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    > span {
      width: 100%;
      @include textoverflow();
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .answerBox {
      background: #fff;
      width: 95%;
      margin: 0 auto;
      border-radius: 5px;
      height: 500px;
      padding: 30px 15px;
      box-sizing: border-box;
      position: relative;
      .cancel {
        width: 20px;
        height: 20px;
        background-image: url(../../../assets/images/works/cancel.png);
        background-size: 100% 100%;
        position: absolute;
        right: 15px;
        top: 15px;
      }
      > .box {
        margin-top: 10px;
        height: calc(100% - 15px);
        overflow: auto;
        .answerTitle {
          font-size: 23px;
          font-weight: 700;
          width: 100%;
          word-break: break-all;
        }
        .answerContent {
          word-break: break-all;
          font-size: 18px;
          margin-top: 15px;
          .askBox {
            padding: 0.26667rem 0.4rem;
            .askT,
            .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;
            }
          }
        }
      }
    }
  }
}
</style>
