<!--
 * @Author: your name
 * @Date: 2021-11-09 09:46:37
 * @LastEditTime: 2021-12-22 17:08:40
 * @LastEditors: Please set LastEditors
 * @Description: vue2-org-tree
 * @FilePath: \Foshan4A\src\layout\components\OrgTree\index.vue
-->
<template>
  <div class="orgTree">
    <div class="orgTreeContent">
      <vue2-org-tree
        :data="dataList"
        :horizontal="true"
        collapsable
        @on-expand="onExpand"
        :render-content="renderContent"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "OrgTree",
  props: {
    dataList: {
      type: Object,
      default: () => {},
    },
    renderContent: {
      type: Function,
    },
  },
  mounted() {
    this.toggleExpand(this.dataList, true);
  },
  watch: {
    dataList: {
      handler(val, old) {
        if (val != old) {
          this.toggleExpand(val, true);
        }
      },
      deep: true,
    },
  },
  methods: {
    collapse(list) {
      const _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    //展开
    onExpand(e, data) {
      const _this = this;
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          _this.collapse(data.children);
        }
      } else {
        _this.$set(data, "expand", true);
      }
      if (data.expand) {
        this.$emit("expandData", data);
      }
    },
    //节点关闭按钮点击
    onNodeClick(e, data) {
      const _this = this;
      if (e.target.className === "icon el-icon-close") {
        this.decompose(_this.dataList.children, data.id);
      }
    },
    //删除指定数据
    decompose(data, id) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].id === id) {
          data.splice(i, 1);
        } else if (data[i].children && data[i].children.length > 0) {
          this.decompose(data[i].children, id);
        }
      }
    },
    //是否完全展开
    toggleExpand(data, val) {
      const _this = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        _this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.orgTree {
  ::v-deep .orgTreeContent {
    .account-left-content-teams {
      position: relative;
      .info-close {
        position: absolute;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background: #000000;
        border-radius: 50%;
        top: -12px;
        right: -12px;
        z-index: 5;
        cursor: pointer;
        .icon {
          color: #fff;
          font-weight: 600;
        }
      }
      .list {
        .info {
          line-height: normal;
          margin-bottom: 37px;
          .name {
            font-size: 16px;
            font-weight: bold;
          }
          .cap {
            width: 16px;
            height: 16px;
            display: inline-block;
            background-repeat: no-repeat;
            background-size: cover;
            transition: all 0.3s;
            margin-left: 16px;
            position: relative;
            top: 2px;
            &:first-child {
              margin-right: 0;
            }
          }
          .cap-plus {
            background-image: url("../../../assets/status/ic_plus.png");
            &:hover {
              background-image: url("../../../assets/status/ic_plus_hovar.png");
            }
          }
          .cap-edit {
            background-image: url("../../../assets/status/ic_edit_default.png");
            &:hover {
              background-image: url("../../../assets/status/ic_edit_hovar.png");
            }
          }
          .cap-sub {
            background-image: url("../../../assets/status/ic_permissions_add_default.png");
            &:hover {
              background-image: url("../../../assets/status/ic_permissions_add_hoavr.png");
            }
          }
          .cap-job {
            background-image: url("../../../assets/status/ic_jobs.png");
            &:hover {
              background-image: url("../../../assets/status/ic_jobs_hovar.png");
            }
          }
          .cap-member {
            background-image: url("../../../assets/status/ic_member.png");
            &:hover {
              background-image: url("../../../assets/status/ic_member_hovar.png");
            }
          }
        }
      }
      .team {
        background: #fff;
        border-radius: 4px;
        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        .bg {
          height: 4px;
          background: #6f81bc;
        }
        .bgOut {
          height: 4px;
          background: #de4799;
        }
        .status1 {
          background: #6f81bc;
        }
        .status2 {
          background: #cfd6e2;
        }
        .status3 {
          background: #f25555;
        }
      }
      .list {
        padding: 23px 24px;
        position: relative;
        min-width: 240px;
        min-height: 118px;
        .info {
          margin-bottom: 20px;
          .info-avoutr {
            display: flex;
            .avoutr {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              background: #303133;
              img {
                max-width: 100%;
              }
            }
            .msg {
              margin-left: 20px;
              p {
                margin: 0;
                padding: 0;
                height: 20px;
                line-height: 20px;
              }
              .name {
                font-weight: bold;
                color: #303133;
                font-size: 18px;
                margin-bottom: 8px;
              }
              .group {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #303133;
              }
            }
          }
          .icon {
            font-size: 16px;
            cursor: pointer;
          }
        }
        .time,
        .ip {
          height: 16px;
          line-height: 16px;
          font-size: 16px;
          .glr {
            color: #909399;
          }
        }
        .ip {
          margin-top: 23px;
          margin-bottom: 38px;
        }
        .details {
          height: 24px;
          line-height: 24px;
          text-align: left;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #afb4bf;
          .success {
            color: #6f80bc;
          }
          .error {
            color: #f25555;
          }
        }
      }
    }
    .org-tree-node-label .org-tree-node-label-inner {
      padding: 0;
      box-shadow: none;
      border-radius: 0;
    }
    .org-tree-container {
      background-color: initial;
      padding: 0;
      display: block;
    }
    .org-tree-node-btn {
      width: 24px;
      height: 24px;
      background-color: #2d67e3;
      box-shadow: none;
      border: none;
    }
    .org-tree-node-children {
      &::before {
        border-top: none;
        height: 4px;
        background-color: #000;
      }
    }
    .horizontal .org-tree-node:not(:first-child):before,
    .horizontal .org-tree-node:not(:last-child):after {
      border-top: 0;
      border-left: 4px solid #000;
    }
    .horizontal .org-tree-node:not(:only-child):after {
      border-top: 4px solid #000;
    }
  }
}
</style>