<template>
  <!-- 组织树组件 -->
  <div class="tree-content">
    <vue2-org-tree
      :data="dataList"
      :horizontal="true"
      collapsable
      @on-expand="onExpand"
      :render-content="renderContent"
    />
  </div>
</template>
<script>
export default {
  name: "Tissuetree",
  props: ["dataList"],
  data() {
    return {
      // data:''
    };
  },
  mounted() {
    this.toggleExpand(this.dataList, true);
  },
  methods: {
    collapse(list) {
      var _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    //展开
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    //是否完全展开
    toggleExpand(data, val) {
      var _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);
        }
      }
    },

    //自定义节点
    renderContent(h, data) {
      return (
        <div class="labelcontent" style="position: relative;">
          <div class="topTitle">{data.label}</div>
          <div class="org-per">
            <div class="org-num">
              部门
            </div>
            <div onClick={()=>this.$router.push({path:'postMenger'})}>岗位</div> <div onClick={()=>this.$router.push({path:'StaffManager'})}>职员</div>

          </div>
          <div class="org-per1">
            <div>{data.department}</div>
            <div class="org-num">{data.station}</div>
            <div>{data.personnel}</div>
                <el-switch
              v-model={data.value}
              active-color="#6F81BC"
              inactive-color="#E4E7EE"
            ></el-switch>
          </div>
          <i
            class="el-icon-error orgUnitState-close"
            style="position: absolute;top: -18px;right: -24px;z-index: 10; color: #303133;font-size: 16px;"
          ></i>
        </div>
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.tree-content {
  margin-top: 182px;
}
.org-tree-node-label-inner {
  width: 264px;
  height: 136px;
  background: #ffffff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
}
.labelcontent {

    position: relative;

}
.org-tree-container {
  background: none;
}
.tree >>> .orgUnitState-close {
  position: absolute;
  top: -10px;
  right: -24px;
  z-index: 10;
  color: #7c8087;
  font-size: 16px;
  font-style: normal;
}
.el-icon-error:before {
  content: "\e79d";
}

.expanded {
  color: #303133;
}
.topTitle {
  height: 18px;
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin: 14px;
  display: flex;
  justify-content: space-between;
}
.org-per {
  margin-top: 24px;
  width: 150px;
  cursor: pointer;
  display: flex;
   justify-content: space-between;
}
.org-per1 {
  display: flex;
  cursor: pointer;
  margin-top: 8px;
   width: 230px;
   justify-content: space-between;
}
</style>

