<script lang="ts" setup>
import Card from '@/components/card.vue'

defineProps({
  customClass: {
    type: String,
    default: () => '',
  },
})
</script>
<template>
  <card custom-class="p-0!">
    <view class="relative">
      <wd-img
        custom-class="vertical-bottom"
        width="100%"
        height="275"
        src="https://via.placeholder.com/347x464"
      ></wd-img>
      <div
        class="w-[63px] h-[29px] bg-black/60 rounded-[20px] backdrop-blur-[15px] absolute top-5 right-3.5 flex items-center justify-center"
      >
        <div class="text-white text-sm font-normal font-['PingFang SC'] leading-relaxed">
          报名中
        </div>
      </div>
      <view class="absolute left-3.5 bottom-2.5 flex items-center">
        <avatar-group-casual
          :show-number="3"
          :urls="[
            'https://via.placeholder.com/20x20',
            'https://via.placeholder.com/20x20',
            'https://via.placeholder.com/20x20',
          ]"
        ></avatar-group-casual>
        <div class="ml-1 text-white/60 text-sm font-normal font-['PingFang SC'] leading-[10.18px]">
          40人已报名
        </div>
      </view>
    </view>
    <div class="bg-[#27130d]/50 rounded-bl-2xl rounded-br-2xl backdrop-blur-[20px] p-3.5">
      <div class="w-[293px] text-white text-xl font-normal font-['PingFang SC'] leading-relaxed">
        日本研学·东京艺术大学设计游学
      </div>
      <view class="flex items-center">
        <div class="text-white/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
          游学时间：
        </div>
        <div class="text-white/60 text-base font-normal font-['PingFang SC'] leading-[34px]">
          07.15 08.10
        </div>
      </view>
      <div
        class="text-justify text-white/60 text-sm font-normal font-['PingFang SC'] leading-relaxed"
      >
        等级限制：黄金会员以上
      </div>
      <view class="flex items-center justify-between">
        <view class="flex items-end">
          <div class="text-white text-3xl font-bold font-['D-DIN Exp'] leading-normal">16000</div>
          <div class="ml-1 text-white/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
            积分
          </div>
        </view>
        <tilted-button custom-class="" size="large" color="white">立即报名</tilted-button>
      </view>
    </div>
  </card>
</template>
