<template>
  <el-popover placement="bottom-start" trigger="manual" v-model="visible">
    <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: 50vw; min-height: 200px">
      <div class="flex_row flex_align_c primary-color 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
          type="primary"
          size="small"
          style="margin-right: 10px"
          @click="onSucessSite"
          :disabled="isSite"
          >确定</el-button
        >
        <el-button size="small" @click="visible = false">取消</el-button>
      </div>
    </div>
  </el-popover>
  <!-- <div :trigger="['click']" class="trigger" @click="ontrigger">
    <slot>
      <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
        {{ siteName }} <i class="el-icon-arrow-down"></i>
      </a>
    </slot>
    <div slot="overlay" class="select-site" v-if="show">
      <div class="flex_row flex_align_c primary-color name">
        <i class="el-icon-location"></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
          type="primary"
          size="small"
          style="margin-right: 10px"
          @click="onSucessSite"
          :disabled="isSite"
          >确定</el-button
        >
        <el-button size="small" @click="show = false">取消</el-button>
      </div>
    </div>
  </div> -->
</template>
<script>
import { getSiteTree } from "@/api/siteInfo";
import local from "@/utils/local";
// import Cookie from "js-cookie";
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;
      } 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);
      this.checkarr.length = index + 1;
      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 = local.getLocal("sampleSiteId");
            treeFn(siteTree);
            const siteObj = arr.find((v) => v.id == siteid);
            this.siteName = siteObj ? siteObj.label : "请选择站点";
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clickSite(obj) {
      // Cookie.set("siteid", obj.id);
      // let siteInfo = {
      //   siteName: obj.label,
      //   siteid: obj.id,
      // };
      local.setLocal("sampleSiteId", 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: 14px;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}
.select-site {
  position: fixed;
  left: 300px !important;
  top: 65px;
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  min-width: 60%;
  max-width: 80%;
  z-index: 9;
  color: rgba(0, 0, 0, 0.8);
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  .name {
    font-size: 20px;
  }
  .site-list {
    // padding: 10px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    span {
      float: left;
      line-height: 1.5;
      padding: 10px 20px;
      cursor: pointer;
      &:hover {
        color: #1890ff;
      }
    }
  }
  .check-site,
  .site-btn {
    padding: 0 20px;
  }
}
</style>
