<script setup lang="ts">
import ResourcePanel from './components/resource-pannel.vue';

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');
    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');
    window.$message.info(`查看警报器：${JSON.stringify({ code, name })}`);
  } else {
  }
};
</script>

<template>
  <div style="height: 100%; overflow: hidden; display: flex">
    <ResourcePanel />
    <div style="flex: 1">
      <div style="height: 480px; background-color: #666; display: grid; place-items: center" @dragover="onDragover" @drop="onDrop">
        <div>这里是播放器</div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
