<template>
    <div ref="videoCons" style="width:100%;height:100%;  position: relative;" @mousemove="move">
        <video class="video" @loadeddata="loadeddata" ref="video" autoplay @timeupdate="upDate" :src="src"
            @ended="handleEnded">
            <!-- <button v-if="isFullscreen" @click="exitFullscreen">退出全屏</button> -->
        </video>
        <div class="controsCon" :style="{ opacity: opacity }">
            <!-- 播放/暂停 -->
            <div class="playBtn" @click="play">
                <el-icon v-if="!isPlay" style="font-size: 28px;">
                    <VideoPlay />
                </el-icon>
                <el-icon v-if="isPlay" style="font-size: 28px;">
                    <VideoPause />
                </el-icon>
            </div>
            <div class="volum">
                <!-- 静音/取消静音 -->
                <img v-if="!syshow" @click="muteUnmute" :src="getImgUrl('indexImages/jingyin.jpg')" alt="静音" />
                <img v-if="syshow" @click="muteUnmute" :src="getImgUrl('indexImages/shengyin.jpg')" alt="取消静音" />
                <div class="vCon">
                    <el-slider @input="volum" v-model="volums" vertical style="height:100%;"></el-slider>
                </div>
            </div>
            <div class="jdt">
                <!-- v-if="!isNaN(parseInt(percent))" -->
                <el-progress :percentage="percent" :show-text="false"></el-progress>
            </div>
            <div class="sjbox">
                <span>{{ curJd }}</span>
                <span>{{ allTime }}</span>
            </div>
            <div class="allCon">
                <!-- 全屏 -->
                <img @click="fullscreen" style="width: 40px;height: 40px;"
                    src="https://xinyu22.oss-cn-beijing.aliyuncs.com/uploads/20230620/8c191f53af505c6623b5c1a397eec42e.png">
                <!-- 退出全屏 -->
            </div>
        </div>
    </div>
</template>
<script setup>
import { getApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { getImgUrl } from "@/utils/tools.js"
const emits = defineEmits(["EndChange","changeTime"]);
import { onMounted, ref, watch, defineProps } from "vue";
const props = defineProps({
    // 数据
    showVideo: {
        type: Boolean,
        default: false
    },
    videourl: String,
    currTime: {
        type: Number,
        default: 0
    }
});
const src = ref(null)
const imgPrefix = ref('png,jpg,gif,bmp')
const videoPrefix = ref('avi,wmv,mp4,mov,3gp')
const video = ref(null);
const isPlay = ref(true);
const isFullscreen = ref(false);
const syshow = ref(true);
const duration = ref(0);
const volums = ref(30);
const prefVom = ref(0.3);
const percent = ref(0);
const opacity = ref(0);
const full = ref(false);
const timer = ref(null);
const curJd = ref('00:00:00');
const allTime = ref('00:00:00');
watch(
    () => props.showVideo,
    (newVal) => {
        if (newVal) {

            showFile()
            // timer()
        }
    },
    {
        deep: true,
        immediate: true
    }
)
watch(
  () => props.currTime,
  (newVal) => {
    if (video.value) {
      video.value.currentTime = newVal
    }
  },
  {
    deep: true,
    immediate: true
  }
)
const handleEnded = () => {
    emits("EndChange", true);
};

onMounted(() => {
    video.value.volume = prefVom.value
})
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();
                } else {
                    // 这里是其他格式的问题件
                    window.open(res, "_blank")
                }
            } else {
                ElMessage.warning('附件格式错误！');
            }
        } else {
            ElMessage.warning('学习附件不存在！');
        }
    }).catch((err) => {
        ElMessage({ type: 'warning', message: err.message });
    });
}


function loadeddata() {
    const dur = video.value.duration
    duration.value = dur
}
function move() {
    opacity.value = 1
    timer.value && clearTimeout(timer.value)
    timer.value = setTimeout(() => {
        opacity.value = 0
    }, 4000)

}
function upDate() {
    if (video.value.currentTime) {
        const cur = video.value.currentTime
        const dur = video.value.duration
        percent.value = (cur / dur) * 100
        allTime.value = video.value.currentTime
        allTime.value = formatTime(parseInt(video.value.currentTime))
        curJd.value = formatTime(parseInt(video.value.duration))
        emits("changeTime", Math.ceil(video.value.currentTime));
    }

}
//播放或暂停
function play() {
    isPlay.value = !isPlay.value
    isPlay.value ? video.value.play() : video.value.pause()
}
//静音/取消静音
function muteUnmute() {
    syshow.value = !syshow.value
    video.value.muted = !video.value.muted;
}
// 全屏
function fullscreen() {
    if (video.value.requestFullscreen) {
        video.value.requestFullscreen();
    } else if (video.value.mozRequestFullScreen) { // Firefox
        video.value.mozRequestFullScreen();
    } else if (video.value.webkitRequestFullscreen) { // Chrome, Safari and Opera
        video.value.webkitRequestFullscreen();
    } else if (video.value.msRequestFullscreen) { // IE/Edge
        video.value.msRequestFullscreen();
    }
    full.value = !full.value
    isFullscreen.value = !isFullscreen.value
}
// 退出全屏
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { // Firefox
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { // IE/Edge
        document.msExitFullscreen();
    }
    full.value = !full.value
}
function volum(e) {
    volums.value = e
    prefVom.value = e / 100
    video.value.volume = prefVom.value
}

const formatTime = (s) => {
    let t
    if (s > -1) {
        let hour = Math.floor(s / 3600)
        let min = Math.floor(s / 60) % 60
        let sec = s % 60
        if (hour < 0 || hour === 0) {
            t = ''
        } else if (0 < hour < 10) {
            t = '0' + hour + ":"
        } else {
            t = hour + ":"
        }

        if (min < 10) {
            t += "0"
        }
        t += min + ":"
        if (sec < 10) {
            t += "0"
        }
        t += sec
    }
    return t
}

</script>
<style scoped lang="scss">
.video {
    width: 100%;
    height: 100%;
    background-color: black;
    position: relative;
}

.qbbox {
    opacity: 1;
    z-index: 9999;
    /* float: left; */
    width: 100%;
    position: absolute;
    top: 20px;
    right: 0px;
}

/* .videCOns {
    position: relative;
} */

.sjbox {
    width: 16%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fdfafa;
    font-size: 18px;
    padding: 0 20px;
    box-sizing: border-box;
}

.controsCon {
    width: 100%;
    position: absolute;
    bottom: 1px;
    left: 0px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #000;
}

.playBtn {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 20px;
    position: relative;
    margin-left: 20px;
}

.playIcon {
    font-size: 30px;
}

.volum {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 20px;
    position: relative;
}

.vCon {
    position: absolute;
    top: -150px;
    left: 0;
    height: 150px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.volum:hover .vCon {
    opacity: 1;
}

.vCon>>>.el-slider__runway {
    background-color: #ccc;
}

.jdt {
    height: 20px;
    width: 65%;
    margin-top: 10px;
}

.allCon {
    height: 30px;
    width: 40px;
    position: absolute;
    top: 0;
    right: 20px;
    cursor: pointer;
}

/* //所有控件 */
video::-webkit-media-controls-enclosure {
    display: none !important;
}
</style>