<template>
  <div class="model-card" @click="$emit('click', model)">
    <!-- 右上角：按量/按次收费 -->
    <div class="tag-top">{{ billingTagText }}</div>

    <!-- 头部：图标 + 模型名 -->
    <div class="card-header">
      <div class="model-icon">
        <LobeIcon
            :name="iconInfo.name"
            :variant="iconInfo.variant"
            :size="30"
        />
      </div>
      <div>
        <div class="model-name" :title="model.modelName">{{ model.modelName }}</div>
        <!-- 标签 -->
    <div v-if="modelTags.length > 0" class="card-tags">
      <el-tag
          v-for="(tag, index) in modelTags"
          :key="tag"
          size="small"
          :type="tagColors[index % tagColors.length]"
          effect="plain"
      >{{ tag }}</el-tag>
    </div>
      </div>
    </div>

    <!-- 描述 -->
    <div class="card-description">
      {{ model.description || '暂无描述' }}
    </div>

    <!-- 底部：价格展示 -->
    <div class="card-footer">
      <div class="price-text">
        <!-- 按次计费：单次价格 -->
        <template v-if="isPerCall">
          <span>每次调用<b>¥{{ formatPrice(model.inputPrice) }}</b></span>
        </template>
        <!-- 分档计费：显示第一档 -->
        <template v-else-if="hasTieredPrice">
          <span>输入价格:<b>¥{{ formatPrice(model.tiers[0].inputRatio) }}</b></span>
          <span class="unit"> / 1M</span>
          <span class="divider"></span>
          <span>输出价格:<b>¥{{ formatPrice(model.tiers[0].outputRatio) }}</b></span>
          <span class="unit"> / 1M</span>
        </template>
        <!-- 按量计费：输入/输出 -->
        <template v-else>
          <span>输入价格:<b>¥{{ formatPrice(model.inputPrice) }}</b></span>
          <span class="unit"> / 1M</span>
          <span class="divider"></span>
          <span>输出价格:<b>¥{{ formatPrice(model.outputPrice) }}</b></span>
          <span class="unit"> / 1M</span>
        </template>
      </div>
      <!-- 缓存价格另起一行 -->
      <div v-if="hasCachePrice" class="price-text cache-price-row">
        <span>缓存读取价格:<b>¥{{ formatPrice(model.cacheReadPrice) }}</b></span>
        <span class="unit"> / 1M</span>
        <span class="divider"></span>
        <span>缓存写入价格:<b>¥{{ formatPrice(model.cacheCreatePrice) }}</b></span>
        <span class="unit"> / 1M</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import LobeIcon from '@/components/LobeIcon/index.vue'

const props = defineProps({
  model: {
    type: Object,
    required: true
  }
})

defineEmits(['click'])

// 从 model.icon 字符串中拆出 vendor 名 + variant
// "DeepSeek.Color" -> { name: "DeepSeek", variant: "Color" }
// "DeepSeek.Mono"   -> { name: "DeepSeek", variant: "Mono" }
// 后端不主动推断，没配就返回空，由 LobeIcon fallback 到首字母
const iconInfo = computed(() => {
  if (props.model?.icon) {
    const [name, variant] = props.model.icon.split('.')
    return { name, variant: variant || 'Color' }
  }
  return { name: '', variant: 'Color' }
})

// 是否按次计费（quotaType === 1）
const isPerCall = computed(() => Number(props.model?.quotaType) === 1)

// 右上角 tag 文案
const billingTagText = computed(() => {
  if (isPerCall.value) return '按次收费'
  if (isTiered.value) return '动态计费'
  return '按量收费'
})

// 是否分档计费
const isTiered = computed(() => props.model?.billingMode === 'tiered_expr')

// 底部 tag 文案
const priceTagText = computed(() => (isPerCall.value ? '单次价格' : '收费价格'))

// 是否有缓存价格（缓存读取价格和缓存创建价格都大于0才显示）
const hasCachePrice = computed(() => {
  return props.model?.cacheReadPrice > 0 || props.model?.cacheCreatePrice > 0
})

// 是否有分档价格
const hasTieredPrice = computed(() => {
  return isTiered.value && props.model?.tiers && props.model.tiers.length > 0
})

// 模型标签列表
const modelTags = computed(() => {
  if (!props.model?.tags) return []
  return props.model.tags.split(',').map(t => t.trim()).filter(t => t)
})

// 标签颜色循环（鲜艳色系）
const tagColors = ['primary', 'success', 'warning', 'danger', '']

function formatPrice(price) {
  if (price === null || price === undefined) return '-'
  const num = Number(price)
  if (Number.isNaN(num)) return '-'
  return num.toFixed(4).replace(/\.?0+$/, '')
}
</script>

<style scoped lang="scss">
.model-card {
  position: relative;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 12px;
  padding: 20px 24px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  cursor: pointer;

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

/* 右上角：按量收费 */
.tag-top {
  position: absolute;
  top: 0;
  right: 0px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 0 6px 0px 6px;
  line-height: 1.4;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  margin-bottom: 14px;
}

.model-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f5f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.model-name {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-description {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 39px;
  word-break: break-word;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  margin-top: 2px;
  .el-tag {
    margin: 0;
    font-size: 12px;
  }
}

.card-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}

.price-text {
  font-size: 13px;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  & span {
    display: flex;
    align-items: center;
  }
  b {
    color: #ee5a52;
    font-weight: 600;
    margin: 0 2px;
  }

  .divider {
    margin: 0 8px;
  }

  .unit {
    color: #999;
    font-size: 12px;
  }

  .cache-price {
    color: #909399;
  }
}

.cache-price-row {
  font-size: 13px;
  color: #666;
}
</style>
