<template>
  <div class="fullHeight">
    <div class="areaTreeBox fullHeight" id="videoTreeBox">
      <div class="areaTreeInner whiteBlock fullHeight">
        <p style="font-size: 14px">
          共有{{
            enterpriseDepartmentTeamInfo.enterpriseNum || 0
          }}个参建单位，{{
            enterpriseDepartmentTeamInfo.teamNum || 0
          }}个班组、{{ enterpriseDepartmentTeamInfo.departmentNum || 0 }}个部门
        </p>
        <el-form
          size="medium"
          class="flex-box"
          ref="riskListForm"
          :model="riskListForm"
        >
          <el-form-item>
            <el-select
              @change="onProjectChange"
              v-model="riskListForm.enterpriseTypeId"
              clearable
              placeholder="请选择"
            >
              <el-option :label="'全部企业类型'" value=""></el-option>
              <el-option
                :label="item.companyTypeName"
                :value="item.id"
                v-for="item in companyTypeList"
                :key="item.id"
              ></el-option>
            </el-select>
            <el-input
              @input="onProjectBlur"
              suffix-icon="el-icon-search"
              v-model="riskListForm.devName"
              placeholder="请输入组织名称查询"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="treeBox">
          <vue-scroll v-if="level1CompanyData.length > 0">
            <el-tree
              :data="level1CompanyData"
              @node-click="handleNodeClick"
              :props="defaultProps"
              :default-expanded-keys="defaultExpandedKeys"
              :default-expand-all="defaultExpandAll"
              @node-expand="handleNodeExpand"
              @node-collapse="handleNodeCollapse"
              node-key="uniqueId"
              ref="tree"
            >
              <div
                :class="{
                  'node_icon-offline': data.enterpriseTypeId != 1,
                  'custom-tree-node_icon node_icon-online': data.type == 2,
                }"
                class="custom-tree-node"
                slot-scope="{ node, data }"
              >
                <span
                  style="
                    width: 75%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: inline-block;
                  "
                  class="videoName projectName"
                  :class="{
                    'color_333 font-bold': data.type == 1,
                  }"
                  :title="data.name"
                  ><span v-if="data.name != '全部组织'"
                    >【{{ data.typeName }}】</span
                  >{{ data.name }}</span
                >
                <span style="margin-right: 10px" v-if="data.children.length > 0"
                  >({{ data.children.length }})</span
                >
              </div>
            </el-tree>
          </vue-scroll>
          <div class="placeholderBox" v-else>
            <img src="@/assets/images/noData2.png" alt="" srcset="" />
            <p>{{ $t("message.videoManage.empty") }}</p>
          </div>
        </div>
        <div class="sidebar_btn2">
          <el-button @click="setCheckedNodes" size="mini" type="text" plain
            >全部展开</el-button
          >
          <el-button @click="setCheckedKeys" size="mini" type="text" plain
            >全部关闭</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getEnterpriseDepartmentTeamTree,
  getEnterpriseDepartmentTeamStaticsApi,
} from "@/assets/js/api/bodyWornCamera";
import { getEnterpriseTypeList } from "@/assets/js/api/laborPerson";
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },
      level1CompanyData: [],
      riskListForm: {
        enterpriseTypeId: "",
        devName: "",
      },
      defaultExpandAll: false,
      defaultExpandedKeys: [],
      projectSn: "",
      riskListDetailInfo: [],
      companyTypeList: [],
      enterpriseDepartmentTeamInfo: {},
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.getRiskListLibraryList();
    this.getEnterpriseDepartmentTeamStatics();
    this.getCompanyTypeList();
  },
  mounted() {},
  methods: {
    // 获取企业类型列表
    getCompanyTypeList() {
      getEnterpriseTypeList({
        projectSn: this.projectSn,
      }).then((res) => {
        console.log(res, "企业类型列表");
        if (res.result) {
          this.companyTypeList = res.result;
        }
      });
    },
    onProjectChange() {
      this.getRiskListLibraryList();
      this.getEnterpriseDepartmentTeamStatics();
    },
    onProjectBlur() {
      this.getRiskListLibraryList();
      this.getEnterpriseDepartmentTeamStatics();
    },
    getEnterpriseDepartmentTeamStatics() {
      getEnterpriseDepartmentTeamStaticsApi({
        enterpriseTypeId: this.riskListForm.enterpriseTypeId,
        name: this.riskListForm.devName,
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        if (res.success) {
          this.enterpriseDepartmentTeamInfo = res.result;
        }
      });
    },
    getRiskListLibraryList() {
      getEnterpriseDepartmentTeamTree({
        enterpriseTypeId: this.riskListForm.enterpriseTypeId,
        name: this.riskListForm.devName,
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        if (res.success) {
          this.level1CompanyData = [
            {
              uniqueId: "",
              name: "全部组织",
              children: res.result,
            },
          ];
          this.$nextTick(() => {
            const resultInfo = this.level1CompanyData[0];
            this.$refs.tree.setCurrentKey(resultInfo);
            this.handleNodeClick(resultInfo);
          });
        }
      });
    },
    handleNodeClick(data) {
      console.log(data, "点击节点");
      this.riskListDetailInfo = {
        ...data,
      };
      this.$emit("getRiskListDetailInfo", this.riskListDetailInfo);
      //   this.getRiskListDetailPage();
    },
    //全部关闭
    setCheckedKeys() {
      this.defaultExpandAll = false;
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded =
          this.defaultExpandAll;
        const { data } = this.$refs.tree.store._getAllNodes()[i];
        this.handleNodeCollapse(data);
      }
      console.log(this.defaultExpandedKeys);
    },
    //全部展开
    setCheckedNodes() {
      // defaultExpandedKeys
      console.log(this.$refs.tree.store._getAllNodes());
      this.defaultExpandAll = true; //展开所有节点
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        // this.$refs.tree.store._getAllNodes()[i].expanded = this.defaultExpandAll;
        const { data } = this.$refs.tree.store._getAllNodes()[i];
        if (data.children.length > 0) {
          this.handleNodeExpand(data);
        }
      }
    },
    // 树节点展开
    handleNodeExpand(data) {
      // 保存当前展开的节点
      const flag = this.defaultExpandedKeys.some((item) => {
        if (item === data.uniqueId) {
          return true;
        }
        return false;
      });
      if (!flag) {
        // 不存在则存到数组里
        this.defaultExpandedKeys.push(data.uniqueId);
      }
    },
    // 树节点关闭
    handleNodeCollapse(data) {
      // 删除当前关闭的节点
      this.defaultExpandedKeys.some((item, i) => {
        if (item === data.uniqueId) {
          this.defaultExpandedKeys.splice(i, 1);
        }
      });
      this.removeChildrenIds(data); // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
    },
    // 删除树子节点
    removeChildrenIds(data) {
      if (data.children) {
        data.children.forEach((item) => {
          const index = this.defaultExpandedKeys.indexOf(item.uniqueId);
          if (index > 0) {
            this.defaultExpandedKeys.splice(index, 1);
          }
          this.removeChildrenIds(item);
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.sidebar_btn2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  background-color: #f7f7f7;
  > .el-button {
    color: #b3b3b3;
    position: relative;
    border: none;
    background-color: #f7f7f7;
  }
  > .el-button:first-child::before {
    content: " ";
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 1px;
    height: 90%;
    // background-color: #d9d9d9;
  }
  > .el-button:hover {
    color: #5181f6;
  }
}
.flex-box {
  margin-top: 20px;
  .el-form-item {
    margin-bottom: 20px;
  }

  /deep/ .el-form-item__content {
    display: flex;
    .el-select {
      margin-right: 5px;
      width: 103px;
    }
    .el-input {
      flex: 1;
    }
  }
}

.el-form-item--mini.el-form-item {
  margin-bottom: 8px;
}
.flex() {
  display: flex;
  align-items: center;
}
.treeStyle() {
  /deep/.el-tree {
    font-size: 15px;
    width: 100%;
    background-color: transparent;
    .el-tree-node {
      white-space: normal;
      &:focus > .el-tree-node__content {
        background-color: transparent;
      }
      &.is-current > .el-tree-node__content {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
        .el-tree-node__expand-icon {
          background-image: url(~@/assets/images/laborManage/open_active.png);
        }
        .el-tree-node__expand-icon.expanded {
          background-image: url(~@/assets/images/laborManage/packup_active.png);
        }
      }
    }
    .el-tree-node__content {
      // height: 32px;
      padding: 7px 0;
      height: auto;
      line-height: 16px;
      position: relative;
      // margin-bottom: 7px;
      &:hover {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }

      .videoName {
        font-size: 14px;
      }
      .projectName {
        font-size: 14px;
        width: calc(100% - 55px);
        display: inline-block;
      }
      .companyName2 {
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
        width: 192px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .el-tree-node__expand-icon {
      // font-size: 16px;
      // padding: 0 6px;
      width: 12px;
      height: 12px;
      background-image: url(~@/assets/images/laborManage/open.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: inline-block;
      padding: 0;
      margin: 6px;

      &.is-leaf {
        color: transparent !important;
        background-image: none !important;
      }
    }
    .el-tree-node__expand-icon.expanded {
      background-image: url(~@/assets/images/laborManage/packup.png);
      transform: rotate(0deg);
    }
    .el-icon-caret-right:before {
      display: none;
    }
    .treeTitle {
      background-color: #f7f7f7;
      margin-bottom: 10px;
    }
  }
}
.custom-tree-node {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.custom-tree-node_icon::before {
  content: "";
  width: 12px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-62%);
}
.node_icon-online::before {
  background-image: url(~@/assets/images/laborManage/bodyworn_icon1.png);
}
.node_icon-offline::before {
  background-image: url(~@/assets/images/laborManage/bodyworn_icon2.png);
}

.el-tree-node.is-current .custom-tree-node_icon::before {
  background-image: url(~@/assets/images/laborManage/bodyworn_icon3.png);
}
.el-icon-setting {
  font-size: 15px;
  color: #8eb0fa;
}

.areaTreeBox {
  float: left;
  position: relative;
  .treeStyle();
}

.areaTreeInner {
  //   background-color: rgba(0, 0, 0, 0.7);
  width: 300px;
  padding: 20px 15px;
  height: calc(100% - 40px);
}
.treeBox {
  height: calc(100% - 42px - 32px - 32px - 20px - 16px);
  background-color: rgba(216, 216, 216, 0.2);
  padding-top: 10px;
}
/deep/ .el-transfer__buttons {
  display: none;
}
/deep/ .el-transfer-panel {
  width: 200px;
  margin: 5px 22px;
}
</style>
