/**
* @Author: 858834013@qq.com
* @Name: tuceng
* @Date: 2022-06-10
* @Desc:
*/

<template>
  <div class="tuceng wow fadeInLeft">
    <div class="close"></div>
    <div class="titletc">
      图层管理
    </div>
    <tab @getactive='getactive' :list='listtab'></tab>
    <div class="eltree hideScrollBar">
      <el-tree
          ref="tree"
          node-key="id"
          :data="data"
          show-checkbox
          :props="defaultProps"
          :default-expanded-keys="expandedKeys"
          :default-checked-keys="checkedKeys"
          :check-strictly="true"
          @check="handleNodeClick"
      >
        <div class="custom-tree-node" slot-scope="{node, data}">
          <div class="tree-node">
            <!--          <contraction v-if="node.childNodes.length>0" :is-expand="node.expanded"></contraction>-->
            <div class="tree-node-label">
              <!--            <icon :type="node.level" :childNodes="node.childNodes.length"></icon>-->
              <!--              <img class="treeicon" src="../assets/icon/icon_tree_active.png" alt="">-->
              <span class="ellipsis" style="user-select:none;" :title="node.label">{{ node.label }}</span>
            </div>
          </div>
        </div>
      </el-tree>
    </div>
  </div>
</template>

<script>
import tab from '@/components/tab/tab.vue'

export default {
  name: "tuceng",
  components: {
    tab
  },
  props: {
    openeds: {
      type: Array,
      default() {
        return [0];
      }
    },
    active: {
      type: String,
      default() {
        return ''
      }
    },
  },
  data() {
    return {
      isActive: false,
      current: 0,
      listtab: ['管线图层', '基础图层'],
      organizationTree: [],
      checkedKeys: [],
      expandedKeys: [],
      data: [{
        label: 'demo',
        children: [{
          label: '管线',
          children: [{
            label: '电信'
          }, {
            label: '给水'
          }, {
            label: '排水'
          }, {
            label: '热力'
          }, {
            label: '燃气'
          },]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },
  mounted() {
    new this.$wow.WOW().init()
  },
  methods: {
    getactive(item) {
      this.current = item
    },
    handleNodeClick(data) {
      this.message = data.title;
    },
    treeLeaf(data, node) {
      console.log(data, node)
      return !data.children;
    },
  }
}
</script>

<style lang="scss" scoped>
.close {
  background: url("../assets/sidebar2_close.png") no-repeat;
  background-size: 100% 100%;
  width: 22px;
  height: 22px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.tuceng {
  position: fixed;
  left: 329px;
  background: url("../assets/sidebar2.png") no-repeat;
  background-size: 100% 100%;
  width: 340px;
  height: calc(100% - 230px);
  top: 100px;
  bottom: 130px;
  z-index: 100;

  .sidebarList {
    padding-top: 40px;
  }

  .sidebarList {
    position: relative;
    height: calc(100% - 70px);
    overflow-y: scroll;

    a {
      text-decoration: none;
    }
  }

  .treeicon {
    width: 19px;
    height: 19px;
    margin-right: 10px;
    margin-left: 10px;
  }

  ::v-deep {
    /* 设置树形最外层的背景颜色和字体颜色 */
    .el-tree {
      color: #fff;
      background: transparent;
      width: calc(100% - 40px);
      margin-left: 20px;
    }

    .el-tree > .el-tree-node > .el-tree-node__children {
      background: rgba(#00CCFF, 0.2);
    }

    //.el-checkbox__input {
    //  width: 19px;
    //  height: 19px;
    //
    //
    //}
    .el-checkbox__inner {
      width: 19px;
      height: 19px;
      border: none;
      background: url("../assets/icon/icon_checkbox.png") center center no-repeat;
      background-size: 18px 18px;

      &::after {
        display: none !important;
      }
    }

    .is-checked {
      .el-checkbox__inner {
        width: 19px;
        height: 19px;
        border: none;
        background: url("../assets/icon/icon_tree_active.png") center center no-repeat;
        background-size: 19px 19px;
      }
    }

    /* 设置三角形图标的颜色 */
    .el-tree-node__expand-icon {
      color: #fff !important;
      font-size: 16px;
    }

    /* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */
    .el-tree-node__content:hover .el-tree-node__expand-icon {
      color: #fff;
    }

    /* .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {
      color: transparent;
    } */

    /* 树节点鼠标悬浮式改变背景色，字体颜色 */
    .el-tree-node__content:hover {
      background: none;
      color: rgba(0, 164, 255, 1);
    }

    /* 改变节点高度 */
    .el-tree-node__content {
      height: 36px;
    }

    /* 节点前边的三角图标并不会被节点样式影响，需要单独修改 当前激活的颜色*/
    .el-tree-node:focus
    > .el-tree-node__content
    .el-tree-node__expand-icon {
      color: rgba(39, 114, 229, 1);
    }

    /* 改变被点击节点背景颜色，字体颜色 */
    .el-tree-node:focus > .el-tree-node__content {
      background: none;
      color: rgba(0, 164, 255, 1);
    }
  }
}

.tree-node-label {
  font-size: 16px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #FFFFFF;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

.titletc {
  font-size: 20px;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  color: #FFFFFF;
  border-bottom: 1px solid #086BAD;
  height: 54px;
  width: 290px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  margin-top: 50px;
}

.eltree {
  width: 100%;
  height: calc(100% - 200px);
  overflow: scroll;
  position: relative;
}
</style>