<template>
    <view class="bg-white mx-card overflow-hidden">
        <view class="p-30 flex items-center gap-30" :style="{backgroundColor:bgColor}">
            <uv-image :src="img" width="80" height="auto" mode="widthFix"/>
            <view class="flex flex-col gap-20">
                <view class="text-main font-bold">{{ title }}</view>
                <view class="text-content text-xs">{{ desc }}</view>
            </view>
        </view>
        <uv-line/>
        <view class="py-20 flex fx-bet-cen">
            <mx-tag-button v-show="more" text="历史记录" icon="list-dot" @click="transferTo(more, moreNext)"/>
            <mx-tag-button text="点击测评" icon="arrow-right" reverse @click="transferTo(path)"/>
        </view>
    </view>
</template>

<script setup>
import {createPropDefine} from "@/utils";
import {useTransfer} from "@/hooks/useTransfer";

const props = defineProps({
    title: createPropDefine(''),
    bgColor: createPropDefine('transparent'),
    img: createPropDefine(''),
    desc: createPropDefine(''),
    more: createPropDefine(''),
    moreNext: createPropDefine(null, [Object, Array]),
    path: createPropDefine('')
})

const {transferTo} = useTransfer()
</script>

<script>
export default {
    name: 'test-guide-card'
}
</script>
<style scoped>

</style>