<template>
  <a-tooltip placement="leftBottom" trigger="click" color="transparent" :overlayInnerStyle="{boxShadow: 'none'}">
    <template #title>
      <div class="layers-tree">
        <div class="layers-tree-title">图层管理</div>
        <div class="layers-tree-content">
          <a-Tree
            checkable
            :onCheck="onCheck"
            :checkedKeys="checkedKeys"
            :treeData="layerConfigs"
          />
        </div>
      </div>
    </template>
    <div class="map-item">
      <i class="icon iconfont icon-layer"></i>
    </div>
  </a-tooltip>
</template>
<script setup lang="ts">
import { ref } from "vue";
const onCheck = () => {
  console.log("点击了测量工具");
};
const checkedKeys = ref([]);
const layerConfigs = ref([
  {
    title: "图层1",
    key: "layer1",
    children: [
      {
        title: "子图层1",
        key: "sublayer1",
      },
    ],
  },
  {
    title: "图层2",
    key: "layer2",
  },
  {
    title: "图层3",
    key: "layer3",
  },
  {
    title: "图层4",
    key: "layer4",
  },
  {
    title: "图层5",
    key: "layer5",
  },
  {
    title: "图层6",
    key: "layer6",
  },
  {
    title: "图层7",
    key: "layer7",
  },
  {
    title: "图层8",
    key: "layer8",
  },
  {
    title: "图层9",
    key: "layer9",
  },
  {
    title: "图层10",
    key: "layer10",
  },
  {
    title: "图层11",
    key: "layer11",
  },
  {
    title: "图层12",
    key: "layer12",
  },
  {
    title: "图层13",
    key: "layer13",
  },
]);
const onSelect = (selectedKeys: any) => {
  console.log(selectedKeys);
};
</script>
<style scoped lang="scss">
.map-item {
  height: 40px;
  width: 40px;
  color: #000;
  line-height: 40px;
  text-align: center;
  position: relative;
  cursor: pointer;
  .iconfont {
    font-size: 20px;
  }
  &:hover {
    background-color: #005292;
    color: #ffffff;
  }
}
.layers-tree {
  width: 230px;
  box-shadow: 0 1px 2px #00000026;
  background-color: #fff;
  cursor: initial;
  border: 1px solid #ccdae7;
  .layers-tree-title {
    color: rgba(0, 0, 0, 0.85);
    text-align: left;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    border-bottom: 1px dotted #ccc;
  }
  .layers-tree-content {
    max-height: 300px;
    overflow-y: auto;
  }
}
</style>
