<script setup lang="ts">
/**
 * 文件职责：今日供应时间轴卡片。
 */
import type { ScheduleTimelineRow } from '../types';

import { TIMELINE_AXIS_TICKS } from '../composables/schedule-page/constants';

defineProps<{
  rows: ScheduleTimelineRow[];
}>();
</script>

<template>
  <div class="ptm-tl-card">
    <div class="ptm-tl-title">今日供应时间轴</div>

    <div class="ptm-tl-axis" style="margin-right: 10px; margin-left: 90px">
      <span
        v-for="tick in TIMELINE_AXIS_TICKS"
        :key="`tick-${tick}`"
        :style="{ left: `${(tick / 24) * 100}%` }"
      >
        {{ tick }}
      </span>
    </div>

    <div v-if="rows.length > 0" class="ptm-tl-rows">
      <div
        v-for="row in rows"
        :key="row.id"
        class="ptm-tl-row"
        :class="{ disabled: row.status === 'disabled' }"
      >
        <span class="ptm-tl-label">{{ row.name }}</span>
        <div class="ptm-tl-track">
          <div
            v-for="(bar, index) in row.bars"
            :key="`${row.id}-bar-${index}`"
            class="ptm-tl-bar"
            :style="{
              left: `${bar.left}%`,
              width: `${bar.width}%`,
              background: row.color,
            }"
          >
            {{ bar.label }}
          </div>
        </div>
      </div>
    </div>

    <div v-else class="ptm-tl-empty">今日暂无供应规则</div>
  </div>
</template>
