<template>
  <div class="app-container">
    <!-- 场景模型 -->
    <ThreeView light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
    <!-- <ThreeModel /> -->
    <!-- 底部菜单 -->
    <MenuTab @changeMenu="changeMenu"></MenuTab>
    <!-- 左侧建筑菜单 -->
    <BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
    <!-- 建筑信息 -->
    <BuildInfo v-if="buildInfo && activateIndex == 0"></BuildInfo>
    <!-- 资产信息 -->
    <DevicePie v-if="deviceInfo && activateIndex == 0"></DevicePie>
    <!-- 左侧资产菜单 -->
    <DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
    <!-- 资产信息 -->
    <DeviceInfo v-if="equimentInfo && activateIndex == 1"></DeviceInfo>
    <!-- 资产事件 -->
    <DeviceEvent v-if="activateIndex == 1"></DeviceEvent>
    <!-- 左侧应用菜单 -->
    <ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
    <!-- 设备信息 -->
    <EquipmentInfo v-if="activateIndex == 2"></EquipmentInfo>
    <!-- 实时数据 -->
    <RealData v-if="activateIndex == 2" @openDialog="openDialog1"></RealData>
    <!-- 资产信息弹出框 -->
    <el-dialog v-model="dialogVisible" title="资产信息" width="1200px" custom-class="bim-dialog" append-to-body>
      <DeviceInfoDialog @viewDetail="viewDetail"></DeviceInfoDialog>
    </el-dialog>
    <el-dialog v-model="dialogVisible1" title="实时数据" width="1200px" custom-class="bim-dialog" append-to-body>
      <RealInfoDialog></RealInfoDialog>
    </el-dialog>
    <!-- 资产详情 -->
    <el-dialog v-model="dialogVisible2" v-if="dialogVisible2" title="资产详情" width="1500px" custom-class="bim-dialog"
      append-to-body>
      <DeviceDetial></DeviceDetial>
    </el-dialog>

  </div>
</template>
<script setup name="bimHome">
import MenuTab from './components/MenuTab.vue';
import BuildTree from './components/BuildTree.vue';
import BuildInfo from './components/BuildInfo.vue';
import DevicePie from './components/DevicePie.vue';
import DeviceTree from './components/DeviceTree.vue';
import DeviceInfo from './components/DeviceInfo.vue';
import DeviceEvent from './components/DeviceEvent.vue';
import ApplicationTree from './components/ApplicationTree.vue';
import EquipmentInfo from './components/EquipmentInfo.vue';
import RealData from './components/RealData.vue';
import ThreeView from './components/ThreeView2.vue';
// import ThreeView from './components/qqq.vue';
import DeviceInfoDialog from './components/DeviceInfoDialog.vue';
import RealInfoDialog from './components/RealInfoDialog.vue';
import DeviceDetial from './components/DeviceDetial.vue';
import bimStore from '@/store/modules/bim';
import { computed } from 'vue';
import Bus from '@/utils/bus.js';
const data = reactive({
  sceneUrl: '/jz/glb/scene.gltf',
  equimentInfo: {},
});

const { sceneUrl, equimentInfo } = toRefs(data);
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const dialogVisible2 = ref(false);

const activateIndex = computed(() =>
  bimStore().activateIndex
);

const buildInfo = computed(() =>
  bimStore().activateTree.info
);

const deviceInfo = computed(() =>
  bimStore().activateTree.deviceInfo
);

Bus.on('viewMore', (title) => {
    // Todo
    title === '资产信息' ? dialogVisible.value = true : dialogVisible1.value = true;;
})



const onReady = () => {
}

const onError = () => {
}

const onProgress = () => {
}

const handleBuildClick = (value, isParent) => {
  // 点击父级，加载/切换场景
  if (isParent) {
    sceneUrl.value = value.url;
    console.log(sceneUrl.value);
    return;
  }

}

const handleDeviceClick = (value) => {
  equimentInfo.value = bimStore().activateDevice.info;
}

const handleApplicationClick = (value) => {

}

const changeMenu = (index) => {
}


const openDialog1 = () => {
  dialogVisible1.value = true;
}

const viewDetail = (val) => {
  console.log(val);
  dialogVisible2.value = true;
}
</script>
<style lang='scss' scoped>
.app-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 70px);
}
</style>