<script setup lang="ts">
import { VideoPlay } from '@element-plus/icons-vue'
import { useUpload } from '@/composables/useUpload'

interface Props {
  beforeUpload?: (file: any) => void
}

const props = defineProps<Props>()

const emit = defineEmits(['success'])

const { files, addFile, stopUpload } = useUpload({
  onUploadSucceed(file) {
    emit('success', file)
  }
})

onUnmounted(() => {
  stopUpload()
})

const fileChange = async (event: Event) => {
  const element = event.currentTarget as HTMLInputElement
  const files: FileList | null = element.files
  if (!files) return
  if (props.beforeUpload) {
    try {
      await props.beforeUpload(files)
    } catch (error) {
      console.log(error)
      return false
    }
  }
  for (const file of files) {
    addFile(file)
  }
}
defineExpose({ files })
</script>
<template>
  <div class="upload-video">
    <div class="upload-video__button">
      本地文件
      <input accept=".mp4" type="file" @change="fileChange" />
    </div>
    <div class="tips">推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。</div>

    <ul class="upload-video-list" v-for="(item, index) in files" :key="index">
      <li>
        <div class="upload-video-list__item-info">
          <el-icon><VideoPlay /></el-icon>
          <p>{{ item.file?.name }}</p>
        </div>
        <el-progress :stroke-width="2" :percentage="item.progress" v-if="item.progress !== 100" />
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.tips {
  font-size: 12px;
  line-height: 100%;
  color: #999999;
  margin: 10px 0;
}
.upload-video {
  width: 100%;
}
.upload-video__button {
  position: relative;
  width: 94px;
  line-height: 36px;
  background: rgba(250, 223, 230, 0.39);
  border: 1px solid #aa1941;
  border-radius: 20px;
  font-size: 14px;
  color: #aa1941;
  margin-right: 30px;
  text-align: center;
  cursor: pointer;
  input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
}
.upload-video-list {
  li {
    padding: 4px;
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    font-size: 14px;
    color: var(--el-text-color-regular);
    margin-bottom: 5px;
    position: relative;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: var(--el-fill-color-light);
  }
  .el-progress {
    font-size: 12px;
    :deep(.el-progress__text) {
      position: absolute;
      right: 0;
      bottom: 4px;
      min-width: auto;
    }
  }
}
.upload-video-list__item-info {
  display: flex;
  align-items: center;
  line-height: 24px;
  overflow: hidden;
  margin-right: 50px;
  p {
    margin-left: 10px;
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
