<script setup>
import {ref, watch} from 'vue'
import XModal from "./XModal.vue";
import fmt from '../static/images/fmt.png';
import play from '../static/icons/play.png';

const {options} = defineProps({
    options: {
        type: Object,
        default: {},
    }
});
const show = ref(false);
const playVideo = ref(false);
const current = ref(0);

const open = () => {
    show.value = true;
}

defineExpose({
    open
});

watch(
    () => show.value,
    (val) => {
        if (!val) {
            playVideo.value = false;
        }
    },
    {deep: true}
)

const changeSwiper = ({detail}) => {
    current.value = detail.current;
}
</script>

<template>
    <x-modal
        backgroundColor="rgba(255,255,255,0)"
        class="x-video-modal"
        v-model:show="show">
        <template v-if="options.pop_type === 1">
            <view class="relative h-[800rpx]">
                <swiper class="!size-full" @change="changeSwiper">
                    <swiper-item v-for="src in options.pop_images" class="!flex flex-col justify-center px-[24rpx]">
                        <view
                            class="w-full bg-[#fff] h-fit !flex items-center p-[24rpx] rounded-[24rpx] relative">
                            <image class="!w-full" :src="src" mode="widthFix"></image>
                        </view>
                    </swiper-item>
                </swiper>

                <view class="absolute left-1/2 -translate-x-1/2 bottom-[-80rpx] text-white test-36r">
                    {{ current + 1 }} / {{ options.pop_images.length }}
                </view>
                <image
                    @click="show=false"
                    class="!w-[52rpx] !h-[52rpx] !absolute  left-1/2 -translate-x-1/2 bottom-[-150rpx]"
                    src="/static/icons/close.png">
                </image>
            </view>
        </template>
        <template v-else>
            <view class="!p-[20rpx] relative bg-white rounded-[24rpx]">
                <image
                    @click="show=false"
                    class="!w-[52rpx] !h-[52rpx] !absolute  left-1/2 -translate-x-1/2 bottom-[-100rpx]"
                    src="/static/icons/close.png">
                </image>

                <view class="!w-full relative rounded-[16rpx] overflow-hidden">
                    <image v-if="!playVideo" class="!w-full" mode="widthFix" :src="options.file"></image>
                    <view @click="playVideo=!playVideo" v-if="!playVideo"
                          class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,.4)] z-10 !flex justify-center items-center">
                        <image class="!w-[94rpx] !h-[94rpx]" :src="play"></image>
                    </view>

                    <video
                        autoplay
                        @pause="playVideo=!playVideo"
                        class="!w-full"
                        v-else
                        :src="options.pop_video[0]">
                    </video>
                </view>
            </view>
        </template>
    </x-modal>
</template>

<style lang="scss">

.x-video-modal {
    .tui-modal-box {
        margin-bottom: 200rpx;
    }
}
</style>
