<script setup lang="ts">
/*
 * 组件名: index
 * 组件用途: XXX
 * 创建日期: 2024/8/16
 * 编写者: JutarryWu
 */
const router = useRouter()

const subjectInfo = ref({
  name: '空间定向训练',
  id: 1,
})
const urlList = ['/cognitiveTasks/spatialOrientationAbility']

function startTest() {
  router.push(urlList[subjectInfo.value.id - 1])
}

async function exec() {}

onMounted(() => {
  exec()
})
</script>

<template>
  <section class="app-container">
    <van-nav-bar class="self-nav-bar" title="认知任务" />
    <div class="ml-[12px] mt-[18px] min-h-[180px] w-[350px] rounded-[16px] bg-white p-x-[15px] p-y-[15px]">
      <div class="flex-row">
        <van-image :src="`/src/assets/images/task/${subjectInfo.id}.png`" class="h-[100px] w-[100px]" />
        <div class="ml-[24px] text-[20px] text-black font-600">
          {{ subjectInfo.name }}
        </div>
      </div>
      <div class="mb-[10px] mt-[20px] text-[18px] text-[#00AABD]">
        操作提示：
      </div>
      <div class="text-[15px] text-[#999999] line-height-[20px]">
        空间定向是测试者在所处环境中根据参照点或者绝对坐标系统定位正确辨识方向的知觉反应，要求主体编码并记住环境中不同地点的相对位置，然后利用自身的认知结构和空间表征对自己所在的空间的感知觉线索进行迅速而准确的分析和加工，从而对自己姿态、位置和运动做出判断。
      </div>
    </div>
    <van-button type="primary" color="#00AABD" class="bottom-block-btn" @click="startTest">
      开始测试
    </van-button>
  </section>
</template>

<style scoped lang="less">
.app-container {
  background-image: url('@/assets/images/bg-main.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; /* 可选，让图片居中对齐 */

  :deep(.van-nav-bar) {
    background-color: transparent;

    &.van-hairline--bottom:after {
      border: none;
    }
  }
}
</style>
