<template>
  <view class="preview panel">
    <video v-if="src" class="preview__video" :src="src" controls object-fit="contain" />
    <view v-else class="preview__empty">
      <view class="preview__badge">AI VIDEO</view>
      <text class="preview__title">成片完成后会出现在这里</text>
      <text class="preview__desc">极速出片会自动等待视频任务和分集合成；PC 精修模式可回到网页端继续制作。</text>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  src?: string;
}>();
</script>

<style scoped lang="scss">
.preview {
  overflow: hidden;
  background: #101522;
}

.preview__video,
.preview__empty {
  width: 100%;
  height: 700rpx;
}

.preview__empty {
  padding: 44rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(16, 21, 34, 0.18), rgba(16, 21, 34, 0.96)),
    linear-gradient(135deg, rgba(91, 92, 246, 0.5), rgba(30, 167, 255, 0.18)),
    #101522;
}

.preview__badge {
  width: fit-content;
  margin-bottom: 20rpx;
  padding: 8rpx 14rpx;
  border-radius: 999rpx;
  color: #bfdbfe;
  background: rgba(255, 255, 255, 0.12);
  font-size: 20rpx;
  font-weight: 760;
}

.preview__title {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 840;
}

.preview__desc {
  display: block;
  margin-top: 14rpx;
  color: rgba(255, 255, 255, 0.74);
  font-size: 25rpx;
  line-height: 1.58;
}
</style>
