<template>
  <div class="treebox" v-loading="loading">
    <el-tree
      :highlight-current="true"
      :check-strictly="true"
      ref="tree"
      :data="treeList"
      node-key="o"
      :default-checked-keys="defaultListc"
      :default-expanded-keys="defaultListc"
      @node-click="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node }">
        <em
          style="display: inline-block; width: 20px"
          v-if="node.data.haveUserFlag == 'N' && node.data.children.length == 0"
        ></em>
        <i
          class="el-icon-caret-right"
          v-if="node.data.haveUserFlag == 'Y' && node.data.children.length == 0"
        ></i>
        <el-checkbox
          @change="handleCheckChange(node)"
          style="margin-right: 10px"
          v-model="node.checked"
          v-if="node.data.type == 1"
        ></el-checkbox>
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  props: ["defaultList", "type", "closeList", "resetList", "only"],
  data() {
    return {
      treeList: [],
      opt: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      defaultListc: [],
      loading: false,
    };
  },
  methods: {
    getTree() {
      this.loading = true;
      this.$http({
        url: "/sysmgr/csysdept/queryAllList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        this.treeList = res.data;
        this.loading = false;
      });
      // const info = JSON.parse(sessionStorage.userInfo);
      // console.log(info, "JSON.parse(sessionStorage.userInfo)");
      // this.treeList = [
      //   {
      //     children: [],
      //     o: info.groupId,
      //     label: `${info.groupName}`,
      //     haveUserFlag: "Y",
      //     ou: `${info.groupName}`,
      //   },
      // ];
    },
    handleNodeClick(v) {
      let s = false;
      if (v.children && v.children.length == 0) {
        s = true;
      }
      if (v.type) {
        return;
      }
      if (
        v.children &&
        v.children.length > 0 &&
        v.children[v.children.length - 1].type == 1
      ) {
        return;
      }
      this.loading = true;
      console.log(v);
      this.$http({
        url: "/sysmgr/sysuserinfo/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          groupId: v.o,
        },
      }).then((res) => {
        v.children = v.children ? v.children : [];
        res.data.forEach((item) => {
          v.children.push({
            id: item.groupId,
            label: item.loginNameStr,
            type: 1,
            displayname: v.displayname,
            loginNoStr: item.loginNoStr,
            o: item.id,
          });
        });
        this.loading = false;
      });
      for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        if (s && v.o == this.$refs.tree.store._getAllNodes()[i].data.o) {
          this.$refs.tree.store._getAllNodes()[i].expanded = true;
        }
      }
    },
    handleCheckChange(node) {
      console.log(this.only, "only");
      const nodeList = this.$refs.tree.store.getCheckedNodes();
      if (this.only) {
        if (nodeList.length === 1) {
          this.$emit("treeCheck", nodeList);
        } else if (nodeList.length === 0) {
          this.$refs.tree.setCheckedKeys([]);
          this.$emit("treeCheck", nodeList);
        } else {
          let obj = nodeList.filter(item => item.o !== node.data.o)
          this.$refs.tree.setCheckedKeys([]);
          this.$nextTick(() => {
            this.$refs.tree.setChecked(obj[0], true);
          });
          this.$message.error("这里只能选择一个审批人");
        }
      } else if (!this.only) {
        this.$emit("treeCheck", nodeList);
      }
    },
  },
  created() {
    this.getTree();
    this.defaultListc = this.defaultList;
  },
  watch: {
    type() {
      this.defaultListc = this.defaultList;
      this.$forceUpdate();
    },
    defaultList() {
      this.$forceUpdate();
    },
    closeList() {
      this.$refs.tree.setCheckedKeys([]);
      if ([...this.resetList] && [...this.resetList].length > 0) {
        [...this.resetList].forEach((el) => {
          this.$nextTick(() => {
            this.$refs.tree.setChecked(el, true);
          });
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.el-icon-caret-right {
  color: #ccc;
  margin: 0 5px;
}
.treebox {
  border: 1px solid #ddd;
}
</style>
