<template>
  <Page class="h-full w-full">
    <!--  设备分组区域  -->
    <div class="flex h-full gap-[8px]">
      <ChannelTree v-model:channel-id="channelId" class="w-[260px]" />

      <!--  设备分组区域  -->
      <div class="bg-background flex-1">
        <div class="video-play-area h-[calc(100%-40px)]">
          <div
            v-for="i in playerNum"
            class="player"
            :class="'player-' + i"
          ></div>
        </div>
        <div class="player-area h-[40px]">

        </div>
      </div>
    </div>
  </Page>
  >
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import ChannelTree from './channel-tree.vue';

const channelId = ref("");
/**
 * 屏幕播放器数量
 */
const playerNum = ref(1);
</script>

<style></style>
