<template>
  <div class="flex items-center gap-5">
    <el-popover
      placement="bottom-start"
      trigger="manual"
      :offset="-100"
      v-model="visible"
    >
      <div class="change-btn" slot="reference" @click="visible = true">
        切换站点
      </div>
      <!-- <a slot="reference" class="ant-dropdown-link" @click="visible = true">
      {{ siteName }} <i class="el-icon-arrow-down"></i>
    </a> -->
      <div
        class="content"
        style="min-width: 60vw; max-width: 80vw; min-height: 200px"
      >
        <div class="name">
          <i class="el-icon-location" style="margin-right: 10px"></i>
          <span style="">{{ siteName }}</span>
        </div>
        <div class="site-list">
          <span
            v-for="(item, index) in sitelist"
            :key="index"
            :class="{ 'primary-color': item.id == checkid }"
            @click="setSite(item)"
            >{{ item.label }}</span
          >
        </div>
        <div class="check-site">
          <span>您的选择是：</span>
          <span
            v-for="(item, index) in checkarr"
            :key="index"
            @click="updataSite(item)"
            >{{ index > 0 ? ">" : "" }}{{ item.label }}</span
          >
        </div>
        <div class="site-btn">
          <el-button size="small" @click="visible = false">取消</el-button>

          <el-button
            type="primary"
            size="small"
            @click="onSucessSite"
            :disabled="isSite"
            >确定</el-button
          >
        </div>
      </div>
    </el-popover>
    <div class="font-[500]">{{ siteName }}</div>
  </div>
</template>
<script>
import { getSiteTree } from "@/api/site";
import storage from "@/utils/storage";
export default {
  data() {
    return {
      sitelist: [],
      visible: false,
      offsetLeft: 0,
      checkarr: [], //选中站点
      checkid: undefined, //最终选中站点
      siteName: "请选择站点",
      isSite: true,
    };
  },
  computed: {},
  created() {
    this.getwaitedListdata();
  },
  mounted() {},
  methods: {
    // 确认站点
    onSucessSite() {
      if (this.checkarr.length == 0) return;
      let obj = this.checkarr[this.checkarr.length - 1];
      this.clickSite(obj);
    },
    // 选中
    setSite(obj) {
      this.checkid = undefined;
      // 为子节点不添加数据
      let data = this.checkarr[this.checkarr.length - 1];

      if (data && (data.isLeaf || data.children.length == 0)) {
        // 如果为子节点更新最后一个数据
        this.checkid = obj.id;
        this.checkarr[this.checkarr.length - 1] = obj;
        // 如果选中数据有子集更新站点列表
        if (obj.children && obj.children.length > 0) {
          this.sitelist = obj.children;
        }
      } else {
        this.checkarr.push(obj);
        if (obj.children && obj.children.length > 0) {
          this.sitelist = obj.children;
        }
      }

      if (obj && obj.type == "site") {
        this.isSite = false;
      } else {
        this.isSite = true;
      }
    },
    // 更新选中
    updataSite(row) {
      const { id } = row;
      this.checkid = undefined;
      let index = this.checkarr.findIndex((v) => v.id == id);

      if (index > -1) {
        this.checkarr.splice(index + 1, this.checkarr.length - (index + 1));
      }
      if (row.children && row.children.length > 0) {
        this.sitelist = row.children;
      }

      if (row && row.type == "site") {
        this.isSite = false;
      } else {
        this.isSite = true;
      }
      // this.getwaitedListdata(id);
    },
    getwaitedListdata() {
      getSiteTree().then((res) => {
        const { code, data } = res.data;
        if (code == 1) {
          const { siteTree } = data;
          this.sitelist = siteTree;
          let arr = [];
          const treeFn = function (e) {
            e.forEach((element) => {
              arr.push(element);
              if (element.children && element.children.length > 0) {
                treeFn(element.children);
              }
            });
          };
          const siteid = storage.get(2, "siteId");
          treeFn(siteTree);
          const siteObj = arr.find((v) => v.id == siteid);
          this.siteName = siteObj ? siteObj.label : "请选择站点";
        }
      });
    },
    clickSite(obj) {
      storage.set(2, "siteId", obj.id);
      this.show = false;
      if (location.href.search(/token/gi) >= 0) {
        setTimeout(() => {
          location.reload();
        });
      } else {
        location.reload();
      }
    },
    // ontrigger(e) {
    //   if (e.target && e.target.nodeName == "A") {
    //     this.show = !this.show;
    //   }
    // },
  },
};
</script>
<style lang="less" scoped>
.ant-dropdown-link {
  padding: 0 20px;
  font-size: 16px;
  min-width: 200px;
  display: inline-block;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .name {
    font-size: 20px;
    color: #1890ff;
  }
  .site-list {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    span {
      line-height: 1.5;
      padding: 10px 20px;
      cursor: pointer;
      &:hover {
        color: #1890ff;
      }
    }
  }
  .check-site,
  .site-btn {
    padding: 0 20px;
  }
  .check-site {
    cursor: pointer;
  }
}
.trigger {
  display: inline-block;
  position: relative;
}
.ant-dropdown-link {
  padding: 0 20px;
  font-size: 16px;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}
.change-btn {
  width: 78px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}
</style>
