<script lang="ts" setup>
import TiltedButton from '@/components/tilted-button.vue'
import { studyTourItemBg } from '../../../../core/libs/pngs'
import { PropType } from 'vue'
import { Content } from '../../../../core/models/moment'
import dayjs from 'dayjs'
import { useRouter } from '../../../../core/utils/router'
import { map } from '@designer-hub/assets/src/assets/svgs'

const props = defineProps({
  customClass: {
    type: String,
    default: () => '',
  },
  options: {
    type: Object as PropType<Content>,
    default: () => ({}),
  },
})
const router = useRouter()
const toDetail = () => {
  router.push(`/pages/home/study-tour/detail?id=${props.options.id}`)
}
</script>
<template>
  <div
    class="relative box-border aspect-[1.15/1] bg-[length:100%] flex flex-col"
    :class="customClass"
    :style="{ backgroundImage: `url(${studyTourItemBg})` }"
    @click="toDetail"
  >
    <div class="flex flex-col pt-2.25 px-6 gap-6">
      <div class="flex gap-1">
        <wd-img width="23" height="23" :src="map"></wd-img>
        <div class="text-white text-base font-normal font-['PingFang SC'] leading-relaxed">
          第二站
        </div>
        <div class="flex-1"></div>
        <div class="bg-[#f3f3f3] rounded-[20px] backdrop-blur-[15px] px-4 py-1.5">
          <div class="text-black/40 text-sm font-normal font-['PingFang SC']">未开始</div>
        </div>
      </div>
      <div class="flex gap-4 pt-2">
        <wd-img
          width="110"
          height="88"
          custom-class="rounded-[10px] overflow-hidden vertical-bottom"
          src="https://via.placeholder.com/110x88"
          mode="scaleToFill"
        />
        <div class="flex flex-col justify-around">
          <div class="text-black text-base font-normal font-['PingFang SC'] leading-relaxed">
            {{ options.title }}
          </div>
          <div class="flex">
            <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">
              游学时间：
            </div>
            <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">
              {{
                (dayjs(options.studyStartDate).format('MM.DD'),
                dayjs(options.studyEndDate).format('MM.DD'))
              }}
            </div>
          </div>
          <div class="flex">
            <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">
              兑换积分：
            </div>
            <div class="text-[#ef4343] text-xl font-normal font-['D-DIN Exp'] leading-[34px]">
              12100
            </div>
          </div>
        </div>
        <div></div>
      </div>
      <div class="flex justify-between">
        <view
          class="flex items-center text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]"
        >
          距结束还剩
          <view
            class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
          >
            <view class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]">
              05
            </view>
          </view>
          天
          <div
            class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
          >
            <div class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]">
              05
            </div>
          </div>
          时
          <div
            class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
          >
            <div class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]">
              05
            </div>
          </div>
          分
        </view>
        <tilted-button>立即报名</tilted-button>
      </div>
      <div class="flex justify-between border-t-solid border-t-[#f2f2f2] border-t-1 py-4">
        <div></div>
        <div
          class="text-justify text-black/40 text-xs font-normal font-['PingFang SC'] leading-relaxed"
        >
          黄金会员以上等级可报名
        </div>
      </div>
    </div>
  </div>
</template>
