<template>
  <ie-page bg-color="var(--back)">
    <ie-navbar title="我的测评" />
    <view class="p-30">
      <view v-for="item in list" :key="item.type" class="item" :style="{ backgroundColor: item.bgColor }">
        <view class="flex items-center gap-30 p-30">
          <ie-image :src="item.image" custom-class="w-150 h-150 flex-shrink-0" />
          <view>
            <view class="text-28 font-medium text-fore-title">{{ item.title }}</view>
            <view class="mt-10 text-24 text-fore-tip">{{ item.description }}</view>
          </view>
        </view>
        <view class="bg-white px-20 py-20 flex items-center justify-between">
          <view class="flex items-center text-primary text-26 gap-6" @click="handleHistory(item.type)">
            <uv-icon name="list-dot" size="18" color="var(--primary-color)" />
            <text>历史记录</text>
          </view>
          <view class="flex items-center text-primary text-26 gap-6" @click="handleTest(item.homePage)">
            <text>点击测评</text>
            <uv-icon name="arrow-right" size="14" color="var(--primary-color)" />
          </view>
        </view>
      </view>
    </view>
  </ie-page>
</template>

<script lang="ts" setup>
import IconHolland from '@/pagesOther/static/image/holland.png';
import IconMbti from '@/pagesOther/static/image/mbti.png';
import { useTransferPage } from '@/hooks/useTransferPage';
const { transferTo, routes } = useTransferPage();

const list = [
  {
    title: '专业倾向测评',
    description: 'Holland测评是一种基于职业兴趣的测评工具，根据被测者对六种职业兴趣类型的倾向性，提供对应的职业建议。',
    type: 'holland',
    image: IconHolland,
    bgColor: '#dcedfc',
    homePage: routes.pageHolland
  },
  {
    title: '职业性格测评',
    description: 'MBTI测评是一种基于人格类型的测评工具，根据被测者对四种人格维度的偏好程度，判断其人格类型并提供相关建议。',
    type: 'mbti',
    image: IconMbti,
    bgColor: '#dbe2fb',
    homePage: routes.pageMbti
  }
]

const handleHistory = (type: string) => {
  transferTo(routes.testCenterList, {
    data: {
      type
    }
  });
}

const handleTest = (homePage: string) => {
  transferTo(homePage);
}
</script>

<style lang="scss" scoped>
.item+.item {
  margin-top: 30rpx;
}
</style>