<script lang="ts" setup>
import TiltedButton from '@/components/tilted-button.vue'
import { StudyTour } from '../../../../core/libs/models'
import dayjs from 'dayjs'
import { useRouter } from '../../../../core/utils/router'
import { map } from '@designer-hub/assets/src/assets/svgs'
import { NetImages } from '../../../../core/libs/net-images'
import ActivityCountDown from '../../components/activity-count-down.vue'
import { getActivityStatusButtonText, getActivityStatusText } from '../../../../core/utils/common'

const props = defineProps<{
  customClass?: string
  options?: StudyTour & { levelsByMemberLevel; index }
}>()

const router = useRouter()
const toDetail = () => {
  router.push(`/pages/home/activity/detail/index?id=${props.options?.id}&type=studyTour`)
}
</script>
<template>
  <div
    class="relative box-border aspect-[1.15/1] bg-[length:100%] flex flex-col"
    :class="customClass"
    :style="{ backgroundImage: `url(${NetImages.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">
          第{{ options?.index + 1 }}站
        </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']">
            {{
              getActivityStatusText(
                options?.applyStartTime || options?.planApplyStartTime,
                options?.applyEndTime || options?.planApplyEndTime,
              )
            }}
          </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="options?.thumbnailUrl"
          mode="scaleToFill"
        />
        <div class="flex flex-col justify-around">
          <div class="text-black text-base font-normal font-['PingFang_SC'] leading-relaxed">
            {{ options?.name }}
          </div>
          <div class="flex items-center">
            <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] flex items-center"
            >
              {{ 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>
          <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]">
              {{ options?.needPointsCount }}
            </div>
          </div>
        </div>
        <div></div>
      </div>
      <div class="flex justify-between">
        <ActivityCountDown
          :start-at="options?.applyStartTime || options?.planApplyStartTime"
          :end-at="options?.applyEndTime || options?.planApplyEndTime"
        ></ActivityCountDown>
        <tilted-button>
          {{
            options?.ifSingnUp
              ? '已报名'
              : getActivityStatusButtonText(
                  options?.applyStartTime || options?.planStudyStartTime,
                  options?.applyEndTime || options?.planStudyEndTime,
                )
          }}
        </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"
        >
          <!-- 黄金会员以上等级 -->
          {{
            options?.memberLevel
              ?.map((it) => options?.levelsByMemberLevel[String(it)]?.memberLevelName)
              ?.join('、')
          }}
          可报名
        </div>
      </div>
    </div>
  </div>
</template>
