<template>
  <div class="think-tank-card" @click="handleClick">
    <div class="card-header">
      <div class="logo-box">
        <el-image 
          :src="tank.logo || 'https://via.placeholder.com/60'" 
          :alt="tank.name"
          fit="contain"
        >
          <template #error>
            <div class="image-slot">
              <el-icon><Picture /></el-icon>
            </div>
          </template>
        </el-image>
      </div>
      <div class="rank-badge" v-if="index !== undefined">
        <span class="rank-text">No.{{ index + 1 }}</span>
      </div>
    </div>

    <div class="title-row">
      <div class="tank-name" :title="tank.name">{{ tank.name }}</div>
      <div class="tank-country">{{ tank.country }}</div>
    </div>

    <div class="tank-description" :title="tank.describe">
      {{ tank.describe }}
    </div>

    <div class="tank-tags">
      <span 
        v-for="(tag, idx) in tank.tags" 
        :key="tag" 
        class="custom-tag"
        :class="idx % 2 === 0 ? 'tag-blue' : 'tag-red'"
      >
        {{ tag }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { Picture } from '@element-plus/icons-vue' // 引入图标用于图片加载失败占位

const props = defineProps({
  tank: {
    type: Object,
    required: true
  },
  // 新增 index用于显示 No.1, No.2 等排名
  index: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click', props.tank)
}
</script>

<style scoped lang="scss">
.think-tank-card {
  background: #ffffff;
  border-radius: 12px; // 更圆润的角
  padding: 16px;
  width: 280px; // 稍微加宽以匹配设计图比例，可根据父容器自适应
  // border: 1px solid #e4e7ed; // 设计图看起来边框很淡，或者主要是阴影
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden; // 确保排名背景不溢出

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
  }
}

/* --- 顶部区域 --- */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  position: relative; 
}

.logo-box {
  width: 48px;
  height: 48px;
  // 设计图中Logo是自适应显示的，取消了灰底
  display: flex;
  align-items: center;
  justify-content: center;
  
  .el-image {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    display: block; // 消除图片底部间隙
  }
  
  .image-slot {
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909399;
  }
}

/* 排名条样式 */
.rank-badge {
  /* 绝对定位到右上角，或者利用Flex布局 */
  position: absolute;
  right: -16px; /* 抵消父级padding */
  top: -6px;    /* 微调垂直位置 */
  
  height: 32px;
  padding-left: 30px; /* 渐变过度区 */
  padding-right: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
  /* 核心：背景渐变从透明到淡红色 */
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(206, 126, 126, 0.15) 40%, rgba(199, 58, 58, 0.15) 100%);
  
  .rank-text {
    font-family: 'Impact', sans-serif, 'Arial Black'; /* 选用粗体字体 */
    font-size: 20px;
    font-style: italic;
    color: #b54646; /* 暗红色字体 */
    letter-spacing: 1px;
  }
}

/* --- 标题行 --- */
.title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline; /* 文字基线对齐 */
  margin-bottom: 12px;
}

.tank-name {
  font-size: 16px;
  font-weight: 700;
  color: #303133;
  line-height: 1.4;
  margin-right: 8px;
  
  /* 防止名字太长换行导致布局崩坏，可按需开启截断 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tank-country {
  font-size: 13px;
  color: #909399;
  flex-shrink: 0;
}

/* --- 描述文本 --- */
.tank-description {
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 16px;
  min-height: 63px; /* 预留3行高度，保证卡片高度一致 */
  
  /* 3行省略号 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 底部标签 --- */
.tank-tags {
  display: flex;
  gap: 8px;
  margin-top: auto; /* 推到底部 */
}

/* 自定义标签样式，模拟设计图 */
.custom-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid transparent; // 预留边框位置
  
  &.tag-blue {
    background-color: #e6f1fc; /* 淡蓝背景 */
    color: #409eff;            /* 蓝色文字 */
    border-color: #d9ecff;
  }
  
  &.tag-red {
    background-color: #fef0f0; /* 淡红背景 */
    color: #f56c6c;            /* 红色文字 */
    border-color: #fde2e2;
  }
}
</style>