<template>
    <div class="viewport-container">
        <!-- 非全屏状态 -->
        <div ref="appRef" class="app-container">
            <!-- 机器人首页 -->
            <!-- 使用grid布局 -->
            <!-- 非全屏模式 -->
            <div class="robot-container">
                <!-- 左一 -->
                <div
                    :style="{
                        gridColumn: fullScreenVisibleNew ? '1 / 9' : '1 / 4',
                        gridRow: fullScreenVisibleNew ? '1 / 13' : '1 / 7',
                    }"
                >
                    <LeftOne
                        :videoId="'video-1'"
                        :cameraNode="cameraNode_1"
                        :fullScreenVisible="fullScreenVisibleNew"
                        @onHandleChangeView="onHandleChangeView"
                        @onHandleOperationPanel="onHandleOperationPanel"
                        @onHandleFullScreenToggle="onHandleFullScreenToggle"
                    />
                </div>
                <!-- 左二 -->
                <div class="robot-2" v-if="!fullScreenVisibleNew">
                    <LeftTwo />
                </div>

                <!-- 中一 -->
                <div
                    :style="{
                        gridColumn: fullScreenVisibleNew ? '9 / 13' : '4 / 10',
                        gridRow: fullScreenVisibleNew ? '1 / 6' : '1 / 8',
                    }"
                >
                    <CenterOne
                        :videoId="'video-2'"
                        :cameraNode_2="cameraNode_2"
                        :fullScreenVisible="fullScreenVisibleNew"
                    />
                </div>
                <!-- 中二 -->
                <div class="robot-4" v-if="!fullScreenVisibleNew">
                    <CenterTwo />
                </div>

                <!-- 右一 -->
                <div class="robot-5" v-if="!fullScreenVisibleNew">
                    <RightOne />
                </div>
                <!-- 右二 -->
                <div class="robot-6" v-if="!fullScreenVisibleNew">
                    <RightTwo />
                </div>

                <div class="robot-7" v-if="fullScreenVisibleNew">
                    <ControlDeck />
                </div>
            </div>
        </div>

        <!-- 操作面板 -->
        <n-drawer
            resizable
            placement="right"
            :default-width="502"
            v-model:show="operationPanelVisible"
        >
            <div class="operation-panel-container">
                <div class="operation-panel-content">
                    <ControlDeck />
                </div>
            </div>
        </n-drawer>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getDeviceUrlApi } from '@/utils/initLogin'
import { getTokenApi } from '@/api/home'
import { useScale } from '@/hooks/useScale' // 引入自定义 Hook
import { userDataStore } from '@/store/user' // 用户数据
import LeftOne from './components/left-one.vue' // 左一
import LeftTwo from './components/left-two.vue' // 左二
import CenterOne from './components/center-one.vue' // 中一
import CenterTwo from './components/center-two.vue' // 中二
import RightOne from './components/right-one.vue' // 右一
import RightTwo from './components/right-two/index.vue' // 右二
import ControlDeck from './components/control-deck.vue' // 控制台

import { getRobotTokenFn, getRobotDeviceListFn } from '@/utils/getRobotInfo' // 获取机器人信息

const userData = userDataStore()
const appRef = ref(null) // 获取 DOM 引用
const fullScreenVisibleNew = ref(false) // 全屏状态
const { baseWidth, baseHeight, scale } = useScale(appRef)

const cameraNode_1 = ref({
    token: '',
    puid: '',
    idx: 1,
    stream: 0,
    name: '',
    operateType: 1,
    steamCode: '',
    steamURL: 'http://112.31.70.193:1854/icvs2/stream.flv',
})
const cameraNode_2 = ref({
    token: '',
    puid: '',
    idx: 0,
    stream: 0,
    name: '',
    operateType: 1,
    steamCode: '',
    steamURL: 'http://112.31.70.193:1854/icvs2/stream.flv',
})

const operationPanelVisible = ref(false) // 操作面板是否显示

