<script lang="ts" setup>
import dayjs from 'dayjs'
import { Activity, StudyTour } from '../core/libs/models'
import TiltedButton from './tilted-button.vue'
import ActivityCountDown from '@/pages/home/components/activity-count-down.vue'
import ButtonEvo from './button-evo.vue'
import { useRouter } from '../core/utils/router'

withDefaults(defineProps<{ options?: StudyTour | Activity; type?: 'studyTour' | 'activity' }>(), {})
const router = useRouter()
</script>
<template>
  <view class="relative w-full box-border">
    <!-- <view class="absolute w-full h-full pt-2 pb-6 box-border">
      <view class="bg-black w-full h-full rounded-2xl"></view>
    </view> -->
    <view class="relative h-full mx--2.5 mb--6 mt--1 box-border">
      <wd-img
        :width="'100%'"
        :height="'100%'"
        src="/static/svgs/vector.svg"
        mode="widthFix"
      ></wd-img>
    </view>
    <view class="absolute left-0 right-0 top-1 bottom-6 z-1 p-3.5">
      <view class="w-full h-full flex flex-col justify-between">
        <div class="flex justify-between">
          <wd-img
            custom-class="ms-1.5"
            src="/static/svgs/unnamed.svg"
            width="105px"
            mode="widthFix"
          ></wd-img>
          <div></div>
        </div>

        <!-- <view class="flex"></view> -->
        <div class="w-[321px] h-[88px] relative">
          <div class="w-[94px] h-3 left-[185px] top-[64px] absolute">
            <div
              class="left-0 top-0 absolute text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px] flex items-center"
            >
              <!-- 07.15 08.10 -->
              {{ dayjs(options?.studyStartTime || options?.planStudyStartTime).format('MM.DD') }}
              <wd-icon name="play" size="22px"></wd-icon>
              {{ dayjs(options?.studyEndTime || options?.planStudyEndTime).format('MM.DD') }}
            </div>
          </div>
          <wd-img
            custom-class="w-[110px] h-[88px] left-0 top-0 absolute rounded-[10px] overflow-hidden vertical-bottom"
            :src="options?.thumbnailUrl"
            mode="scaleToFill"
          />
          <div
            class="w-[202px] left-[119px] top-0 absolute text-black text-base font-normal font-['PingFang_SC'] leading-relaxed"
          >
            <!-- 活动预告 | 日本研学·东京艺术大学设计游学 -->
            {{ options?.name }}
          </div>
          <div
            class="left-[119px] top-[64px] absolute text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
          >
            游学时间：
          </div>
        </div>
        <view class="flex items-center justify-between mb-1.5">
          <ActivityCountDown
            :start-at="options?.applyStartTime"
            :end-at="options?.applyEndTime"
          ></ActivityCountDown>
          <div>
            <ButtonEvo
              size="md"
              @click="
                router.push(`/pages/home/activity/detail/index?id=${options?.id}&type=${type}`)
              "
            >
              立即报名
            </ButtonEvo>
          </div>
        </view>
      </view>
    </view>
  </view>
</template>
