export default {
  data() {
    return {
      touch: {
        mouseDown: false,
        dragging: false,
        activeSplitter: null,
      },
      dom: {
        virtualSideNode: null,
        splitDragNode: null,
        sidebarNode: null,
        sideLogoNode: null,
        headerNode: null,
        pageBottomOpNode: null,
      },
    };
  },
  watch: {
    $route: {
      handler() {
        this.$nextTick(() => {
          this.dom.pageBottomOpNode = document.querySelector(
            ".app > .app-wrapper .page-bottom-op"
          );
          if (this.dom.pageBottomOpNode) {
            this.dom.pageBottomOpNode.style.left = `calc(${this.sideMenuWidth})`;
          }
        });
      },
      immediate: true,
    },
  },
  mounted() {
    this.dom.virtualSideNode = document.querySelector(".app > .virtual-side");
    this.dom.splitDragNode = document.querySelector(".app > .app-split-drag");
    this.dom.sidebarNode = document.querySelector(".app > .side-menu");
    this.dom.sideLogoNode = document.querySelector(
      ".app > .side-menu .logo .header-logo"
    );
    this.dom.headerNode = document.querySelector(
      ".app > .app-wrapper > .app-header"
    );
  },
  methods: {
    // 绑定事件
    bindEvents() {
      document.addEventListener("mousemove", this.onMouseMove, {
        passive: false,
      });
      document.addEventListener("mouseup", this.onMouseUp);
      // 被动：false 以防止在触摸拖动时滚动。
      if ("ontouchstart" in window) {
        document.addEventListener("touchmove", this.onMouseMove, {
          passive: false,
        });
        document.addEventListener("touchend", this.onMouseUp);
      }
    },
    // 卸载事件
    unbindEvents() {
      document.removeEventListener("mousemove", this.onMouseMove, {
        passive: false,
      });
      document.removeEventListener("mouseup", this.onMouseUp);

      if ("ontouchstart" in window) {
        document.removeEventListener("touchmove", this.onMouseMove, {
          passive: false,
        });
        document.removeEventListener("touchend", this.onMouseUp);
      }
      this.touch.mouseDown = false;
    },
    // 鼠标按下
    onMouseDown(event, splitterIndex) {
      this.bindEvents();
      this.touch.mouseDown = true;
      this.touch.activeSplitter = splitterIndex;
    },
    // 拖动
    onMouseMove(event) {
      if (this.touch.mouseDown) {
        event.preventDefault();
        this.touch.dragging = true;
        setTimeout(() => {
          this.collapsed = event.pageX <= 3;
          const sideMenuWidth = `${event.pageX}px`;
          this.setSideMenuWidth(sideMenuWidth);
          this.setLogoOpacity(sideMenuWidth);
        }, 0);
      }
    },
    // 放开鼠标
    onMouseUp(event) {
      this.touch.mouseDown = false;
      this.sideMenuWidth = `${event.pageX}px`;
      localStorage.setItem("APP_SIDE_MENU_WIDTH", this.sideMenuWidth);
      // 保持拖动标志直到点击事件完成（点击鼠标后立即发生）
      // 为了防止在拖动拆分器时发出 `splitter-click` 事件。
      setTimeout(() => {
        this.touch.dragging = false;
        this.unbindEvents();
      }, 100);
    },
    setSideMenuWidth(sideMenuWidth) {
      if (this.dom.virtualSideNode) {
        this.dom.virtualSideNode.style.width = sideMenuWidth;
        this.dom.virtualSideNode.style.minWidth = sideMenuWidth;
        this.dom.virtualSideNode.style.maxWidth = sideMenuWidth;
      }
      if (this.dom.splitDragNode) {
        this.dom.splitDragNode.style.left = sideMenuWidth;
      }
      if (this.dom.sidebarNode) {
        this.dom.sidebarNode.style.width = sideMenuWidth;
        this.dom.sidebarNode.style.minWidth = sideMenuWidth;
        this.dom.sidebarNode.style.maxWidth = sideMenuWidth;
      }
      if (
        this.dom.headerNode &&
        this.fixedHeader &&
        this.layout !== "head" &&
        !this.isMobile &&
        !this.collapsed
      ) {
        this.dom.headerNode.style.width = `calc(100% - ${sideMenuWidth})`;
      }
      if (this.dom.pageBottomOpNode) {
        this.dom.pageBottomOpNode.style.left = `calc(${sideMenuWidth})`;
      }
    },
    // 设置logo显示隐藏
    setLogoOpacity(width) {
      if (this.dom.sideLogoNode) {
        this.dom.sideLogoNode.style.opacity =
          parseFloat(width, 10) < 180 ? "0" : "1";
      }
    },
  },
};
