<template>
  <div class="ideological-card" @click="handleClick">
    <div class="card-image">
      <img v-if="resource?.coverImage" :src="FILE_DOWNLOAD_URL + resource.coverImage" :alt="resource.title" />
      <div v-else class="image-placeholder"></div>
    </div>
    <div class="date-box" v-if="publishDate">
      <div class="day">{{ publishDate.day }}</div>
      <div class="month">{{ publishDate.month }}</div>
    </div>
    <div class="card-content">
      <h3 class="card-title">{{ resource?.title || '标题' }}</h3>
      <p class="card-desc">
        {{ resource?.summary || '暂无简介' }}
      </p>
    </div>
  </div>
</template>

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

const props = defineProps<{
  resource?: ResourceRecommendVO;
}>();

const router = useRouter();

// 格式化发布日期
const publishDate = computed(() => {
  if (!props.resource?.publishTime) return null;
  
  const date = new Date(props.resource.publishTime);
  const day = date.getDate();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  
  return {
    day: day.toString(),
    month: `${year}.${month.toString().padStart(2, '0')}`
  };
});

// 点击卡片
function handleClick() {
  if (props.resource?.resourceID) {
    router.push(`/article/show?articleId=${props.resource.resourceID}`);
  }
}
</script>

<style lang="scss" scoped>
.ideological-card {
  background: #FFFFFF;
  border-radius: 0.625em;
  overflow: hidden;
  box-shadow: 0px 0.5em 1.25em 0px rgba(164, 182, 199, 0.2);
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;

  &:hover {
    transform: translateY(-0.25em);
    box-shadow: 0px 0.75em 1.75em 0px rgba(164, 182, 199, 0.3);
  }

  .card-image {
    width: 100%;
    aspect-ratio: 384 / 221;
    flex-shrink: 0;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .image-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.2)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23dots)" /></svg>');
      }
    }
  }

  .date-box {
    margin: 0 5.7%;
    transform: translateY(-50%);
    width: 18.75%;
    aspect-ratio: 1 / 1;
    background: #C62828;
    border-radius: 0.25em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3em;
    padding: 0.4em 0.3em;
    box-sizing: border-box;

    .day {
      font-family: 'PingFang SC';
      font-weight: 600;
      font-size: 1.875em;
      line-height: 0.73;
      color: #FFFFFF;
      text-align: center;
      width: 100%;
    }

    .month {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.57;
      color: #FFFFFF;
      text-align: center;
      width: 100%;
    }
  }

  .card-content {
    padding: 0 5.7% 5.7% 5.7%;
    flex: 1;
    display: flex;
    flex-direction: column;

    .card-title {
      font-family: 'PingFang SC';
      font-weight: 600;
      font-size: 1.25em;
      line-height: 1.4;
      color: #141F38;
      margin: 0 0 0.25em 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .card-desc {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.57;
      color: rgba(0, 0, 0, 0.3);
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>

