<template>
    <div class="w-full h-full flex flex-col relative">
        <el-checkbox :value="item.id" class="full-area-checkbox" :style="{ zIndex: isCheck ? 1 : -1 }" />
        <div class="absolute top-0 left-0 right-0 fs-12 z-1">
            <div class="flex justify-between mb-6">
                <span class="px-6 py-2 color-fff bg-main round-br">成片</span>
                <span class="px-6 py-2 color-fff bg-main round-bl">待审核</span>
            </div>
            <span class="px-6 py-2 color-fff round-4" style="background-color: rgba(0, 0, 0, 0.6);">ID:
                887554622</span>
        </div>
        <div class="hidden flex-1 zoom-box">
            <img src="../../../static/image/huaban.png" width="100%" height="100%" class="cover zoom-image">
        </div>
        <div class="">
            <div class="p-10">
                <p class="fs-14 color-333 ellipsis">全链路 AI 智能化智能生成、批量裂变与广告投放协同工作台</p>
                <p class="fs-12 color-main mt-6">￥1000 / 6600</p>
                <p class="fs-12 color-999 mt-6">AI画质提升</p>
            </div>
            <div class="flex-items-center justify-between p-10" style="border-top: 1px solid #f5f5f5;">
                <div class="flex-items-center gap-4">
                    <div class="bg-main w-30 h-30 round"></div>
                    <div>张晓华</div>
                </div>
                <div class="fs-12 color-999">3小时前</div>
            </div>
        </div>
    </div>
    <div v-if="!isCheck" class="absolute top-0 left-0 bg-main w-full h-full video-main">
        <video src="/aaa.mp4" height="100%" controls autoplay disablePictureInPicture></video>
        <div class="absolute top-10 right-10 flex gap-4">
            <div class="bg-333 w-24 h-24 round-6 pointer"></div>
            <div class="bg-333 w-24 h-24 round-6 pointer"></div>
            <div class="bg-333 w-24 h-24 round-6 pointer"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    item: {
        type: Object,
        default: () => { }
    },
    isCheck: {
        type: Boolean,
        default: false
    }
})
</script>

<style scoped lang="scss">
.flex-item {
    &:hover {
        .video-main {
            display: inline-block;
        }

        .zoom-image {
            transform: scale(1.12);
        }
    }
}

.video-main {
    display: none;
    z-index: 9;
}

.zoom-image {
    transition: all 0.6s;
}

.round-br {
    border-bottom-right-radius: 6px;
}

.round-bl {
    border-bottom-left-radius: 6px;
}
</style>
