<script lang="ts" setup>
import type { VideoUploadItem } from '@/utils/videoUpload'

interface Props {
  videoList: VideoUploadItem[]
  modelValue: boolean
}
interface Emits {
  (e: 'update:modelValue', modelValue: boolean): void
}
const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const currentPage = ref(1)
const page = reactive({
  size: 10,
  currentPage: 1
})
const handleCancel = function () {
  emit('update:modelValue', false)
}
const handleSizeChange = (val: any) => {
  page.size = val
}
const handleCurrentChange = (val: any) => {
  page.currentPage = val
}
</script>
<template>
  <el-dialog :model-value="props.modelValue" title="更多视频文件" :before-close="handleCancel" width="30vw">
    <div
      v-for="(item, index) in props.videoList.slice((page.currentPage - 1) * page.size, page.currentPage * page.size)"
      :key="index"
    >
      <div class="video-info">
        <span class="name">{{ item.file?.name }}</span>
        <el-progress style="width: 200px" :percentage="item.progress" class="view" />
      </div>
    </div>
    <el-pagination
      v-model:currentPage="currentPage"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 20, 30, 50]"
      :total="props.videoList.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-dialog>
</template>
<style lang="scss" scoped>
.video-info {
  display: flex;
  margin-top: 10px;
  .name {
    color: #333333;
    font-size: 14px;
    line-height: 1.5;
  }
  .view {
    font-size: 16px;
    line-height: 100%;
    margin-left: 20px;
    cursor: pointer;
  }
}
:deep(.el-pagination) {
  margin-top: 20px;
}
</style>
