<template>
  <el-scrollbar height="100vh">
    <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>
      <el-main class="main">

        <div class="content" v-if="scaleList.length > 0">
          <el-card shadow="hover" style="max-width: 520px; margin-bottom: 10px; position: relative;"
            v-for="item in scaleList" :key="item.scaleId" @click="gotoExam(item)">
            <img :src="item.coverUrl" alt="">
            <div class="title">{{ item.scaleName }}</div>
            <div v-if="item.used" class="desc">
              <el-tag round effect="dark" type="danger">已测评</el-tag>
            </div>
            <template #footer>
              <div class="footer">
                <div>
                  {{ item.scaleTitle }}
                </div>
                <div>
                  {{ item.questionsNum }}
                </div>
              </div>
            </template>
          </el-card>
        </div>
        <el-empty v-else description="暂无测评量表" style=" height: 600px;" />
      </el-main>
    </el-container>
  </el-scrollbar>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getPublishAPI, addRecordIdAPI, userInfoAPI } from '@/apis/user'

const router = useRouter()

const scaleList = ref([])

async function getScaleList() {
  const res = await getPublishAPI()
  if (res.code == 500) {
    ElMessage.error(res.msg)
    localStorage.removeItem('token')
    window.location.href = '/login'
  }
  scaleList.value = res.data
}

async function gotoExam(item) {
  if (item.used) {
    ElMessage.error('当前量表已测评，无法再测评！')
    localStorage.removeItem('token')
    return
  }

  await addRecordIdAPI(item.recordId)

  router.push({
    path: '/exam',
    query: {
      scaleId: item.scaleId,
      scaleName: item.scaleName,
      scaleTime: item.scaleTime,
      recordId: item.recordId,
      scaleTime: item.scaleTime
    }
  })
}

const userInfo = ref('')
async function getUserInfo() {
  const res = await userInfoAPI()
  userInfo.value = res.data.user

  localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
}

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

onMounted(() => {
  getScaleList()
  getUserInfo()
})

</script>

<style lang="scss" scoped>
.container-exam {
  .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;
    }
  }

  .main {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 0;

    .title {
      font-size: 30px;
      font-weight: bold;
      color: #31424E;
    }

    .content {
      margin-top: 20px;
      display: grid;
      grid-template-columns: 50% 50%;
      position: relative;

      img {
        width: 500px;
        height: 200px;
      }

      .title {
        font-size: 25px;
        font-weight: bold;
        color: #31424E;
        margin-top: 10px;
      }

      .desc {
        margin-top: 20px;
        color: red;
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        top: 0;
      }

      .footer {
        display: flex;
        justify-content: space-between;
        color: #DDDEDD;
        font-size: 18px;
      }
    }
  }
}
</style>
