<template>
  <div class="video-bottom-controls" v-if="visible">
    <div class="detect-progress">
      <div class="progress-info">
        <span>{{ statusText || '检测中...' }}</span>
        <span class="progress-pct">{{ progress.toFixed(1) }}%</span>
      </div>
      <el-progress :percentage="Math.round(progress)" :stroke-width="8" />
      <div class="progress-actions">
        <el-button size="small" :type="paused ? 'warning' : 'info'" @click="$emit('togglePause')" :disabled="ending">
          <el-icon :size="14"><component :is="paused ? 'VideoPlay' : 'VideoPause'" /></el-icon>
          {{ paused ? '恢复处理' : '暂停处理' }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  visible: Boolean,
  progress: { type: Number, default: 0 },
  statusText: String,
  paused: Boolean,
  ending: Boolean
})

defineEmits(['togglePause'])
</script>

<style lang="scss" scoped>
.video-bottom-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px 0;

  .detect-progress {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;

    .progress-info {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: $text-secondary;

      .progress-pct {
        color: $primary-color;
        font-weight: 600;
      }
    }

    .progress-actions {
      display: flex;
      gap: 8px;

      .el-button {
        flex: 1;
      }
    }
  }
}
</style>
