<script setup lang="ts">
import { NTabPane, NTabs, type TabPaneProps } from 'naive-ui';
import { ref, type Component } from 'vue';
import CameraTree from './components/camera-tree.vue';
import AlarmTree from './components/alarm-tree.vue';

interface ResourceTabPane extends TabPaneProps {
  name: string;
  tab: string;
  component?: Component;
}

const resourceTabPanes: ResourceTabPane[] = [
  { name: 'camera', tab: '摄像头', component: CameraTree },
  { name: 'alarm', tab: '警报器', component: AlarmTree },
];

const selectedDeviceGbCode = ref<[string]>(['']);

const onDragover = (event: DragEvent) => {
  event.preventDefault();
  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = 'copy';
  }
};

const onDrop = (event: DragEvent) => {
  event.preventDefault();
  const type = event.dataTransfer?.getData('type');
  if (!type) return;
  if (type === 'camera') {
    const code = event.dataTransfer?.getData('code');
    if (!code) return;
    const name = event.dataTransfer?.getData('name');
    selectedDeviceGbCode.value = [code];
    window.$message.info(`播放：${JSON.stringify({ code, name })}`);
  } else if (type === 'alarm') {
    const code = event.dataTransfer?.getData('code');
    if (!code) return;
    const name = event.dataTransfer?.getData('name');
    selectedDeviceGbCode.value = [code];
    window.$message.info(`查看警报器：${JSON.stringify({ code, name })}`);
  } else {
  }
};
</script>

<template>
  <div style="height: 100%; overflow: hidden; display: flex">
    <div style="width: 540px; height: 100%; overflow: hidden">
      <NTabs :type="'line'" :placement="'left'" style="height: 100%">
        <NTabPane v-for="{ name: resourceName, tab: resourceTab, component } in resourceTabPanes" :key="resourceName" :tab="resourceTab" :name="resourceName">
          <template v-if="!!component">
            <component :is="component" v-model:selected-device-gb-code="selectedDeviceGbCode" />
          </template>
        </NTabPane>
      </NTabs>
    </div>
    <div style="flex: 1">
      <div style="height: 480px; background-color: #666; display: grid; place-items: center" @dragover="onDragover" @drop="onDrop">
        <div>这里是播放器</div>
        <div>{{ selectedDeviceGbCode }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
