<template>
  <ie-page bg-color="var(--back)">
    <ie-navbar title="MBTI职业性格测评" />
    <view class="p-30">
      <view class="text-28 indent-[2em]">MBTI（Myers-Briggs Type Indicator）是一种全球广泛应用的性格评估工具，根据荣格心理学理论，将人类性格分为16种类型。通过对
        内外向（I/E）、感知/直觉（S/N）、思维/情感（T/F）、判断/感知（J/P） 四个维度的分析，MBTI 帮助你深刻认识自己的性格倾向和行为模式。
      </view>
      <view class="mt-50 mb-10 text-28 font-semibold">
        为什么需要 MBTI 测评？
      </view>
      <view class="text-28 flex flex-col gap-20">
        <view class="">
          <text class="">发现你的天赋：</text>
          <text class="text-fore-tip">了解自己的性格特点和潜在优势，找到适合的学习方法和职业领域。</text>
        </view>
        <view class="">
          <text class="">规划职业未来：</text>
          <text class="text-fore-tip">在面对专业选择、实习和就业时，更有方向感和信心。</text>
        </view>
        <view class="">
          <text class="">提升沟通能力：</text>
          <text class="text-fore-tip">更好地理解自己和他人的行为模式，提升人际交往与团队合作能力。</text>
        </view>
        <view class="">
          <text class="">避开盲目选择：</text>
          <text class="text-fore-tip">不再随波逐流，让你的每一步决策都符合自己的性格特点。</text>
        </view>
      </view>
    </view>
    <ie-safe-toolbar :height="130" :shadow="false" bgColor="transparent">
      <view class="px-40 py-30 flex flex-col gap-20">
        <uv-button type="primary" shape="circle" @click="handleTest">开始测评</uv-button>
        <uv-button type="primary" plain shape="circle" @click="handleResult">测评结果</uv-button>
      </view>
    </ie-safe-toolbar>
  </ie-page>
</template>

<script lang="ts" setup>
import { useTransferPage } from '@/hooks/useTransferPage';

const { transferTo, routes } = useTransferPage();

const handleTest = () => {
  transferTo(routes.pageMbtiTest);
}

const handleResult = () => {
  transferTo(routes.testCenterList, {
    data: {
      type: 'mbti'
    }
  });
}

</script>

<style lang="scss" scoped></style>