<script setup>
import { ref } from 'vue';
import SY_ICON from '../static/icons/syyl.png';

const { src, list, imageClass, sy } = defineProps({
    src: {
        type: String,
        default: "",
    },
    list: {
        type: Array,
        default: () => [],
    },
    cur: {
        type: Number,
        default: 0,
    },
    imageClass: {
        type: String,
        default: ''
    },
    sy: {
        type: Boolean,
        default: false,
    }
});

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

defineExpose({
    open
});
</script>

<template>
    <template v-if="!$slots.default">
        <!-- #ifndef MP-WEIXIN -->
        <image v-if="!src.endsWith('.mp4')" @click="open" v-bind="$attrs" :src="src" mode="aspectFill"></image>
        <view class="relative" v-else @click="open">
            <video v-bind="$attrs" :controls="false" :src="src"></video>
            <view class="size-full absolute z-10 left-0 top-0"></view>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <image v-if="!src.endsWith('.mp4')" @click="open" :class="imageClass" :src="src" mode="aspectFill"></image>
        <view :class="imageClass" style="position: relative;" v-else @click="open">
            <video :controls="false" :src="src" class="!size-full"></video>
            <view class="size-full absolute z-10 left-0 top-0"></view>
        </view>
        <!-- #endif -->
    </template>
    <view v-else @click="open">
        <slot></slot>
    </view>

    <view v-if="show" @click="show = false" class="x-image-preview">
        <view class="x-image-docker">
            <template v-if="list.length > 1">
                <swiper class="!size-full" :current="cur" @change="({ detail: { current } }) => cur = current">
                    <swiper-item v-for="src in list">
                        <template v-if="!src.endsWith('.mp4')">
                            <image @click.stop class="!size-full" :src="src" mode="aspectFit"></image>
                            <image @click.stop v-if="sy" class="!size-full !absolute left-0 top-0" :src="SY_ICON"
                                mode="aspectFit"></image>
                        </template>
                        <template v-else>
                            <view class="!size-full !flex items-center" @click.stop>
                                <video class="!w-full" :src="src" :controls="true"></video>
                            </view>
                        </template>
                    </swiper-item>
                </swiper>

                <view
                    class="bg-[rgba(255,255,255,.3)] text-[#fff] test-28r rounded-full px-[20rpx] py-[6rpx] fixed left-1/2 -translate-x-1/2">
                    {{ cur + 1 }} / {{ list.length }}
                </view>
            </template>
            <template v-else>
                <template v-if="!src.endsWith('.mp4')">
                    <image class="!size-full" :src="src" mode="aspectFit"></image>
                    <image v-if="sy" class="!size-full !absolute left-0 top-0" :src="SY_ICON" mode="aspectFit"></image>
                </template>
                <template v-else>
                    <view class="!size-full !flex items-center" @click.stop>
                        <video class="!w-full" :src="src" :controls="true"></video>
                    </view>
                </template>
            </template>


            <image v-if="list.length > 1" @click="show = false"
                class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-130rpx]"
                src="/static/icons/close.png">
            </image>
            <image v-else @click="show = false"
                class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-60rpx]"
                src="/static/icons/close.png">
            </image>
        </view>
    </view>
</template>

<style scoped lang="scss">
.x-image-preview {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;

    .x-image-docker {
        width: 620rpx;
        height: 1060rpx;
        position: relative;
    }
}
</style>
