<template>
  <div class="subtitle-areas-layer">
    <section
      v-for="slice in slices"
      :key="`${slice.area.id}-${slice.segmentIndex}-${slice.renderLeft}`"
      class="subtitle-area"
      :style="{
        left: `${slice.renderLeft}px`,
        top: `${slice.renderTop}px`,
        width: `${slice.renderWidth}px`,
        height: `${slice.renderHeight}px`,
      }"
    >
      <div
        class="subtitle-area-inner"
        :style="{
          width: `${slice.area.width}px`,
          height: `${slice.area.height}px`,
          transform: `translateX(${-slice.clipOffset}px)`,
        }"
      >
        <div
          class="subtitle-text"
          :style="{
            color: slice.area.textStyle.color,
            fontSize: `${slice.area.textStyle.fontSize}px`,
            fontWeight: slice.area.textStyle.fontWeight,
            animationDuration: `${computeDuration(slice.area)}s`,
          }"
        >
          {{ slice.area.text }}
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import type { SubtitleAreaSlice } from "../services/subtitleAreaSliceService";

defineProps<{
  slices: SubtitleAreaSlice[];
}>();

function computeDuration(area: SubtitleAreaSlice["area"]) {
  const speed = area.speed > 0 ? area.speed : 80;
  // speed 单位：px/s，按区域宽度估算一轮时间。
  return Math.max(2, (area.width * 2) / speed);
}
</script>
