<template>
  <div>
    <!--顶级按钮-->
    <div class="btn-group mr-1">
      <button
        type="button"
        @click="selectAgency"
        class="btn btn-sm btn-outline-secondary"
      >
        智慧易加
      </button>
      <button
        type="button"
        class="
          btn btn-sm btn-outline-secondary
          dropdown-toggle dropdown-toggle-split
        "
        data-toggle="dropdown"
        aria-expanded="false"
      >
        <span class="sr-only"></span>
      </button>
      <div
        class="dropdown-menu"
        style="overflow-y: auto; max-height: 400px; max-width: 280px"
      >
        <form class="px-4 py-3">
          <input
            type="email"
            class="form-control"
            id="exampleDropdownFormEmail1"
            placeholder=""
            autocomplete="off"
          />
        </form>
        <div class="dropdown-divider"></div>
        <a
          class="dropdown-item"
          href="#"
          v-for="ele in groups"
          :key="ele.deptId"
          @click="selectGroup(ele)"
          >{{ ele.deptName }}</a
        >
      </div>
    </div>
    <!--集团按钮-->
    <div class="btn-group mr-1" v-if="!!currentGroup">
      <button
        @click="selectGroup(currentGroup)"
        type="button"
        class="btn btn-sm btn-outline-secondary"
      >
        {{ currentGroup.deptName }}
      </button>
      <button
        type="button"
        class="
          btn btn-sm btn-outline-secondary
          dropdown-toggle dropdown-toggle-split
        "
        data-toggle="dropdown"
        aria-expanded="false"
      >
        <span class="sr-only"></span>
      </button>
      <div
        class="dropdown-menu"
        style="overflow-y: auto; max-height: 400px; max-width: 280px"
      >
        <form class="px-4 py-3">
          <input
            type="email"
            class="form-control"
            id="exampleDropdownFormEmail1"
            placeholder=""
            autocomplete="off"
          />
        </form>
        <div class="dropdown-divider"></div>
        <a
          class="dropdown-item"
          href="#"
          v-for="ele in stations"
          :key="ele.deptId"
          @click="selectStation(ele)"
          >{{ ele.deptName }}</a
        >
      </div>
    </div>
    <!--站点-->
    <button type="button" class="btn btn-sm btn-outline-success" disabled>
      {{ currentShow.deptName }}
    </button>
  </div>
</template>

<script>
import { userdepttree } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },
  data() {
    return {
      value: null,
      options: [],
      Infinity: 2,
      num: 0,
      Agency: {
        deptId: 1,
        deptName: this.$store.state.user.deptName,
      },
      groups: [
        {
          deptId: 3,
          deptName: "李哈哈的集团",
        },
        {
          deptId: 2,
          deptName: "李哈哈的顶级集团",
        },
      ],
      stations: [
        {
          deptId: 4,
          deptName: "李哈哈的站点1",
        },
        {
          deptId: 5,
          deptName: "李哈哈的站点2",
        },
      ],
      currentStation: undefined,
      currentGroup: undefined,
    };
  },
  computed: {
    currentShow() {
      if (!!this.currentStation) {
        return this.currentStation;
      }
      if (!!this.currentGroup) {
        return this.currentGroup;
      }
      return this.Agency;
    },
  },
  watch: {
    // 监听deptId
    value: "currDeptChange",
  },
  created() {
    // this.getTreeselect();
  },
  methods: {
    selectAgency(agency) {
      this.currentGroup = undefined;
      this.currentStation = undefined;
      this.refreshTagView();
    },
    selectGroup(group) {
      this.currentGroup = group;
      this.currentStation = undefined;
      this.refreshTagView();
    },
    selectStation(station) {
      this.currentStation = station;
      this.refreshTagView();
    },
    /** 查询部门下拉树结构 */
    // getTreeselect() {
    //   userdepttree().then((response) => {
    //     this.options = response.data;
    //     if (response.data != null && response.data.length > 0) {
    //       this.value = response.data[0].id;
    //       this.$store.selectDeptName = response.data[0].label;
    //       this.$store.selectDeptId = response.data[0].id;
    //     }
    //   });
    // },
    currDeptChange(val) {
      if (val) {
        this.$store.selectDeptId = val;
        if (this.num > 0) {
          let path = this.$route.path;
          let visitedViews = this.$store.state.tagsView.visitedViews;
          let stagpath = null;
          const proArr = [];
          for (let i = 0; i < visitedViews.length; i++) {
            let view = visitedViews[i];
            proArr.push(
              this.$store.dispatch("tagsView/delCachedView", view).then(() => {
                const { fullPath } = view;
                if (path === fullPath) {
                  stagpath = view;
                } else {
                  this.$nextTick(() => {
                    this.$router.replace({
                      path: "/redirect" + fullPath,
                    });
                  });
                }
              })
            );
          }
          Promise.all(proArr).then(() => {
            if (stagpath != null) {
              this.$store
                .dispatch("tagsView/delCachedView", stagpath)
                .then(() => {
                  const { fullPath } = stagpath;
                  this.$nextTick(() => {
                    this.$router.replace({
                      path: "/redirect" + fullPath,
                    });
                  });
                });
            }
          });
        }
        this.num = this.num + 1;
      }
    },
    refreshTagView() {
      const proArr = []
      this.$store.state.tagsView.visitedViews.map((view) => {
        proArr.push(this.$store.dispatch("tagsView/delCachedView", view))
        // this.$store.dispatch("tagsView/delCachedView", view).then(() => {
        //   const { fullPath } = view;
        //   console.log(fullPath);
        //   // this.$nextTick(() => {
        //   //   this.$router.replace({
        //   //     path: "/redirect" + fullPath,
        //   //   });
        //   // });
        // });
      });
      Promise.all(proArr).then(()=>{
          this.$nextTick(() => {
            this.$router.replace({
              path: "/redirect" + this.$route.path,
            });
          });
      })
    },
  },
};
</script>
<style lang="scss">
.vue-treeselect__control {
  height: 20px;
  line-height: 26px;
  font-size: 12px;
  text-indent: 4px;
}
.vue-treeselect__menu-container {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: visible;
  transition: 0s;
}
.vue-treeselect__menu {
  font-size: 12px;
}
</style>