<template>
    <view class="fx-col fx-cen-cen bg-slate-100 rounded-lg px-20 text-2xs text-content h-[44px] flex-nowrap"
          @click="goMajorDetail">
        <view class="fx-row items-end">
            <uv-image v-if="major.hot" src="/static/ie/entry/hot.png" width="18" height="18"/>
            <view class="fx-col fx-cen-cen">
                <text>{{ major.name }}</text>
                <text class="text-4xs text-primary-light">{{ major.majorDirection }}</text>
            </view>
        </view>
        <view v-if="major.ranking&&major.count">
            <text class="text-error">{{ major.ranking }}</text>
            <text>/{{ major.count }}</text>
        </view>
    </view>
</template>

<script>

import {useTransfer} from "@/hooks/useTransfer";

export default {
    name: "college-major-tag",
    props: {
        major: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const {transferTo} = useTransfer()
        const goMajorDetail = () => {
            transferTo('/pagesOther/pages/major-library/detail/detail', ['code'], props.major)
        }

        return {
            goMajorDetail
        }
    }
}
</script>

<style scoped>

</style>