<script setup>
import {ref} from "vue";
import {Modal} from "@arco-design/web-vue";
import {determineMediaType} from "../../utils/index.js";
import Plyr from "../Plyr/Plyr.vue";

const emits = defineEmits(['delete']);
const {width, height, aspect, hideDelete, src} = defineProps({
    width: {
        type: String,
        default: '80px'
    },
    height: {
        type: String,
        default: '80px'
    },
    aspect: {
        type: Boolean,
        default: false,
    },
    hideDelete: {
        type: Boolean,
        default: false,
    },
    src: {
        type: String,
        default: "",
    }
});
const previewVisible = ref(false);
const deleteImage = () => {
    Modal.info({
        title: "删除确认",
        content: "确认删除这张素材吗?",
        hideCancel: false,
        onOk: () => {
            emits('delete');
        }
    });
}
</script>

<template>
    <div class="x-image-box" :style="{aspectRatio: aspect ? '1 / 1' : ''}">
        <a-image
            v-if="determineMediaType(src) === 'Image'"
            fit="contain"
            v-model:preview-visible="previewVisible"
            @preview-visible-change="(v)=>previewVisible=v"
            v-bind="$attrs"
            :src="src"
            :width="width"
            :height="height">
        </a-image>
        <video class="video" v-else-if="determineMediaType(src) === 'Video'" :src="src">
        </video>

        <transition name="fade">
            <div class="video-preview-mask" v-if="determineMediaType(src) === 'Video' && previewVisible"
                 @click="previewVisible=false">
                <plyr :src="src" @click.stop></plyr>
            </div>
        </transition>

        <div class="mask">
            <icon-eye @click="previewVisible=true" class="icon" style="color: #fff"/>
            <icon-delete @click="deleteImage" v-if="!hideDelete" class="icon" style="color: #fff"/>
        </div>
    </div>
</template>

<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
    position: relative;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    position: absolute;
}

.x-image-box {
    @apply cursor-pointer relative box-border rounded-[6px] overflow-hidden;
    outline: 1px solid #E5E6EB;
    width: v-bind(width);
    height: v-bind(height);

    .video {
        width: v-bind(width);
        height: v-bind(height);
        object-fit: contain;
    }

    .video-preview-mask {
        @apply size-full fixed z-[999] left-0 top-0 bg-[rgba(0,0,0,.6)] flex justify-center items-center;
    }

    &:hover .mask {
        background-color: rgba(0, 0, 0, .4);

        .icon {
            display: block;
        }
    }

    .mask {
        @apply size-full absolute left-0 top-0 duration-500 flex justify-center items-center gap-[10px];
        .icon {
            display: none;
        }
    }
}
</style>
