<template>
  <!-- 听力题 -->
  <view class="listen">
    <view class="item" style="padding: 0 20px">
      <view class="name">
        <view>
          {{ changeNumToHan(sortIndex) }}、{{ data.GroupName }}
          <text class="Exam_Score"
            >（共{{ data.DetailsList.length }}道,{{ data.GScore }}分）</text
          >
        </view>
        <view class="ExamIndex_Box">
          <text class="Single_Before">{{ ExamIndex }}</text
          >/<text class="Exam_Total">{{ data.DetailsList.length }}</text>
        </view>
      </view>
      <swiper
        class="swiper-box"
        :style="{
          height: `calc(100vh - 300rpx - ${statusBarHeight}px)`,
        }"
        :autoplay="autoplay"
        :current="current"
        @change="onchange"
        :skip-hidden-item-layout="true"
      >
        <swiper-item v-if="sortIndex != 1"></swiper-item>
        <swiper-item v-for="(item1, index1) in data.DetailsList" :key="index1">
          <audio
            style="text-align: left"
            poster="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png"
            :src="item1.Src"
            name="日语听力"
            :action="audioAction"
            controls
            v-if="!isIOS"
          ></audio>
          <view
            class="item1"
            :style="{ height: `calc(100vh - 414rpx - ${statusBarHeight}px)` }"
          >
            <view class="flex flex_start_center" v-if="isIOS">
              <view
                class="audioBox flex flex_center_center"
                @click="audioManage(item1.Src)"
              >
                <image
                  style="width: 26rpx; height: 22rpx"
                  src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/horn.png"
                />
                <van-count-down
                  :time="audioTime"
                  :auto-start="false"
                  class="flex flex_center_center"
                  style="color: #00acf9"
                  ref="listenCountdown"
                  format="mm:ss"
                />
              </view>
            </view>
            <view class="questionView">
              <view
                v-for="(item2, index2) in item1.QuestionContentObj"
                :key="index2"
                class="item2"
              >
                <view class="flex questionTitle">
                  <view
                    >{{ index2 + 1 }}、({{
                      item2.QuestionName.slice(0, 2)
                    }})</view
                  >
                  <view v-html="item2.SubTitle"></view>
                  <text class=".Exam_Score">（{{ item1.Score }}）</text>
                </view>
                <view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
                  <!-- 单选 、判断-->
                  <view
                    class="flex flex_start_center item3"
                    v-if="
                      item2.QuestionKey === 'single' ||
                      item2.QuestionKey === 'judge'
                    "
                  >
                    <template v-if="isOperate">
                      <view
                        class="chooseNum"
                        :class="{ myAnswer: item3.IsAnswer }"
                        @click="singerChange(item2, item3)"
                        >{{ item3.Name }}
                      </view>
                      <view
                        class="chooseName"
                        @click="singerChange(item2, item3)"
                        v-html="item3.Content"
                      ></view>
                    </template>
                    <template v-else>
                      <view
                        class="chooseNum"
                        :class="{ isTrueAnswer: item3.IsAnswer }"
                      >
                        {{ item3.Name }}
                      </view>
                      <view
                        class="chooseName"
                        :class="{ isTrueAnswer: item3.IsAnswer }"
                        v-html="item3.Content"
                      ></view>
                    </template>
                  </view>
                  <!-- 多选 -->
                  <view
                    class="flex flex_start_center item3"
                    v-if="item2.QuestionKey === 'multiple'"
                  >
                    <template v-if="isOperate">
                      <view
                        class="chooseNum"
                        :class="{ myAnswer: item3.IsAnswer }"
                        @click="multipleChange(item2, item3)"
                        >{{ item3.Name }}
                      </view>
                      <view
                        class="chooseName"
                        @click="multipleChange(item2, item3)"
                        v-html="item3.Content"
                      ></view>
                    </template>
                    <template v-else>
                      <view
                        class="chooseNum"
                        :class="{ isTrueAnswer: item3.IsAnswer }"
                      >
                        {{ item3.Name }}
                      </view>
                      <view
                        class="chooseName"
                        :class="{ isTrueAnswer: item3.IsAnswer }"
                        v-html="item3.Content"
                      ></view>
                    </template>
                  </view>
                  <!-- 填空 -->
                  <view
                    class="flex flex_start_center item3"
                    v-if="item2.QuestionKey === 'fill-in'"
                  >
                    <view class="chooseNum">{{ index3 + 1 }} </view>
                    <template v-if="isOperate">
                      <input
                        v-for="cItem in item2.SubAnwser"
                        type="text"
                        v-model="cItem.Content"
                        class="chooseName chooseName2"
                        placeholder="请填写答案"
                        @input="AnswerChange(item2)"
                      />
                    </template>
                    <template v-else>
                      <view
                        v-for="cItem in item2.SubAnwser"
                        class="viewAnswerContent"
                        v-html="cItem.Content"
                      ></view>
                    </template>
                  </view>
                  <!-- 简答 -->
                  <view
                    class="flex flex_start_center item3"
                    v-if="item2.QuestionKey === 'short-answer'"
                  >
                    <template v-if="isOperate">
                      <textarea
                        type="text"
                        v-for="cItem in item2.SubAnwser"
                        v-model="cItem.Content"
                        class="chooseName chooseName2"
                        placeholder="请填写答案"
                        @input="AnswerChange(item2)"
                      />
                    </template>
                    <template v-else>
                      <view
                        v-for="cItem in item2.SubAnwser"
                        class="viewAnswerContent"
                        v-html="cItem.Content"
                      ></view>
                    </template>
                  </view>
                </view>
                <template v-if="!isOperate">
                  <view class="AnswerContent">
                    <view>
                      <text style="color: #8c8a94">正确答案：</text>
                      <text class="isTrueAnswer">{{
                        item1.QuestionAnswerList[index2].SubAnswer
                      }}</text
                      >，
                      <text>
                        您的答案：
                        <template
                          v-if="item1.AnswerList[index2].SubAnswer != ''"
                        >
                          <text
                            v-if="
                              item1.QuestionAnswerList[index2].SubAnswer ==
                              item1.AnswerList[index2].SubAnswer
                            "
                            class="isTrueAnswer"
                          >
                            {{ item1.AnswerList[index2].SubAnswer }}，回答正确
                          </text>
                          <text v-else class="isNotAnswer">
                            {{ item1.AnswerList[index2].SubAnswer }}，回答错误
                          </text>
                        </template>
                        <template v-else>
                          <text class="isNotAnswer">未回答</text>
                        </template>
                      </text>
                    </view>
                    <view
                      style="margin-top: 20rpx"
                      v-if="
                        item1.AnswerList[index2].StudentScore != '' ||
                        item1.AnswerList[index2].StudentScore === 0
                      "
                    >
                      <text style="color: #8c8a94">您的得分：</text>
                      <text
                        class="isTrueAnswer"
                        v-if="item1.AnswerList[index2].StudentScore > 0"
                        >{{ item1.AnswerList[index2].StudentScore }}</text
                      >
                      <text class="isNotAnswer" v-else>{{
                        item1.AnswerList[index2].StudentScore
                      }}</text>
                    </view>
                  </view>
                </template>
              </view>
            </view>
            <view class="AnswerContent" v-if="!isOperate && item1.AnswerParse">
              <view style="word-wrap: break-word">
                <text style="color: #8c8a94">解析：</text>
                <view
                  style="color: #000; display: inline-block"
                  v-html="item1.AnswerParse"
                ></view>
              </view>
            </view>
          </view>
          <view class="AnswerBtn clear">
            <view
              class="AnswerBtnFirst"
              @click="getBeforeExam()"
              v-if="ExamIndex != 1 || sortIndex != 1"
              >上一题</view
            >
            <view
              class="AnswerBtnSecond"
              v-if="sortIndex != sortTotal"
              @click="getNextExam()"
              >下一题</view
            >
          </view>
        </swiper-item>
        <swiper-item v-if="sortIndex != sortTotal"></swiper-item>
      </swiper>
    </view>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
  onUnmounted,
} from "vue";
import { changeNumToHan } from "../../utils/index";
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
  props: {
    paperData: Object,
    sort: Number,
    sortTotal: Number,
    isLast: Boolean,
    startIndex: Number,
    isOperate: Boolean,
    ExamStatus: Number,
  },
  setup(props, context) {
    let { refs } = getCurrentInstance();
    console.log(163, refs);
    let data = reactive({
      autoplay: false,
      sortIndex: props.sort + 1, //大题序号
      sortTotal: props.sortTotal, //总共多少道大题
      data: props.paperData,
      current: 1, //默认从第几个开始-用于从快捷菜单点入
      ExamIndex: 1, //第几题
      audioTime: 999,
      isPlay: true,
      statusBarHeight: 0,
      isOperate: props.isOperate,
      ExamStatus: props.ExamStatus,
      audioAction: {
        method: "pause",
      },
      isIOS: false,
    });
    let sys = uni.getSystemInfoSync().system;
    if (sys.indexOf("iOS") != -1) {
      data.isIOS = true;
    } else {
      data.isIOS = false;
    }
    console.log(327, sys, data.isIOS);
    data.data.DetailsList.map((item) => {
      let arr = item.Title.split(" "); //按空格分段
      arr.map((e) => {
        if (e.indexOf("src") != -1) {
          item.Src = decodeURIComponent(e.split("url=")[1].slice(0, -1));
        }
      });
      item.QuestionContentObj.map((_item) => {
        if (_item.QuestionKey === "multiple") {
          _item.myAnswer = [];
        } else {
          _item.myAnswer = "";
        }
      });
    });
    //判断是否是第一大题
    if (data.sortIndex === 1) {
      data.current = 0;
      //从答题卡进入
      if (props.startIndex) {
        data.current = props.startIndex - 1;
        data.ExamIndex = props.startIndex;
      }
    } else {
      if (props.startIndex) {
        data.current = props.startIndex;
        data.ExamIndex = props.startIndex;
      }
    }
    watch(data.data, (newVal, oldVal) => {
      if (newVal) {
        context.emit("answerChange", newVal);
      }
    });
    let methods = {
      changeNumToHan,
      jumpPage() {
        uni.navigateTo({
          url: "/pages/exam/examPaper",
        });
      },
      back() {
        uni.navigateBack();
      },
      //获取总时长
      getTotalTime(url) {
        innerAudioContext.src = url;
        var Inner = "";
        innerAudioContext.onCanplay(() => {
          innerAudioContext.duration;
          let t = innerAudioContext.duration;
          let Time = t;
          var second = parseInt(Time);
          var hours = Math.floor(second / 3600);
          second = second - hours * 3600;
          var mimute = Math.floor(second / 60);
          second = second - mimute * 60;
          // let aa = hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2);
          let TotalTime =
            ("0" + mimute).slice(-2) + ":" + ("0" + second).slice(-2);
          return TotalTime;
        });
      },
      audioManage(url) {
        innerAudioContext.src = url;
        innerAudioContext.onCanplay(() => {
          // 必须。可以当做是初始化时长
          innerAudioContext.duration;
          // 必须。不然也获取不到时长
          setTimeout(() => {
            let t = innerAudioContext.duration;
            data.audioTime = t * 1000;
          }, 100);
        });
        if (innerAudioContext.currentTime === innerAudioContext.duration) {
          data.isPlay = true;
        }
        if (data.isPlay) {
          innerAudioContext.play();
          // refs.listenCountdown.start();
          console.log("开始播放");
          data.isPlay = false;
        } else {
          innerAudioContext.stop();
          console.log("停了");
          data.isPlay = true;
        }

        innerAudioContext.onError((res) => {
          console.log(res.errMsg);
          console.log(res.errCode);
        });
      },
      //----------------------------------------选题----------------------------------
      // 单选or判断
      singerChange(item2, item3) {
        item2.SubAnwser.map((e) => {
          if (e.Name == item3.Name) {
            e.IsAnswer = true;
            item2.IsRes = true; //答题标记
          } else {
            e.IsAnswer = false;
          }
        });
      },
      // 多选
      multipleChange(item2, item3) {
        item3.IsAnswer = !item3.IsAnswer;
        //标记已回答
        item2.IsRes = item2.SubAnwser.some((e) => {
          return e.IsAnswer;
        });
      },
      AnswerChange(item) {
        item.IsRes = item.SubAnwser.some((e) => {
          return e.Content && e.Content != "";
        });
      },
      onchange(e) {
        innerAudioContext.stop();
        innerAudioContext.onCanplay(() => {
          // 必须。可以当做是初始化时长
          innerAudioContext.duration;
          // 必须。不然也获取不到时长
          setTimeout(() => {
            data.audioTime = 999;
          }, 100);
        });

        data.isPlay = true;
        data.ExamIndex = e.detail.current;
        if (data.sortIndex == 1) {
          data.ExamIndex = e.detail.current + 1;
        }
        if (data.ExamIndex === data.data.DetailsList.length + 1) {
          this.$emit("getAfterTopic");
        }
        if (e.detail.current == 0 && data.sortIndex != 1) {
          this.$emit("getBeforeTopic");
        }
      },
      //点击上一题
      getBeforeExam() {
        data.current = data.current - 1;
      },
      //点击下一题
      getNextExam() {
        data.current = data.current + 1;
      },
    };
    onMounted(() => {
      if (props.isLast) {
        if (data.sortIndex === 1) {
          data.current = props.paperData.DetailsList.length - 1;
        } else {
          data.current = props.paperData.DetailsList.length;
        }
      }
      data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    });
    onUnmounted(() => {
      innerAudioContext.stop();
      data.isPlay = true;
    });
    let that = methods;
    return {
      ...toRefs(data),
      ...methods,
    };
  },
};
</script>
<style scoped>
.AnswerBtn {
  margin-top: 20rpx;
}