// 打开操作面板
const onHandleOperationPanel = (visible) => {
    operationPanelVisible.value = visible
}
// 全屏控制
const onHandleFullScreenToggle = (visible) => {
    fullScreenVisibleNew.value = visible
}
// 视角切换
const onHandleChangeView = () => {
    const tempIdx = cameraNode_1.value.idx
    cameraNode_1.value.idx = cameraNode_2.value.idx
    cameraNode_2.value.idx = tempIdx
    // const temp = cameraNode_1.value.steamURL
    // cameraNode_1.value.steamURL = cameraNode_2.value.steamURL
    // cameraNode_2.value.steamURL = temp
}

// // 获取视频地址
const getDeviceData = async (puId, deviceToken) => {
    const { data: res } = await getDeviceUrlApi({
        token: deviceToken,
        puid: puId,
        idx: 0,
        stream: 0,
        type: 'HTTP-FLV',
    })
    const { data: res2 } = await getDeviceUrlApi({
        token: deviceToken,
        puid: puId,
        idx: 1,
        stream: 0,
        type: 'HTTP-FLV',
    })

    cameraNode_1.value.steamURL = res?.streamUrl
    cameraNode_2.value.steamURL = res2?.streamUrl
}

// 获取token
const getTokenData = async () => {
    getTokenApi({
        username: 'admin',
        password: 'admin123',
    }).then((res) => {
        // 存储token 内部使用
        userData.setUserInfo({
            token: res?.data?.token,
        })
    })
}

getTokenData() // 获取token

onMounted(async () => {
    const deviceToken = await getRobotTokenFn() // 获取设备token
    const deviceInfo = await getRobotDeviceListFn() // 获取设备信息

    cameraNode_2.value.puid = deviceInfo.puId
    cameraNode_1.value.puid = deviceInfo.puId
    cameraNode_2.value.token = deviceToken
    cameraNode_1.value.token = deviceToken
    // cameraNode_2.value.steamURL = `http://112.31.70.193:1854/icvs2/stream.flv?puid=${deviceInfo.puId}&idx=${cameraNode_2.value.idx}&stream=0&token=${deviceToken}`
    // cameraNode_1.value.steamURL = `http://112.31.70.193:1854/icvs2/stream.flv?puid=${deviceInfo.puId}&idx=${cameraNode_1.value.idx}&stream=0&token=${deviceToken}`
    // cameraNode_2.value.steamURL = `http://112.31.70.193:1854/icvs2/stream.flv`
    // cameraNode_1.value.steamURL = `http://112.31.70.193:1854/icvs2/stream.flv`
})
</script>

<style lang="scss">
.app-container {
    .robot-container,
    .full-screen-container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: repeat(12, 1fr);
        grid-template-columns: repeat(12, 1fr);
        // gap: 10px;
    }

    // 左侧
    .robot-1 {
        grid-column: 1 / 4;
        grid-row: 1 / 7;
    }
    .robot-2 {
        grid-column: 1 / 4;
        grid-row: 7 / 13;
    }

    // 中间
    .robot-3 {
        grid-column: 4 / 10;
        grid-row: 1 / 8;
    }
    .robot-4 {
        grid-column: 4 / 10;
        grid-row: 8 / 13;
    }

    // 右侧
    .robot-5 {
        grid-column: 10 / 13;
        grid-row: 1 / 8;
    }
    .robot-6 {
        grid-column: 10 / 13;
        grid-row: 8 / 13;
    }

    .robot-7 {
        grid-column: 9 / 13;
        grid-row: 6 / 13;
    }

    .full-screen-left1 {
        grid-column: 1 / 9;
        grid-row: 1 / 13;
    }
    .full-screen-right1 {
        grid-column: 9 / 13;
        grid-row: 1 / 6;
    }
    .full-screen-right2 {
        grid-column: 9 / 13;
        grid-row: 6 / 13;
    }
}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-right: 10px;
}

.child-container {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.more-btn {
    width: 58px;
    height: 24px;
    border-radius: 12px;
    color: #d6fdff;
    background: linear-gradient(to bottom, rgba(15, 47, 78, 0.5) 0%, rgba(0, 222, 255, 0.5) 100%);
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}

.n-drawer {
    background-color: rgba(0, 0, 0, 0.8);
}

.operation-panel-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .operation-panel-content {
        width: 90%;
        background-color: rgba(0, 112, 190, 0.3);
        color: #fff;
        border: 1px solid #0070be;
    }
}
</style>
