<script setup lang="ts">
/**
 * 文件职责：时段规则卡片。
 */
import type { ProductScheduleCardViewModel } from '../types';

import { computed } from 'vue';

import { WEEK_DAY_OPTIONS } from '../composables/schedule-page/constants';
import {
  buildTimeSegments,
  formatTimeRangeText,
} from '../composables/schedule-page/timeline-utils';

const props = defineProps<{
  color: string;
  item: ProductScheduleCardViewModel;
  productNames: string[];
}>();

const emit = defineEmits<{
  edit: [item: ProductScheduleCardViewModel];
  remove: [item: ProductScheduleCardViewModel];
  toggleStatus: [item: ProductScheduleCardViewModel];
}>();

const timeText = computed(() =>
  formatTimeRangeText(props.item.startTime, props.item.endTime),
);

const segments = computed(() =>
  buildTimeSegments(props.item.startTime, props.item.endTime),
);

const visibleProducts = computed(() => props.productNames.slice(0, 3));

const moreProductCount = computed(() =>
  Math.max(0, props.productNames.length - visibleProducts.value.length),
);

function isWeekDayActive(day: number) {
  return props.item.weekDays.includes(day);
}
</script>

<template>
  <div class="ptm-card" :class="{ disabled: item.status === 'disabled' }">
    <div class="ptm-card-hd">
      <span class="ptm-card-name">{{ item.name }}</span>
      <span
        class="g-tag"
        :class="item.status === 'enabled' ? 'ptm-tag-on' : 'ptm-tag-off'"
      >
        {{ item.status === 'enabled' ? '启用' : '停用' }}
      </span>
    </div>

    <div class="ptm-time-row">
      <span class="ptm-time-text">{{ timeText }}</span>
      <div class="ptm-timebar-wrap">
        <div
          v-for="(segment, index) in segments"
          :key="`${item.id}-segment-${index}`"
          class="ptm-timebar-fill"
          :style="{
            left: `${segment.left}%`,
            width: `${segment.width}%`,
            background: color,
          }"
        ></div>
      </div>
    </div>

    <div class="ptm-days">
      <span
        v-for="day in WEEK_DAY_OPTIONS"
        :key="day.value"
        class="ptm-day"
        :class="{ active: isWeekDayActive(day.value) }"
      >
        {{ day.label }}
      </span>
    </div>

    <div class="ptm-products">
      <span
        v-for="(name, index) in visibleProducts"
        :key="`${item.id}-product-${index}`"
        class="ptm-prod-pill"
      >
        {{ name }}
      </span>
      <span v-if="moreProductCount > 0" class="ptm-prod-pill ptm-prod-more">
        +{{ moreProductCount }}更多
      </span>
      <span v-if="productNames.length === 0" class="ptm-prod-pill">
        未关联商品
      </span>
    </div>

    <div class="ptm-card-ft">
      <button type="button" class="g-action" @click="emit('edit', item)">
        编辑
      </button>
      <button
        type="button"
        class="g-action"
        @click="emit('toggleStatus', item)"
      >
        {{ item.status === 'enabled' ? '停用' : '启用' }}
      </button>
      <button
        type="button"
        class="g-action g-action-danger"
        @click="emit('remove', item)"
      >
        删除
      </button>
    </div>
  </div>
</template>