.clear {
  clear: both;
}

.AnswerBtnFirst {
  width: 250rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  border-radius: 10rpx;
  border: 1px solid #00acf9;
  color: #00acf9;
  float: left;
}

.AnswerBtnSecond {
  width: 250rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  border-radius: 10rpx;
  background-color: #00acf9;
  color: #fff;
  float: right;
}

.name {
  height: 90rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ExamIndex_Box {
  margin-right: 40rpx;
}

.Single_Before {
  font-size: 30rpx;
  font-weight: bold;
  color: #da7878;
}

.isTrueAnswer {
  color: green !important;
}

.isNotAnswer {
  color: red !important;
}

.AnswerContent {
  font-size: 30rpx;
  padding: 25rpx;
  background-color: #f4f4f4;
  border-radius: 5px;
}

.viewAnswerContent {
  width: 100%;
  min-height: 44rpx;
  border-bottom: 1px solid #d1d1d1;
  padding-bottom: 5px;
}

.Exam_Total {
  font-size: 25rpx;
  color: gray;
}

.swiper-box {
  height: calc(100vh - 270rpx);
  box-sizing: border-box;
}

.num {
  font-size: 30rpx;
  font-family: PingFang SC;
  color: #111111;
}

.item {
  /* margin-bottom: 40rpx; */
  position: relative;
}

.item1 {
  /* margin: 25rpx 0; */
  align-items: center;
  overflow-y: auto;
  margin-top: 30rpx;
}

.questionView {
  overflow-y: auto;
}

.audioBox {
  width: 120rpx;
  height: 30rpx;
  background: #b4ddfe;
  border: 1px solid #35b4fb;
  border-radius: 4rpx;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #00acf9;
}

.item2 {
  box-sizing: border-box;
  margin: 30rpx 0;
  /* padding: 0 30rpx; */
}

.item3 {
  padding-left: 25rpx;
  margin: 20rpx 0;
}

.myAnswer {
  background-color: #00acf9 !important;
  color: #ffffff !important;
}

.chooseNum {
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  border-radius: 50%;
  border: 1px solid #e2e2e2;
  margin-right: 30rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}

.chooseName {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}

.chooseName2 {
  flex-grow: 1;
  border-bottom: 1px solid #111;
}

.questionTitle {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}

.listen .van-count-down {
  font-size: 22rpx !important;
  color: #00acf9 !important;
}

.Exam_Score {
  color: #999999;
  font-size: 28rpx;
}
</style>
