<template>
  <div class="upload-video-container">
    <van-button icon="plus" type="primary" @click="showUploadPopup = true">上传视频</van-button>

    <div class="video-list">
      <div v-for="video in videos" :key="video.id" class="video-preview">
        <VideoPlayer :video-url="video.url" :autoplay="false" />
        <div class="video-info">
          <span class="video-name">{{ video.name }}</span>
          <van-button icon="delete" type="danger" size="small" class="delete-btn" @click="deleteVideo(video.id)">删除</van-button>
        </div>
      </div>
    </div>

    <UploadVideoPopup
      v-model="showUploadPopup"
      @submit="onVideoUploaded"
      @cancel="showUploadPopup = false"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import VideoPlayer from '@/components/ui/VideoPlayer.vue';
import UploadVideoPopup from '@/components/ui/UploadVideoPopup.vue';

const showUploadPopup = ref(false);
const videos = ref([]);

const onVideoUploaded = (videoInfo) => {
  videos.value.push(videoInfo);
};

const deleteVideo = (id) => {
  const index = videos.value.findIndex(video => video.id === id);
  if (index !== -1) {
    const newVideos = [...videos.value];
    newVideos.splice(index, 1);
    videos.value = newVideos;
  }
};
</script>

<style scoped>
.upload-video-container {
  padding: 16px;
}

.video-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.video-preview {
  position: relative;
  width: 100%;
}

.delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}
</style>