<template>
  <div class="header-btn">
    <el-popover
      placement="bottom"
      trigger="click"
      width="450"
      class="popover"
      v-model="visible"
    >
      <div class="changeBox">
        <div class="title-content">
          <span>{{ isUserList ? "切换用户" : "用户组织" }}</span>
          <i
            class="el-icon-arrow-left"
            style="cursor: pointer;"
            @click="isUserList = true"
          ></i>
          <i
            class="el-icon-arrow-right"
            style="cursor: pointer;"
            @click="isUserList = false"
          ></i>
        </div>
        <div class="content-list" v-if="isUserList">
          <div
            class="content-list-item"
            v-for="(item, index) in groupListData"
            :key="index"
            @click="selectGroup(item)"
          >
            <i class="el-icon-trophy-1"></i>
            <span>{{ item.companyName }}</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="tree-group" v-else>
          <div class="select-list">
            <el-input
              placeholder="输入关键字进行查找"
              v-model="filterText"
              style="width: 98%;"
              suffix-icon="el-icon-search"
              size="medium"
            >
            </el-input>
            <el-tree
              :data="selectedGroupData"
              :props="selectTreeProps"
              :default-expand-all="true"
              node-key="sn"
              ref="tree"
              :filter-node-method="filterNode"
              :highlight-current="true"
              :check-on-click-node="true"
              @node-click="treeClick"
              style="margin:10px 5px;"
            ></el-tree>
          </div>
        </div>
      </div>
      <!-- 点击内容 -->
      <div slot="reference" class="click-content">
        <i class="el-icon-trophy-1"></i>
        <span>18772114025</span>
        <i class="el-icon-arrow-down"></i>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      isUserList: true,
      filterText: "",
      selectTreeProps: {
        children: "list",
        label: "name",
      },
      groupListData: [],
      selectedGroupData: [],
      selectedProjectSn: ""
    };
  },
  created() {
    this.getGroupTreeData();
  },
  mounted() {},
  methods: {
    // 选中组织中的项目级
    selectProject(obj) {
      if (obj.list && obj.list.length > 0) {
        obj.list.map((item) => {
          this.selectProject(item);
        });
      } else {
        if(!this.selectedProjectSn){ // 加判断是为了在循环中只选中第一个
          this.selectedProjectSn = obj.sn;
          // 修改全局projectSn
          this.$store.commit("setProjectSn", obj.sn);
        }
      }
    },
    // 选中组织
    selectGroup(item) {
      this.selectedGroupData = [item];
      this.isUserList = false;
      this.$nextTick(() => {
        this.selectProject(item);
      });
    },
    // 获取组织树数据
    getGroupTreeData() {
      this.groupListData = this.$store.state.groupTreeList;
      this.isUserList = false;
      let findItem = this.groupListData.find(
        (item) => item.sn == this.$store.state.selectedGroupSn
      );
      this.selectedGroupData = [findItem];
      this.$nextTick(() => {
        this.selectProject(findItem);
      });
    },
    // 树形控件点击
    treeClick(data) {
      console.log(data);
      if(data.projectSn){
        this.selectedProjectSn = data.projectSn;
        // 修改全局projectSn
        this.$store.commit("setProjectSn", data.projectSn);
        // 收起popover
        this.visible = false;
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>
<style lang="less" scoped>
.flexStyle() {
  display: flex;
  align-items: center;
}
.changeBox {
  padding: 0px 10px;
  .title-content {
    .flexStyle();
    > span {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #000000;
      margin-right: auto;
    }
  }
  .content-list {
    margin-top: 15px;
    &-item {
      .flexStyle();
      padding: 10px 15px;
      border: 1px solid #dadbdb;
      border-radius: 5px;
      cursor: pointer;
      > span:nth-child(2) {
        margin: 2px 10px 0px 10px;
      }
      > span:nth-child(3) {
        padding: 3px 10px;
        color: #79acfa;
        background-color: #e4f5ff;
        border: 1px solid #99c3fb;
        border-radius: 5px;
        font-size: 10px;
      }
      /deep/.el-icon-arrow-right {
        margin-left: auto;
      }
    }
    &-item:not(:last-child) {
      margin-bottom: 10px;
    }
  }
  .tree-group {
    margin-top: 15px;
    background-color: #fff;
    .select-list {
      &-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
.click-content {
  cursor: pointer;
  .flexStyle();
  > span {
    margin: 0px 10px;
  }
}
</style>
<style>
.el-popover {
  box-sizing: content-box !important;
}
</style>
