<template>
  <el-container class="container-exam">
    <el-header class="header">
      <img src="@/assets/images/logo.png" alt="">
      <span class="desc">本平台提供专业的自评量表、请仔细地阅读每一条，根据近期内您的实际感受，点击适合您的选项，请注意不要漏题！</span>
      <span class="user">{{ userInfo.nickName }}</span>
      <el-button round classs="right-btn" style="margin-left: 20px;" @click="logout">退出登录</el-button>
    </el-header>

    <div class="content">
      <el-container>
        <el-aside class="aside">
          <el-card class="card">
            <div class="scale-title">
              {{ scaleName }}
            </div>

            <div class="subject">
              <div class="subject-content">
                <div class="subject-title">{{ currentQuestion.questionContent || '' }}</div>
                <el-radio-group v-model="currentQuestion.answerId" @change="handleChange">
                  <el-radio size="large" border :value="item.answerId" v-for="item in currentQuestion.answerList"
                    :key="item.answerId">
                    {{ item.answerOption }}
                  </el-radio>
                </el-radio-group>
              </div>

              <div class="subject-btn">
                <el-button round size="large" @click="previous" :disabled="preDisable"
                  style="border: 1px solid #1AB087;">
                  <el-icon class="el-icon--left">
                    <ArrowLeft />
                  </el-icon>
                  上一题
                </el-button>
                <el-button round v-if="finishNum" size="large" @click="submit" style="border: 1px solid #1AB087;">
                  提交
                  <el-icon class="el-icon--right">
                    <ArrowRight />
                  </el-icon>
                </el-button>
                <el-button round v-else size="large" @click="next" style="border: 1px solid #1AB087;">
                  下一题
                  <el-icon class="el-icon--right">
                    <ArrowRight />
                  </el-icon>
                </el-button>
              </div>
            </div>

          </el-card>
        </el-aside>

        <el-main class="main">
          <el-card class="aside-card">
            <template #header>
              <div class="card-header">
                <span>答题卡</span>
              </div>
            </template>
            <div class="answer">
              <div v-for="(item, index) in questionList" :key="item">
                <el-button circle type="success" v-if="item.answerId" @click="handleAnswer(index)">
                  {{ index + 1 }}
                </el-button>
                <el-button v-else circle @click="handleAnswer(index)">{{ index + 1 }}</el-button>
              </div>
            </div>
            <template #footer>
              <el-countdown title="剩余时间" :value="timeLeft" value-style="color: #F56C6C;" />
            </template>
          </el-card>
        </el-main>
      </el-container>
    </div>

  </el-container>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getAnswerAPI, addAnswerAPI } from '@/apis/user'

const route = useRoute()
const scaleId = route.query.scaleId
const scaleName = route.query.scaleName
const scaleTime = route.query.scaleTime
const recordId = route.query.recordId

const router = useRouter()

const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))

const timeLeft = ref(Date.now() + 1000 * 60 * scaleTime)

const questionList = ref([])
const questionNum = ref(0)
const currentQuestion = ref({})
const questionTotal = ref(0)

async function getAnswer() {
  const res = await getAnswerAPI(scaleId)
  questionList.value = res.data
  currentQuestion.value = questionList.value[0]
  questionTotal.value = questionList.value.length
}

const preDisable = computed(() => {
  return questionNum.value === 0
})

function previous() {
  questionNum.value--
  if (questionNum.value <= 0) {
    questionNum.value = 0
  }

  currentQuestion.value = questionList.value[questionNum.value]
}

const nextDisable = computed(() => {
  return questionNum.value === questionTotal.value
})

const finishNum = computed(() => {
  const data = questionList.value.filter(item => item.answerId != null)
  return data.length == questionTotal.value
})

function next() {
  questionNum.value++

  if (questionNum.value >= questionList.value.length) {
    questionNum.value = questionList.value.length - 1
  }

  currentQuestion.value = questionList.value[questionNum.value]
}

function handleAnswer(index) {
  questionNum.value = index
  currentQuestion.value = questionList.value[questionNum.value]
}

function handleChange() {
  setTimeout(() => {
    next()
  }, 500)
}

function logout() {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  router.replace("/login")
}

onMounted(() => {
  getAnswer()
})

async function submit() {
  const data = questionList.value.map(item => {
    return {
      recordId: recordId, answerId: item.answerId, questionId: item.questionId
    }
  })

  const res = await addAnswerAPI({ scaleId, answerList: data })
  if (res.code == 200) {
    ElMessage({
      message: '提交成功',
      type: 'success'
    })

    if (res.data) {
      localStorage.setItem('examDetail', JSON.stringify(res.data))
      router.push({ path: '/examDetail', query: {} })
    } else {
      router.replace({ path: '/' })
    }
  } else {
    ElMessage({
      message: res.msg,
      type: 'error'
    })
  }
}
</script>

<style lang="scss" scoped>
.container-exam {
  height: 100vh;

  .header {
    height: 60px;
    background-color: #FFF;
    text-align: center;

    .desc {
      margin-left: 20px;
      color: #41515C;
      font-size: 18px;
      padding-top: 15px;
    }

    .user {
      margin-left: 50px;
      color: #41515C;
      font-size: 18px;
      padding-top: 15px;
    }
  }

  .content {
    width: 1200px;
    margin: 0 auto;

    .aside {
      padding-top: 20px;
      width: 800px;
      min-height: calc(100vh - 90px);
      margin: 0 auto;

      .card {
        height: 100%;

        .scale-title {
          text-align: center;
          font-size: 35px;
          font-weight: bold;
          line-height: 60px;
        }

        .subject {
          min-height: calc(100vh - 220px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .subject-content {
            margin-left: 50px;
            margin-top: 30px;

            .subject-title {
              text-align: center;
              color: #F56C6C;
              font-size: 30px;
              font-weight: bold;
            }

            ::v-deep(.el-radio-group) {
              display: block;
            }

            ::v-deep(.el-radio) {
              display: block;
              margin: 25px;
              padding: 5px;
              font-size: 25px;
            }

            ::v-deep(.el-radio__label) {
              font-size: 19px;
              font-weight: bold;
              white-space: normal;
            }
          }

          .subject-btn {
            display: flex;
            justify-content: space-around;
          }
        }
      }
    }

    .main {
      width: 400px;
      padding-top: 20px;
      margin: 0 auto;

      .aside-card {
        width: 100%;
        margin: 0 auto;

        .answer {
          display: grid;
          grid-template-columns: repeat(7, 1fr);

          .el-button {
            margin: 7px;
          }
        }
      }
    }
  }
}
</style>
