<template>
  <div class="device-page">
    <a-tabs v-model:activeKey="activeKey" class="device-tabs">
      <a-tab-pane key="airport" tab="机场">
        <Airport :connected="connected" :projectList="projectList"/>
      </a-tab-pane>
      <a-tab-pane key="aerocraft" tab="飞行器">
        <Aerocraft :projectList="projectList"/>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue"
import Airport from './Airport/index.vue'
import Aerocraft from './Aerocraft/index.vue'
import { GetWorkspaceList } from '@/api/demo/projecthome'
import { getConnectStatus,createConnection,destroyConnection } from '@/utils/mqtt'

onMounted(() => {
  if(!getConnectStatus()){
    console.log("需要重连")
    createConnection(changeConnect)
    connectMQTT.value = true
  }else{
    changeConnect()
  }
  GetWorkspaceList().then(res => {
    projectList.value = res.map(item => {
      return {
        label: item.WorkspaceName,
        value: item.Id,
      }
    })
  })
})
onBeforeUnmount(() => {
  if(connectMQTT.value){
    destroyConnection()
  }
})
const changeConnect = () => {
  connected.value = true
}
const activeKey = ref('airport')
const projectList = ref([])
const connectMQTT = ref(false)
const connected = ref(false)

</script>

<style lang="scss" scoped>
.device-page{
  .device-tabs{
    :deep(.ant-tabs-nav-wrap){
      padding-left: 20px;
    }
  }
}
</style>
