<template>
  <div v-if="getTreeData.length === 0" style="height: 100px; color: white;">
    <a-empty :image="noData" :image-style="{ height: '60px' }" />
  </div>
  <div v-else>
    <a-directory-tree class="device-map-layers" v-bind="$attrs" :multiple="false" v-if="getTreeData.length">
      <a-tree-node :id="layer.id" v-for="layer in getTreeData" :key="layer.id" :selectable="false">
        <template #title>
          {{ layer.name }}
        </template>
        <template v-if="layer.elements">
          <a-tree-node v-for="resource in layer.elements" :id="getLayerTreeKey('resource', resource.id)"
            :key="getLayerTreeKey('resource', resource.id)" :selectable="resource.resource ? true : false"
            :label="resource.resource ? 'DEFAULT' : 'PHOTO'">
            <template #icon></template>
            <template #title>
              <div style="display: flex;align-items: center;" v-if="resource.resource">
                <Icon v-if="resource.resource.type === 0">
                  <template #component>
                    <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
                      <path
                        d="M512 1006.34L203.038 512 512 17.66 820.962 512 512 1006.34zM320.962 512L512 817.66 703.037 512 512 206.34 320.962 512z"
                        p-id="4348" />
                    </svg>
                  </template>
                </Icon>
                <LineOutlined :rotate="135" v-else-if="resource.resource.type === 1" />
                <GatewayOutlined v-else-if="resource.resource.type === 2" />
                <div style="margin-left: 10px;">
                  {{ resource.name }}
                </div>
              </div>
              <div style="display: flex;align-items: center;" v-else>
                <FolderOutlined />
                <div style="margin-left: 10px;">
                  {{ resource.name }}
                </div>
              </div>
            </template>
            <template v-if="layer.elements">
              <a-tree-node v-for="item in resource.elements" :id="getLayerTreeKey('resource', item.id)"
                :key="getLayerTreeKey('resource', item.id)" :label="'PHOTO'">
                <template #icon></template>
                <template #title>
                  {{ item.name }}
                </template>
              </a-tree-node>
            </template>
          </a-tree-node>
        </template>
      </a-tree-node>
    </a-directory-tree>
  </div>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue'
import Icon from '@ant-design/icons-vue';
import { FolderOutlined, LineOutlined, GatewayOutlined } from '@ant-design/icons-vue';
import noData from '/@/assets/icons/no-data.png'
import { mapLayer } from '/@/types/mapLayer'
import { getLayerTreeKey } from '/@/utils/layer-tree'

const props = defineProps({
  layerData: Array as PropType<mapLayer[]>
})

const getTreeData = computed(() => {
  return JSON.parse(JSON.stringify(props.layerData))
})
</script>

<style lang="scss">
.device-map-layers {
  span {
    color: #FFFFFF;
  }
}

.ant-tree.ant-tree-directory>li span.ant-tree-node-content-wrapper:hover::before,
.ant-tree.ant-tree-directory .ant-tree-child-tree>li span.ant-tree-node-content-wrapper:hover::before {
  background: #1890ff;
}
</style>