<template>
    <view class="rounded-xl w-460 min-w-460 volunteer-tier-item" :class="customClass"
          :style="{ background: `radial-gradient( 0% 0% at 0% 0%, ${data.colorFrom} 0%, ${data.colorTo} 100%)` }">
        <view class="h-90 px-30 flex justify-between items-center">
            <view class="flex items-center">
                <ie-image is-oss :src="data.icon" custom-class="w-48 h-48"/>
                <text class="ml-8 text-base font-bold" :style="{color:data.colorText}">{{ data.typeName }}</text>
            </view>
            <view class="text-sm text-fore-light flex items-center" @click="$emit('more')">
                <text>更多</text>
                <uv-icon name="arrow-right" color="info"/>
            </view>
        </view>
        <uv-line hairline/>
        <view class="mt-10 px-30 text-sm" :style="{color:data.colorText}">{{ data.desc }}</view>
        <view class="p-30 flex flex-col gap-20">
            <view v-for="(u, i) in data.list" class="flex text-sm" @click="$emit('item-click', u)">
                <view class="w-32 text-fore-light">{{ i + 1 }}</view>
                <view class="text-fore-title truncate">{{ u.name }}</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">

import {UniversityTier} from "@/types/university";

defineProps<{
    data: UniversityTier;
    customClass: string|object;
}>()

defineEmits(['more', 'item-click'])
</script>

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