<template>
  <el-dropdown trigger="hover">
    <span class="el-dropdown-link">
      专题图<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <div class="dropdown-div">
        <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span v-if="node.level==1">{{ node.label }}</span>
            <span v-else :class="data.icon">{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: '管网破损专题图',
          children: [
            {
              id: 4,
              icon: 'iconfont iconguanwang2',
              label: '管道（13个）'
            },
            {
              id: 5,
              icon: 'iconfont iconzhongdian11',
              label: '监测点（2个）'
            }
          ]
        },
        {
          id: 2,
          label: '雨污混接专题图',
          children: [
            {
              id: 5,
              icon: 'iconfont iconguanwang2',
              label: '管道（13个）'
            },
            {
              id: 6,
              icon: 'iconfont iconzhongdian11',
              label: '监测点（2个）'
            }
          ]
        },
        {
          id: 3,
          label: '监测点',
          children: [
            {
              id: 7,
              icon: 'iconfont iconqingshuishuizhiyibiao',
              label: '管网水质监测仪（25台）'
            },
            {
              id: 8,
              icon: 'iconfont iconyeweiji',
              label: '液位计（15台）'
            },
            {
              id: 9,
              icon: 'iconfont icondibiaoshuizhijianceyi',
              label: '地表水水质监测仪（10台）'
            }
          ]
        },
        {
          id: 4,
          label: '人工检测专题图',
          children: [
            {
              id: 10,
              icon: 'iconfont iconguanwang',
              label: '人工检测管线（13个）'
            },
            {
              id: 11,
              icon: 'iconfont iconjiancebaojingguanli',
              label: '缺陷（2）'
            }
          ]
        }
      ]
    }
  },
  methods: {
    aa(node, data) {
      console.log(node, data)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dropdown {
  >>> .el-dropdown-link {
    color: #606266;
    &:hover {
      color: #409eff;
    }
  }
}
.dropdown-div {
  width: 300px;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  .el-tree {
    >>> .el-tree-node__content {
      margin-bottom: 6px;
    }
    .custom-tree-node {
      > span {
        font-size: 14px !important;
        &::before{
            margin: 0 5px;
            color: #999999;
        }
      }
    }
  }
}
</style>