<template>
    <view class="bg-white shadow-card rounded-lg overflow-hidden">
        <view class="p-24 flex justify-between items-center">
            <view class="text-fore-title flex gap-8">
                <text class="text-orange-400">{{ item.ruleCode }}</text>
            </view>
            <uv-text type="tips" prefix-icon="clock" :text="reportDate" class="!justify-end"/>
        </view>
        <view class="mx-20 grid grid-cols-4 text-sm ie-grid-border">
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">外向(E)</view>
                <view class="text-fore-title">{{ item.scoreE }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">内向(I)</view>
                <view class="text-fore-title">{{ item.scoreI }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">实感(S)</view>
                <view class="text-fore-title">{{ item.scoreS }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">直觉(N)</view>
                <view class="text-fore-title">{{ item.scoreN }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">思考(T)</view>
                <view class="text-fore-title">{{ item.scoreT }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">情感(F)</view>
                <view class="text-fore-title">{{ item.scoreF }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">判断(J)</view>
                <view class="text-fore-title">{{ item.scoreJ }}</view>
            </view>
            <view class="flex justify-center items-center gap-5 py-20">
                <view class="text-fore-content">认知(P)</view>
                <view class="text-fore-title">{{ item.scoreP }}</view>
            </view>
        </view>
        <view class="py-20 flex justify-center">
            <ie-tag-button text="查看报告" icon="arrow-right" reverse @click="handleReport"/>
        </view>
    </view>
</template>

<script setup lang="ts">
import {routes} from "@/common/routes";
import {MbtiRecord} from "@/types/test-center";
import {useTransferPage} from "@/hooks/useTransferPage";

const props = withDefaults(defineProps<{
    item: MbtiRecord
}>(), {
    item: () => ({} as MbtiRecord)
})

const {transferTo} = useTransferPage()

const map: Record<string, string> = {
    R: '现实型',
    A: '艺术型',
    I: '研究型',
    S: '社会型',
    E: '企业型',
    C: '传统型'
}

const typeName = computed(() => map[props.item.ruleCode ? props.item.ruleCode[0] : ''])
const reportDate = computed(() => getDateStr(props.item.createTime))

const getDateStr = (str: string) => {
    return str.substring(0, 10)
}

const handleReport = () => {
    transferTo(routes.pageMbtiReport, {
        data: {code: props.item.code}
    })
}
</script>

<style scoped>

</style>