<template>
  <div 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>
  </div>
  <div class="content">
    <el-card style="margin-top: 20px;min-height: calc(100vh - 100px);">
      <template #header>
        <div class="card-header">
          <img src="@/assets/images/answer-element-1.png" alt="">
          <div class="text">测评完成</div>
        </div>
        <div class="score">
          总分：{{ des.totalScore }}分
        </div>
      </template>

      <el-descriptions :title="`测评项：${item.factorName || ''}`" direction="vertical" column="1" v-for="item in des.list"
        :key="item.factorRangeId">
        <el-descriptions-item :label="`结果分析：${item.evalDesc || ''}`">
          <div class="content-container" v-html="item.evalPropose"></div>
        </el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <div class="footer">
          <el-button type="primary" round @click="goToHome">返回首页</el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const data = localStorage.getItem('examDetail') || ''
const des = JSON.parse(data)

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

function goToHome() {
  localStorage.removeItem('examDetail')
  router.push('/')
}

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

<style lang="scss" scoped>
.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;
  min-height: calc(100vh - 550px);
  margin: 0 auto;

  .card-header {
    text-align: center;

    img {
      width: 300px;
    }

    .text {
      color: #1A91FF;
      font-size: 35px;
      font-weight: bold;
      margin: 20px 0;
    }
  }

  .score {
    color: #1A91FF;
    font-size: 25px;
    font-weight: bold;
  }

  .footer {
    text-align: center;
  }

  :deep(.content-container) {
    font-size: 13px;
    line-height: 3em;

    p {
      text-indent: 2em;
      color: #606266;
    }

    .ql-size-huge {
      font-size: 2.5em;
    }

    .ql-size-large {
      font-size: 1.5em;
    }
  }
}
</style>
