<template>
    <div class="video-player">
        <video
            ref="videoRef"
            muted
            playsinline="true"
            webkit-playsinline="true"
            class="video"
            :src="playUrl"
            :poster="poster"
        ></video>
        <div
            class="video-box"
            :class="{ pause: !isPlaying || state.dragging }"
            @click="changePlay"
            @touchstart="onTouchStart"
            @touchmove="onTouchMove"
            @touchend="onTouchEnd"
            ref="boxRef"
        >
            <van-icon class="play-img" v-if="!isPlaying" size="80" color="#fff" name="play-circle" />
            <van-slider v-model="currentVal" @change="onChange" />
            <div class="top-box" v-if="isPre">
                <div class="top" :style="{ top: top + 'px' }">
                    上一集
                    <div class="top-img">
                        <Vue3Lottie :speed="1.2" :animationData="downJSON" />
                    </div>
                </div>
            </div>
            <div class="next-box" v-if="isNext">
                <div class="next" :style="{ bottom: bottom + 'px' }">
                    下一集
                    <div class="next-img">
                        <Vue3Lottie :speed="1.2" :animationData="downJSON" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick, reactive, computed, onUnmounted } from 'vue'
import { accDiv } from '../plugins/calc'
import { useTouch } from 'vant/lib/composables/use-touch'
import { clamp } from 'vant/lib/utils'
import { useRect } from '@vant/use'
import { Vue3Lottie } from 'vue3-lottie'
import downJSON from '@/assets/lottie/down.json'
const props = defineProps({
    playUrl: {
        type: String,
        default: ''
    },
    poster: {
        type: String,
        default: ''
    },
    isPre: {
        type: Boolean,
        default: false
    },
    isNext: {
        type: Boolean,
        default: false
    }
})

const videoRef = ref(null)
const currentVal = ref(0)
const canChange = ref(true)
onMounted(() => {
    nextTick(() => {
        videoRef.value.addEventListener('ended', () => {
            emit('videoEnded')
            console.log('播放结束')
        })
        videoRef.value.addEventListener('timeupdate', e => {
            if (videoRef.value && videoRef.value.duration && canChange.value) {
                currentVal.value = Number(
                    (accDiv(videoRef.value.currentTime, videoRef.value.duration) * 100).toFixed(2)
                )
            }
        })
        videoRef.value.addEventListener('play', () => {
            isPlaying.value = true
        })
        videoRef.value.addEventListener('pause', () => {
            isPlaying.value = false
        })
    })
})

function getCurrent() {
    return videoRef.value.currentTime
}

function play() {
    videoRef.value.play()
}

function pause() {
    videoRef.value.pause()
}

function setCurrent(currentTime) {
    videoRef.value.currentTime = currentTime
    nextTick(() => {
        canChange.value = true
    })
}

function changeMuted() {
    videoRef.value.muted = false
}

function onChange(value) {
    canChange.value = false
    setCurrent((videoRef.value.duration * value) / 100)
    play()
}

const isPlaying = ref(false)
function changePlay() {
    if (isPlaying.value) {
        pause()
    } else {
        play()
    }
}

const boxRef = ref(null)
const getHeightByRef = ref2 => (ref2.value ? useRect(ref2).height : 0)

const state = reactive({
    offset: 0,
    dragging: false
})
const startOffset = ref(0)
const touch = useTouch()
const lockClick = ref(false)

function onTouchStart(event) {
    startOffset.value = state.offset
    touch.start(event)
}

const bottom = ref(-54)
const top = ref(-54)

function onTouchMove(event) {
    const { deltaY } = touch
    touch.move(event)
    if (touch.isVertical) {
        lockClick.value = true
        state.dragging = true
        state.offset = clamp(deltaY.value + startOffset.value, -getHeightByRef(boxRef) / 2, getHeightByRef(boxRef) / 2)
        console.log(state.offset)
        if (state.offset < 0 && top.value == -54) {
            bottom.value = 0 - state.offset - 54 > 0 ? 0 : 0 - state.offset - 54
        }
        if (state.offset > 0 && bottom.value == -54) {
            top.value = state.offset - 54 > 0 ? 0 : state.offset - 54
        }
    }
}

function onTouchEnd(event) {
    if (state.dragging) {
        state.dragging = false
        changeSide(state.offset > 0 ? 'pre' : 'next')
    }
    state.offset = 0
}

function changeSide(side) {
    console.log(side)
    if (bottom.value >= 0 || top.value >= 0) {
        emit('changeSide', side)
    }

    bottom.value = -54
    top.value = -54

    //
}

const emit = defineEmits(['videoEnded', 'changeSide'])
defineExpose({ getCurrent, play, pause, setCurrent, changeMuted })
</script>

<style lang="less" scoped>
.video {
    width: 100%;
    height: calc(100vh - 95px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
    height: calc(100vh - 95px - constant(safe-area-inset-bottom) - constant(safe-area-inset-top));
}

.video-player {
    position: relative;

    .video-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        transition: all ease-in-out 0.3s;
        &.pause {
            background-color: rgba(0, 0, 0, 0.6);

            .next {
                transition: none;
            }
        }
    }
}

.van-slider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    --van-slider-button-width: 18px;
    --van-slider-button-height: 18px;
    z-index: 30;
}

.play-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.next-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow: hidden;
    height: 54px;
}
.top-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    overflow: hidden;
    height: 54px;
}
.top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    z-index: 20;
    text-align: center;
    transition: bottom ease-in-out 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    .top-img {
        width: 54px;
        height: 54px;
        transform: translate(-10px, -5px) rotate(180deg);
    }
}
.next {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    z-index: 20;
    text-align: center;
    transition: bottom ease-in-out 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    .next-img {
        width: 54px;
        height: 54px;
        transform: translate(-10px, 5px);
    }
}
</style>
