<template>
  <view class="wrapper">
    <div class="top-time">已用时间 {{ usedTime }}</div>
    <div class="num-wrapper">
      <div class="correct">
        <u-icon name="/static/images/true.png" size="15" />
        <div class="num">{{ correctNum }}</div>
      </div>
      <div class="error">
        <u-icon name="/static/images/error.png" size="15" />
        <div class="num">{{ errorNum }}</div>
      </div>
      <div class="total" @click="openSelect">
        <u-icon name="/static/images/quanbufenlei.png" size="15" />
        <div class="num">{{ currentIndex + 1 }}/{{ questionList.length }}</div>
      </div>
    </div>

    <div class="question-wrapper" v-for="(item, index) in questionList" :key="index" v-show="index == currentIndex">
      <div v-if="item.type !== 2">
        <div class="title">{{ index + 1 }}. {{ item.title }}{{ item.type == 3 ? '（判断题）' : '（单选题）' }}</div>
        <u--image
          v-if="item.img"
          :showLoading="true"
          :src="item.img"
          width="60px"
          height="60px"
          style="margin-bottom: 10px"
          @click="clickImg"
        />
        <div class="options">
          <div
            class="option"
            v-for="(option, index) in item.options"
            :key="index"
            @click="handleOption(option, index)"
            :class="{ active: option.isCorrect || option.isError }"
          >
            <div class="label">{{ option.value }}.{{ option.label }}</div>
            <u-icon v-if="option.isCorrect" name="/static/images/对.png" size="25" />
            <u-icon v-if="option.isError" name="/static/images/错.png" size="25" />
          </div>
        </div>

        <div v-if="item.isSelect">
          <div>正确答案：{{ item.answer }}</div>
          <div>你的答案：{{ item.select }}</div>

          <div v-if="item.analysis">
            <div class="analysis">答案解析：</div>
            <div class="analysis-container">{{ item.analysis }}</div>
          </div>
        </div>
      </div>
      <!-- 多选 -->
      <div v-else-if="item.type === 2">
        <div class="title">{{ index + 1 }}. {{ item.title }}（多选题）</div>
        <div class="options">
          <div
            class="option"
            v-for="(option, index) in item.options"
            :key="index"
            @click="handleCheckbox(option, index)"
            :class="{ active: option.isCheck }"
          >
            <div class="label">{{ option.value }}.{{ option.label }}</div>
            <u-icon v-if="option.isCorrect" name="/static/images/对.png" size="25" />
            <u-icon v-if="option.isError" name="/static/images/错.png" size="25" />
          </div>
        </div>

        <div class="btn">
          <u-button
            v-show="item.options.some(option => option.isCheck)"
            text="选好了"
            shape="circle"
            size="small"
            color="linear-gradient(to right, rgba(47, 195, 255, 1), rgba(5, 70, 173, 1))"
            @click="handleOk"
          />
        </div>

        <div v-if="item.isSelect">
          <div>正确答案：{{ item.answer.join('、') }}</div>
          <div>你的答案：{{ item.select.join('、') }}</div>

          <div class="analysis">知识点</div>
          <div class="analysis-container">{{ item.knowledge }}</div>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-btn">
      <div class="btn">
        <u-button
          type="primary"
          size="small"
          shape="circle"
          text="提交"
          color="linear-gradient(to right, rgba(250, 223, 103, 1), rgba(207, 163, 14, 1)"
          @click="handleSubmit"
        />
      </div>
      <div class="btn">
        <u-button
          v-show="currentIndex !== 0"
          type="primary"
          size="small"
          shape="circle"
          text="上一题"
          color="linear-gradient(to right, rgba(47, 195, 255, 1), rgba(5, 70, 173, 1))"
          @click="currentIndex--"
        />
      </div>
      <div class="btn">
        <u-button
          v-show="currentIndex !== questionList.length - 1"
          type="primary"
          size="small"
          shape="circle"
          text="下一题"
          color="linear-gradient(to right, rgba(47, 195, 255, 1), rgba(5, 70, 173, 1))"
          @click="currentIndex++"
        />
      </div>
    </div>

    <!-- 提交弹框 -->
    <u-modal
      :show="showModal"
      title="本次答题正确率"
      showCancelButton
      @cancel="handleClose"
      @confirm="handleConfirm"
      cancelText="结束答题"
      confirmText="继续答题"
    >
      <view class="slot-content">
        <div class="correctRate">{{ correctRate }}</div>
        <div class="modal-container">
          <div class="item">
            <div class="num">{{ answerNum }}</div>
            <div>答题数</div>
          </div>
          <div class="item">
            <div class="num">{{ correctNum }}</div>
            <div>正确数</div>
          </div>
          <div class="item">
            <div class="num">{{ usedTime }}</div>
            <div>答题时长</div>
          </div>
        </div>
      </view>
    </u-modal>

    <!-- 题目选择弹框 -->
    <u-modal :show="showModalSelect" title="题目选择" @confirm="showModalSelect = false">
      <view class="slot-content">
        <div class="topic-content">
          <div
            v-for="(item, index) in questionList"
            :key="index"
            class="topic-wrapper"
            :class="{ correct: item.isCorrect, error: item.isError }"
            @click="currentIndex = index"
          >
            <div v-if="currentIndex == index">*</div>
            <div class="topic">{{ index + 1 }}</div>
          </div>
        </div>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      showModalSelect: false,
      // 正确率
      correctRate: '80%',
      // 已用时间 - 计时器 - 用于显示已用时间 格式 00:00:00
      usedTime: '00:00:00',
      // 正确题数
      correctNum: 0,
      // 错误题数
      errorNum: 0,
      // 答题数
      answerNum: 0,
      // 当前题目索引
      currentIndex: 0,
      // 题目列表
      questionList: [
        // 单选题
        {
          type: 1,
          title: '只有发生在短路事故时或者在负荷电流较大时，变流器中才会有足够的二次电流作为继电保护跳闸之用。',
          options: [
            { label: '变流器供给操作电源', value: 'A' },
            { label: '交流电压供给操作电源', value: 'B' },
            { label: '直流操作电源', value: 'C' },
            { label: '选项4', value: 'D' }
          ],
          answer: 'A',
          // 答案分析
          analysis: '这是答案解析'
        },
        // 多选题
        {
          type: 2,
          title:
            '只有发生在短路事故时或者在负荷电流较大时，变流器中才会有足够的二次电流作为继电保护跳闸之用。（多选题）',
          options: [
            { label: '变流器供给操作电源', value: 'A' },
            { label: '交流电压供给操作电源', value: 'B' },
            { label: '直流操作电源', value: 'C' },
            { label: '选项4', value: 'D' }
          ],
          answer: ['A', 'B'],
          // 知识点
          knowledge: '这是知识点'
        },
        // 判断题
        {
          type: 3,
          title:
            '只有发生在短路事故时或者在负荷电流较大时，变流器中才会有足够的二次电流作为继电保护跳闸之用。（判断题）',
          options: [
            { label: '正确', value: 'A' },
            { label: '错误', value: 'B' }
          ],
          answer: 'A'
        },
        // 带图片单选题
        {
          type: 4,
          title:
            '只有发生在短路事故时或者在负荷电流较大时，变流器中才会有足够的二次电流作为继电保护跳闸之用。（单选题）',
          img: '/static/images/题目-bg.png',
          options: [
            { label: '变流器供给操作电源', value: 'A' },
            { label: '交流电压供给操作电源', value: 'B' },
            { label: '直流操作电源', value: 'C' },
            { label: '选项4', value: 'D' }
          ],
          answer: 'A'
        },
        {
          id: 5
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        },
        {
          id: 6
        }
      ]
    }
  },
  mounted() {
    // 开始计时
    this.startTimer()
  },
  unmounted() {
    // 清除计时器
    clearInterval()
  },
  methods: {
    // 开始计时 - 实时更新已用时间
    startTimer() {
      setInterval(() => {
        const time = this.usedTime.split(':')
        let hours = parseInt(time[0])
        let minutes = parseInt(time[1])
        let seconds = parseInt(time[2])
        seconds++
        if (seconds === 60) {
          seconds = 0
          minutes++
          if (minutes === 60) {
            minutes = 0
            hours++
          }
        }
        this.usedTime = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${
          seconds < 10 ? '0' + seconds : seconds
        }`
      }, 1000)
    },
    clickImg() {
      uni.previewImage({
        urls: [this.questionList[this.currentIndex].img]
      })
    },
    // 处理选项点击事件
    handleOption(option, index) {
      console.log(option, index)
      // 判断是否已经选择过
      if (this.questionList[this.currentIndex].isSelect) {
        return
      } else {
        // 标记已选择
        this.questionList[this.currentIndex].isSelect = true
        // 判断是否正确
        if (option.value === this.questionList[this.currentIndex].answer) {
          // 当前选择
          this.questionList[this.currentIndex].select = option.value
          // 给当前题目添加正确标记
          this.questionList[this.currentIndex].isCorrect = true
          // 正确 - 给当前选项添加正确标记
          this.questionList[this.currentIndex].options[index].isCorrect = true
          // 正确题数+1
          this.correctNum++
        } else {
          // 当前选择
          this.questionList[this.currentIndex].select = option.value
          // 给当前题目添加错误标记
          this.questionList[this.currentIndex].isError = true
          // 错误 - 给当前选项添加错误标记
          this.questionList[this.currentIndex].options[index].isError = true
          // 并将正确选项标记
          this.questionList[this.currentIndex].options.forEach(item => {
            if (item.value === this.questionList[this.currentIndex].answer) {
              item.isCorrect = true
            }
          })
          // 错误题数+1
          this.errorNum++
        }
      }
    },
    // 处理多选题选项点击事件
    handleCheckbox(option, index) {
      console.log('🚀 ~ handleCheckbox ~ option, index:', option, index)
      // 给当前点击的增加边框 再次点击取消
      if (!option.isCheck) {
        this.questionList[this.currentIndex].options[index].isCheck = !option.isCheck
      } else {
        this.questionList[this.currentIndex].options[index].isCheck = false
      }
      // 将 isCheck: true 的选项的 value 放入 select 数组
      this.questionList[this.currentIndex].select = this.questionList[this.currentIndex].options
        .filter(item => item.isCheck)
        .map(item => item.value)
      console.log(
        '🚀 ~ handleCheckbox ~ this.questionList[this.currentIndex].select:',
        this.questionList[this.currentIndex].select
      )
    },
    handleOk() {
      // 判断是否已经选择过
      if (this.questionList[this.currentIndex].isSelect) {
        return
      } else {
        // 标记已选择
        this.questionList[this.currentIndex].isSelect = true
        const select = this.questionList[this.currentIndex].select
        const answer = this.questionList[this.currentIndex].answer
        // 判断是否正确
        const isCorrect = select.sort().toString() === answer.sort().toString()
        if (isCorrect) {
          // 正确题数+1
          this.correctNum++
          // 给当前题目添加正确标记
          this.questionList[this.currentIndex].options.forEach(item => {
            if (item.isCheck) {
              item.isCorrect = true
            }
          })
          // 给正确选项添加标记
          this.questionList[this.currentIndex].options.forEach(item => {
            if (answer.includes(item.value)) {
              item.isCorrect = true
            }
          })
        } else {
          // 错误题数+1
          this.errorNum++
          // 给当前题目添加错误标记
          this.questionList[this.currentIndex].isError = true
          // 给错误选项添加标记
          this.questionList[this.currentIndex].options.forEach(item => {
            if (answer.includes(item.value)) {
              item.isCorrect = true
            } else if (item.isCheck) {
              item.isError = true
            }
          })
        }
      }
    },
    // 提交
    handleSubmit() {
      console.log('提交')
      this.showModal = true
    },
    handleConfirm() {
      console.log('确认')
      this.showModal = false
    },
    // 结束答题
    handleClose() {
      console.log('结束')
      this.showModal = false
    },
    // 打开题目选择弹框
    openSelect() {
      this.showModalSelect = true
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  background: url('/static/images/题目-bg.png') no-repeat;
  background-size: 100% 100%;

  .slot-content {
    width: 100%;
    .correctRate {
      font-size: 30px;
      text-align: center;
    }

    .modal-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 20px;
      background: #f5f8fb;
      border-radius: 5px;
      height: 73px;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #9d9b9b;
        .num {
          font-size: 20px;
          color: #3185f0;
        }
      }
    }

    .topic-content {
      height: 300px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      overflow: auto;

      .topic-wrapper {
        width: 30px;
        height: 30px;
        border: 1px solid #409eff;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px;
        .topic {
          font-size: 11px;
          color: #409eff;
        }
        // 正确背景
        &.correct {
          background: #67d279;
          color: #fff;
          .topic {
            color: #fff;
          }
        }
        // 错误背景
        &.error {
          background: #f0514c;
          color: #fff;
          .topic {
            color: #fff;
          }
        }
      }
    }
  }

  .bottom-btn {
    position: fixed;
    bottom: 30px;
    left: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
    .btn {
      width: 100px;
      display: flex;
      justify-content: center;
      margin: 0 auto;
    }
  }

  .btn {
    width: 100px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-top: 40px;
  }

  .question-wrapper {
    padding: 30px;
    color: #08428d;

    .title {
      font-weight: 500;
      font-size: 15px;
      margin-bottom: 30px;
    }
    .option {
      margin-bottom: 5px;
      padding: 0 15px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      border-radius: 8px;
    }
    .active {
      border: 1px solid #1f92df;
    }

    .analysis {
      margin-top: 20px;
      font-weight: 700;
    }
    .analysis-container {
      margin-top: 6px;
      color: #475583;
      text-indent: 1em;
    }
  }

  .top-time {
    text-align: center;
    font-size: 13px;
    color: #fff;
    padding-top: 50px;
  }

  .num-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;

    .correct,
    .error,
    .total {
      display: flex;
      align-items: center;
      font-size: 13px;
      margin: 0 6px;
    }
    .correct {
      color: #49ac5a;
    }
    .error {
      color: #e34944;
    }
    .total {
      color: #f08439;
    }
    .num {
      margin-left: 3px;
    }
  }
}
</style>
