<template>
  <!-- 岗位概览统计卡片 -->
  <div class="job-stats-overview" :style="{ height: cardHeight }">
    <!-- 右上角装饰图片 -->
    <img class="job-stats-overview__icon" src="@/assets/images/job-count-card-icon01.png" alt="" />
    <!-- 内容居中容器 -->
    <div class="job-stats-overview__inner">
      <!-- 标题区域 -->
      <div class="job-stats-overview__header">
        <div class="job-stats-overview__title">{{ title }}</div>
        <div class="job-stats-overview__date">{{ subtitle }}</div>
      </div>
      <!-- 数据指标区域 -->
      <div class="job-stats-overview__metrics">
        <!-- 今日新增 -->
        <div class="job-stats-overview__metric-item">
          <div class="job-stats-overview__metric-num">{{ todayCount }}</div>
          <div class="job-stats-overview__metric-label">{{ todayLabel }}</div>
        </div>
        <!-- 分隔线 -->
        <div class="job-stats-overview__divider"></div>
        <!-- 累计收录 -->
        <div class="job-stats-overview__metric-item">
          <div class="job-stats-overview__metric-num">{{ totalCount }}</div>
          <div class="job-stats-overview__metric-label">{{ totalLabel }}</div>
        </div>
        <!-- 分隔线 -->
        <div class="job-stats-overview__divider"></div>
        <!-- 可投率 -->
        <div class="job-stats-overview__metric-item">
          <div class="job-stats-overview__metric-num">{{ rateValue }}</div>
          <div class="job-stats-overview__metric-label">{{ rateLabel }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/** 岗位概览统计卡片 - 所有展示数据由父组件传入 */

defineProps<{
  /** 卡片标题，如"岗位概览" */
  title: string
  /** 副标题，如"数据截至 07.28" */
  subtitle: string
  /** 今日新增数字 */
  todayCount: string | number
  /** 今日新增标签 */
  todayLabel: string
  /** 累计收录数字 */
  totalCount: string | number
  /** 累计收录标签 */
  totalLabel: string
  /** 可投率数字 */
  rateValue: string | number
  /** 可投率标签 */
  rateLabel: string
  /** 卡片高度（从父级传入，与筛选面板同步） */
  cardHeight?: string
}>()
</script>
