<template>
    <div class="video">
        <video style="width: 100%;height: 100%;" ref="video" :src="src" controls
            controlslist="nodownload  noremoteplayback noplaybackrate noskipforward" @ended="handleEnded"
            @timeupdate="checkPlayback">
        </video>




    </div>
</template>

<script setup>
import { onMounted, ref, watch, defineProps, watchEffect } from "vue";
import { getApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
import { ElMessage, ElMessageBox } from "element-plus";
const emits = defineEmits(["EndChange",]);
const src = ref(null)
const video = ref(null)
const imgPrefix = ref('png,jpg,gif,bmp')
const videoPrefix = ref('avi,wmv,mp4,mov,3gp')
const newsschedule = ref(0) //当前观看视频进度
const currTime = ref(null)
const maxTime = ref(0)
const initialtime = ref(0) //记录用户观看时长
const props = defineProps({
    // 数据
    showVideo: {
        type: Boolean,
        default: false
    },
    videourl: String
});
onMounted(() => {

})
watch(
    () => props.showVideo,
    (newVal) => {
        if (newVal) {

            showFile()
            // timer()
        }
    },
    {
        deep: true,
        immediate: true
    }
)
const videoTime = ref(0);


function showFile() {
    getApi({}, '/mosty-base/minio/image/downloadUrl/' + props.videourl).then((res) => {
        if (res) {
            let prefix = res.substring(res.lastIndexOf('.') + 1);
            if (prefix) {
                if (imgPrefix.value.indexOf(prefix.toLowerCase(prefix)) != -1) {
                    // 这里是展示图片信息
                    showImagePreview([res])
                } else if (videoPrefix.value.indexOf(prefix.toLowerCase(prefix)) != -1) {
                    //这里是视频信息
                    src.value = res;
                    video.value.play();
                    // videoPlayer()
                } else {
                    // 这里是其他格式的问题件
                    window.open(res, "_blank")
                }
            } else {
                ElMessage.warning('附件格式错误！');
            }
        } else {
            ElMessage.warning('学习附件不存在！');
        }
    }).catch((err) => {
        ElMessage({ type: 'warning', message: err.message });
    });
}
// const play = () => {
//     if (video.value) {
//         video.value.play();
//     }
// };
// watchEffect(() => {
//     if (video.value.currentTime >= video.value.duration) {
//         video.value.pause();
//     }
// });
const checkPlayback = () => {
    if (video.value.currentTime >= video.value.duration) {
        video.value.pause();
    }
};
const handleEnded = () => {
    emits("EndChange", true);
};

</script>

<style scoped>
.video {
    width: 100%;
    height: 100%;
}
</style>
