<template>
    <!-- 左侧盒子1 -->
    <div class="left-one child-container">
        <n-flex justify="space-between" v-if="isShowAllBtns">
            <div class="btns" @click="onHandleOperationPanel" v-if="!fullScreenVisible">
                操作面板
            </div>
            <div class="btns" @click="onHandleOpenFullScreen" v-if="!fullScreenVisible">
                全屏控制
            </div>

            <!-- 返回 -->
            <div class="back-btn" @click="onHandleBackFullScreen" v-if="fullScreenVisible">
                <img src="@/assets/home-imgs/back-icon.png" />
                返回
            </div>

            <div class="back-btn" @click="onHandleChangeView" v-if="fullScreenVisible">
                视角切换
            </div>
        </n-flex>

        <div class="video-container" :style="{ marginTop: isShowAllBtns ? '24px' : '0' }">
            <video controls style="width: 100%; height: 100%; border-radius: 12px" autoplay>
                <source src="@/assets/video/测试.mp4" type="video/mp4" autoplay />
            </video>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    fullScreenVisible: {
        type: Boolean,
        default: false,
    },
    isShowAllBtns: {
        type: Boolean,
        default: true,
    },
})
const emits = defineEmits(['onHandleOperationPanel', 'onHandleFullScreen'])

// 打开操作面板
const onHandleOperationPanel = () => {
    emits('onHandleOperationPanel', true)
}

// 全屏控制
const onHandleOpenFullScreen = () => {
    emits('onHandleFullScreenToggle', true)
}

// 退出全屏
const onHandleBackFullScreen = () => {
    emits('onHandleFullScreenToggle', false)
}

// 视角切换
const onHandleChangeView = () => {}
</script>

<style lang="scss" scoped>
.left-one {
    display: flex; /* 新增 */
    flex-direction: column; /* 新增 */
    height: 100%; /* 确保容器有高度 */

    .btns {
        width: 160px;
        height: 50px;
        background: url('@/assets/home-imgs/button-bg.png') no-repeat center center;
        background-size: 100% 100%;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
    }

    .back-btn {
        width: 140px;
        height: 32px;
        background: url('@/assets/home-imgs/back-btn.png') no-repeat center center;
        background-size: 100% 100%;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;

        img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
        }
    }

    > .video-container {
        flex: 1; /* 占据剩余空间 */
        min-height: 0; /* 关键：允许内容压缩 */
        position: relative; /* 新增 */

        video {
            position: absolute; /* 新增 */
            top: 0;
            left: 0;
            object-fit: cover; /* 保持视频比例 */
        }
    }
}
</style>
