<template>
  <div class="intelligence-tree">
    <el-tree
      ref="_tree"
      class="map-legend-scroll"
      :data="data"
      :props="defaultProps"
      :node-key="nodeKey"
      :show-checkbox="showCheckbox"
      :default-expand-all="defaultExpandAll"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <span slot-scope="{ data }" class="tree-item">
        <span v-if="$slots.default">
          <slot />
        </span>
        <template v-else>
          <i class="icon" style="background: #f6b37f" />
          <span class="name">{{ data.name }}</span>
        </template>
      </span>
    </el-tree>
  </div>
</template>
<script>
/**
 * @displayName lls-tree
 */
export default {
  name: 'LlsTree',
  props: {
    /**
    * 数据源
    * @values 	string
    */
    data: {
      type: Array,
      default: () => []
    },
    /**
    * 树节点用来作为唯一标识的属性
    * @values 	string
    */
    nodeKey: {
      type: String,
      default: 'id'
    },
    /**
    * 节点是否可被选择
    * @values 	boolean
    */
    showCheckbox: {
      type: [Boolean, String],
      default: true
    },
    /**
     * 配置code
     */
    defaultProps: {
      type: Object,
      default: () => ({ children: 'children', label: 'name' })
    },
    /**
     * 是否默认展开所有节点
     */
    defaultExpandAll: {
      type: [Boolean, String],
      default: true
    }
  },
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.intelligence-tree {
  width: 2.16rem;
  height: 6.61rem;
  background: rgba(5, 25, 53, 0.62);
  border-radius: 0.02rem;
  flex: 1;
  overflow-y: auto;
  .map-legend-scroll {
    // background: rgba(5,25,53,0.6);
    background-color: transparent;
  }
}
</style>
<style lang="scss">
.intelligence-tree {
  .tree-item {
    display: flex;
    align-items: center;
    .icon {
      width: 0.07rem;
      height: 0.07rem;
      margin-right: 0.08rem;
      border-radius: 50%;
    }
    .name {
      margin-right: 0.2rem;
      font-size: 0.15rem;
      color: #ffffff;
    }
  }
  .el-tree {
    & > .el-tree-node > .el-tree-node__content {
      height: 0.45rem;
      background: rgba(104, 216, 237, 0.12);
    }

    .el-tree-node__children > .el-tree-node > .el-tree-node__content {
      height: 0.45rem;
    }
    &-node__content:hover,
    .el-tree-node:focus > .el-tree-node__content,
    &--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      background: transparent;
    }
    .el-tree-node__content:hover {
      background: transparent;
    }
    .el-tree-node.is-checked .el-tree-node__content {
      background-size: 100% 100%;
      background-position: center center;
    }
    .el-tree-node__expand-icon {
      opacity: 0;
      &.is-leaf {
        color: transparent;
      }
    }
    .el-checkbox__inner {
      background: transparent;
      width: 0.14rem;
      height: 0.14rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-color: #52baff;
      background: #000e29;
    }
  }
}

</style>
