<template>
  <div class="project-tsa-wrapper">
    <div class="scrollbar" :style="{ height: '100%' }">
      <a-collapse style="background: #232323;" :bordered="false" expandIconPosition="right" accordion
        v-model:activeKey="state.activeKey">
        <a-collapse-panel style="border-bottom: 1px solid #4f4f4f;" :key="EDeviceTypeName.Dock" header="机场">
          <div v-if="onlineDocks.data.length === 0" style="height: 100px; color: white;">
            <a-empty :image="noData" :image-style="{ height: '60px' }" />
          </div>
          <div v-else>
            <div :class="[
              'item-border',
              dock.sn === state.selectedSn ? 'item-border-selected' : ''
            ]" :style="{ 'margin-top': index === 0 ? '' : '10px' }" v-for="(dock, index) in onlineDocks.data"
              :key="dock.sn" @click="handleClickItem(dock)">
              <Airport :dock="dock" :lookInfo="true" :onClickLookInfo="() => switchVisible(dock, true)" />
            </div>
          </div>
        </a-collapse-panel>
        <a-collapse-panel style="border-bottom: 1px solid #4f4f4f;" :key="EDeviceTypeName.Aircraft" header="在线设备">
          <div v-if="onlineDevices.data.length === 0" style="height: 100px; color: white;">
            <a-empty :image="noData" :image-style="{ height: '60px' }" />
          </div>
          <div v-else>
            <div :class="[
              'item-border',
              device.sn === state.selectedSn ? 'item-border-selected' : ''
            ]" :style="{ 'margin-top': index === 0 ? '' : '10px' }" v-for="(device, index) in onlineDevices.data"
              :key="device.sn" @click="handleClickItem(device)">
              <OnLineDevice :device="device" :onClickLookInfo="() => switchVisible(device, false)" />
            </div>
          </div>
        </a-collapse-panel>
        <a-collapse-panel style="border-bottom: 1px solid #4f4f4f;" :forceRender="true" :key="EDeviceTypeName.Marker"
          header="地图标注管理">
          <Layer :mapClickElement="mapClickElement" />
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch } from 'vue'
import Layer from './layer/index.vue'
import Airport from '/@/components/airport/index.vue'
import OnLineDevice from '/@/components/onLineDevice/index.vue'
import noData from '/@/assets/icons/no-data.png'
import { getWorkspaceId } from '/@/utils/index'
import { useMyStore } from '/@/store'
import { wgs84togcj02 } from '../../../vendors/coordtransform'
import { getDeviceTopo, getUnreadDeviceHms } from '/@/api/manage'
import { OnlineDevice, EModeCode } from '/@/types/device'
import { EDeviceTypeName } from '/@/types'
import { getRoot } from '/@/root';

const store = useMyStore()
const workspaceId = ref(getWorkspaceId())
const osdVisible = computed(() => store.state.osdVisible)
const hmsVisible = new Map<string, boolean>()
const scorllHeight = ref()

const root: any = getRoot()

const onlineDevices = reactive({
  data: [] as OnlineDevice[]
})

const onlineDocks = reactive({
  data: [] as OnlineDevice[]
})

const state = reactive({
  activeKey: -1,
  selectedSn: '',
})

const mapClickElement = computed(() => store.state.mapClickElement)

watch(() => mapClickElement.value, (newValue, oldValue) => {
  if (newValue) {
    state.activeKey = EDeviceTypeName.Marker
  }
}, { deep: true });

onMounted(() => {
  getOnlineTopo()
  const element = document.getElementsByClassName('scrollbar').item(0) as HTMLDivElement
  const parent: any = element?.parentNode as HTMLDivElement
  scorllHeight.value = parent?.clientHeight - parent?.firstElementChild?.clientHeight
})

function getOnlineTopo() {
  getDeviceTopo(workspaceId.value).then((res) => {
    if (res.code !== 0) {
      return
    }
    onlineDevices.data = []
    onlineDocks.data = []
    res.data.forEach((gateway: any) => {
      const child = gateway.children
      const device: OnlineDevice = {
        model: child?.device_name,
        callsign: child?.nickname,
        sn: child?.device_sn,
        mode: EModeCode.Disconnected,
        gateway: {
          model: gateway?.device_name,
          callsign: gateway?.nickname,
          sn: gateway?.device_sn,
          domain: gateway?.domain
        },
        payload: []
      }
      child?.payloads_list.forEach((payload: any) => {
        device.payload.push({
          index: payload.index,
          model: payload.model,
          payload_name: payload.payload_name,
          payload_sn: payload.payload_sn,
          control_source: payload.control_source,
          payload_index: payload.payload_index
        })
      })
      if (EDeviceTypeName.Dock === gateway.domain) {
        hmsVisible.set(device.sn, false)
        hmsVisible.set(device.gateway.sn, false)
        onlineDocks.data.push(device)
      }
      if (gateway.status && EDeviceTypeName.Gateway === gateway.domain) {
        onlineDevices.data.push(device)
      }
    })
  })
}

function switchVisible(device: OnlineDevice, isDock: boolean) {
  if (device.sn === osdVisible.value.sn) {
    osdVisible.value.visible = !osdVisible.value.visible
  } else {
    osdVisible.value.sn = device.sn
    osdVisible.value.callsign = device.callsign
    osdVisible.value.model = device.model
    osdVisible.value.visible = true
    osdVisible.value.gateway_sn = device.gateway.sn
    osdVisible.value.is_dock = isDock
    osdVisible.value.gateway_callsign = device.gateway.callsign
    osdVisible.value.payloads = device.payload
  }
  store.commit('SET_OSD_VISIBLE_INFO', osdVisible)
}

const handleClickItem = (record: any) => {
  const sn = record.sn;
  if (state.selectedSn === sn) {
    return state.selectedSn = '';
  }
  state.selectedSn = sn;
  const gatewaySn = record.gateway.sn;
  const gatewayInfo = store.state.deviceState.gatewayInfo[gatewaySn];
  if (gatewayInfo) {
    const coordinate = wgs84togcj02(gatewayInfo.longitude, gatewayInfo.latitude);
    root.$map.setCenter(coordinate)
  }
}
</script>

<style lang="scss">
.project-tsa-wrapper> :first-child {
  height: 50px;
  line-height: 50px;
  align-items: center;
  border-bottom: 1px solid #4f4f4f;
}

.project-tsa-wrapper {
  height: 100%;

  .scrollbar {
    overflow: auto;
  }

  ::-webkit-scrollbar {
    display: none;
  }
}

.ant-collapse>.ant-collapse-item>.ant-collapse-header {
  color: white;
  border: 0;
  padding-left: 14px;
}

.item-border {
  border-radius: 4px;
  border: 2px solid transparent;
  overflow: hidden;

  &-selected {
    border-color: #1fa3f6;
  }
}
</style>