<template>
   <el-row :gutter="20">
    <!-- 左侧部门树 -->
    <el-col :span="4" :xs="24">
      <ContentWrap class="h-1/1">
        <OrgTree @node-click="handleDeptNodeClick" />
      </ContentWrap>
    </el-col>
    <el-col :span="20" :xs="24">
      <ContentWrap>
        <el-tabs
          type="card" v-loading="loading" v-model="firstTab" @tab-click="handleServerClick">
            <el-tab-pane
              v-for="server in serverList"
              :key="server.id"
              :label="server.name"
              :name="server.id"
            >
              <el-row>
                <el-col :span="6" v-for="camera in cameraList" :key="camera">
                  <Player  
                    :ip="server.ip"
                    :domain="server.domain"
                    :code="camera.code"
                    :name="camera.name"/> 
                </el-col>
              </el-row>
            </el-tab-pane>
        </el-tabs>
      </ContentWrap>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ServerApi } from '@/api/safe/server'
import { CameraApi } from '@/api/safe/camera'
import Player from './Player.vue'
import OrgTree from './OrgTree.vue'

/** 安防前端设备 列表 */
defineOptions({ name: 'SafeWall' })

const loading = ref(true) // 列表的加载中
let serverList = ref([])//后端设备列表
let cameraList = ref([])//前端设备列表
let firstTab = ref('')//标签第一个显示

/** 处理部门（机构）被点击 */
const handleServerClick = async (tab, event) => {
  cameraList = ref([])
  const serverId = tab.props.name;
  console.log(serverId);
  await getCameraList(serverId)
}

/** 处理后端设备被点击 */
const handleDeptNodeClick = async (row) => {
  serverList = ref([])
  cameraList = ref([])
  firstTab = ref('')
  await getServerList(row.id)
}

/** 后端设备列表 */
const getServerList = async (orgId) => {
  loading.value = true
  let active = ''
  try {
    serverList.value = await ServerApi.getServers(orgId)
    if(serverList){
      serverList.value.forEach(element => {
        active = element.name
        return
      });
    }
  } finally {
    firstTab.value = active
    loading.value = false
    console.log('aaaaa:',firstTab)
  }
}

/** 前端设备列表 */
const getCameraList = async (serverId) => {
  loading.value = true
  try {
    if(serverId){
      cameraList.value = await CameraApi.getCameras(serverId)
    }
  } finally {
    loading.value = false
  }
}


/** 初始化 **/
onMounted(async () => {
  loading.value = false
})
</script>