<script setup lang="ts">
import { NTabPane, NTabs, NTree, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui';
import { h, type CSSProperties } from 'vue';
import { useCameraStore } from '../stores';
import { storeToRefs } from 'pinia';
import { useDeviceCenterQuery } from '../apis';
import { isCameraNode, isCameraSiteNode, isCameraAreaNode } from '../types';

const { isLoading } = useDeviceCenterQuery();

const cameraStore = useCameraStore();
const { lineTabPanes } = storeToRefs(cameraStore);

const selectedDeviceGbCode = defineModel<[string]>('selectedDeviceGbCode', { default: () => [''] });

const overrideNodeClickBehavior: TreeOverrideNodeClickBehavior = ({ option }) => {
  const hasChildren = (option.children?.length ?? 0) > 0;
  if (hasChildren) {
    return 'toggleExpand';
  } else {
    return 'none';
  }
};

const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
  // 是车站节点
  if (isCameraSiteNode(option)) {
    const siteOnline = option.online;
    const siteNodeStyle: CSSProperties = {
      opacity: siteOnline ? 1 : 0.5,
    };
    return h('div', { style: siteNodeStyle }, option.label);
  }

  // 是中间节点(一级/二级区域)
  if (isCameraAreaNode(option)) {
    const site = option.site;
    const nodeStyle: CSSProperties = {
      opacity: site.online ? 1 : 0.5,
    };
    return h('div', { style: nodeStyle }, option.label);
  }

  // 是摄像机节点
  if (isCameraNode(option)) {
    const camera = option.camera;
    const site = option.site;

    const cameraOnline = () => {
      return camera.status === 1 && site.online;
    };

    const cameraNodeStyle: CSSProperties = {
      opacity: cameraOnline() ? 1 : 0.5,
      cursor: cameraOnline() ? 'pointer' : 'not-allowed',
    };
    return h(
      'div',
      {
        style: cameraNodeStyle,
        draggable: cameraOnline(),
        onDblclick() {
          if (!cameraOnline()) return;
          selectedDeviceGbCode.value = [camera.code];
          window.$message.info(`播放：${JSON.stringify({ code: camera.code, name: camera.name })}`);
        },
        onDragstart(event) {
          if (!cameraOnline()) return;
          console.log(event);
          event.dataTransfer?.setData('type', 'camera');
          event.dataTransfer?.setData('code', camera.code);
          event.dataTransfer?.setData('name', camera.name);
        },
      },
      camera.name,
    );
  }

  // 其他节点(兜底，理论上不会走到这里)
  return option.label;
};
</script>

<template>
  <template v-if="isLoading">
    <div>loading...</div>
  </template>
  <template v-else-if="lineTabPanes.length === 1">
    <NTree
      block-line
      block-node
      show-line
      virtual-scroll
      style="height: 100%"
      v-model:selected-keys="selectedDeviceGbCode"
      :data="lineTabPanes.at(0)?.cameraTree"
      :override-default-node-click-behavior="overrideNodeClickBehavior"
      :render-label="renderNodeLabel"
    />
  </template>
  <template v-if="lineTabPanes.length > 1">
    <NTabs :type="'card'" :placement="'left'" style="height: 100%">
      <NTabPane v-for="{ lineCode, lineName, cameraTree } in lineTabPanes" :key="lineCode" :name="lineName" :tab="lineName">
        <NTree
          block-line
          block-node
          show-line
          virtual-scroll
          style="height: 100%"
          v-model:selected-keys="selectedDeviceGbCode"
          :data="cameraTree"
          :override-default-node-click-behavior="overrideNodeClickBehavior"
          :render-label="renderNodeLabel"
        />
      </NTabPane>
    </NTabs>
  </template>
</template>

<style scoped></style>
