<script setup>
defineProps({
  timelines: { type: Array, default: () => [] },
})
const dialogVisible = ref(false)

const handleClick = () => {
  dialogVisible.value = true
}
// 毫秒转分钟 00:00,需要补0
const formatTime = (time) => {
  const minutes = Math.floor(time / 1000 / 60)
  const seconds = Math.floor((time / 1000) % 60)
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
}
</script>

<template>
  <el-button type="primary" @click="handleClick">查看口播文字</el-button>
  <el-dialog v-model="dialogVisible" title="口播文字" width="600px">
    <el-timeline>
      <el-timeline-item
        placement="top"
        v-for="(item, index) in timelines"
        :key="index"
        :timestamp="formatTime(item.BeginTime)">
        {{ item.Text }}
      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</template>
