<template>
  <div class="banner-card">
    <div class="banner-content" @click="handleLearn">
      <img :src="FILE_DOWNLOAD_URL + props.banner.imageUrl" alt="banner" class="banner-image">
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Banner } from '@/types';
import { FILE_DOWNLOAD_URL } from '@/config';
import { useRouter } from 'vue-router';

const router = useRouter();
const props = defineProps<{
    banner: Banner;
}>();
console.log(props.banner);
function handleLearn() {
    if (props.banner.linkType === 1) {
      console.log(`/resource/${props.banner.linkID}`);
        router.push(`/article/show?articleId=${props.banner.linkID}`);
    } else if (props.banner.linkType === 2) {
      console.log(`/course/${props.banner.linkID}`);
        router.push(`/study-plan/course-detail?courseId=${props.banner.linkID}`);
    } else if (props.banner.linkType === 3) {
        window.open(props.banner.linkUrl, '_blank');
    }
}
</script>

<style lang="scss" scoped>
.banner-card {
  width: 100%;
  height: 100%;

  .banner-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: red;

    :hover {
      cursor: pointer;
    }

    .banner-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .banner-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 60px 120px;
      display: flex;
      align-items: flex-end;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);

      .learn-btn {
        width: 120px;
        height: 39px;
        background: #FFFFFF;
        border-radius: 12px;
        border: none;
        font-family: 'PingFang SC';
        font-weight: 600;
        font-size: 16px;
        line-height: 22.4px;
        color: #C62828;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background: rgba(255, 255, 255, 0.9);
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        &:active {
          transform: translateY(0);
        }
      }
    }
  }
}
</style>