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

const show = ref(false);
const playVideo = ref(false);
</script>

<template>
    <view @click="show=true">
        <slot></slot>
    </view>

    <x-modal
        class="x-video-modal"
        v-model:show="show">
        <view class="!p-[20rpx] relative">
            <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="fmt"></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="https://shopyunlng.oss-cn-beijing.aliyuncs.com/upload/2025/03-18/15-31-150289-429952696.m4v">
                </video>
            </view>
        </view>
    </x-modal>
</template>

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