import { onMounted, onActivated, nextTick } from "vue";
import { useStore } from "vuex";

//设置
let config = {
  elName: "mainContent", //#元素名称
  log: false, //是否显示log
};

const backSnaps = []; //返回快照数组
let lashHistoryLength = 0; //上次History的长度
let lastHistoryPos = -1; //上次History的位置

const tsArr = [];

export const test = () => {
  tsArr.push("tsArr");
  console.log(tsArr);
};

export function cfg(cfg){
  config = {...config, ...cfg}
}

export function useBackSnaps() {
  
  onActivated(() => {
    if (config.log)
      console.log("useBackSnaps: onActivated事件", backSnaps);
    restore();
  });
  onMounted(() => {
    if (config.log)
      console.log("useBackSnaps: onMounted", backSnaps);
    restore();
  });

  return {};
}

export const saveBackSnaps = () => {
  // console.log("路由afterEach: 当前页面 ", window.location);
  // console.log("路由afterEach: ", window.history);
  // console.log("路由afterEach: ", from.fullPath, " to ", to.fullPath);

  // 判断动作是？
  const moveOn =
    lashHistoryLength == 0 ||
    lastHistoryPos == -1 ||
    window.history.length != lashHistoryLength ||
    window.history.state.position - lastHistoryPos > 0;
  
  //查找元素...
  const $content = document.querySelector(`#${config.elName}`);
  // if ($content)
  //   console.log("路由afterEach: ", $content, $content.scrollTop);
  const idx = window.history.state.position + (moveOn ? -1 : 1);
  if(window.history.length != lashHistoryLength){ //新路由，更新backSnaps数组长度
    backSnaps.splice(idx + 1, backSnaps.length - idx)
  }
  //保存原来的
  lashHistoryLength = window.history.length;
  lastHistoryPos = window.history.state.position;
  //保存
  if (idx > -1) {
    const backSnap = {
      _idx: idx,
      scrollTop: $content ? $content.scrollTop : 0,
    };
    if (config.log)
      console.log("useBackSnaps: 保存之前",backSnap, backSnaps)
    if (backSnaps.length < idx + 1) backSnaps.length = idx + 1;
    backSnaps[idx] = backSnaps[idx] ? {...backSnaps[idx], ...backSnap} : backSnap
    // backSnaps[idx] = backSnap;
    if (config.log)
      console.log("useBackSnaps: 保存上个页面", backSnaps);
  }
};

export const saveSnap = (snap)=>{
  const idx = window.history.state.position;
  //保存
  if (idx > -1) {
    // const backSnap = {
    //   idx,
    //   url: window.location.href,
    // };
    // // console.log("路由afterEach: ", backSnap);
    if (config.log)
      console.log("useBackSnaps: 保存当前页面",snap, backSnaps);
    if (backSnaps.length < idx + 1) backSnaps.length = idx + 1;
    backSnaps[idx] = backSnaps[idx] ? {...backSnaps[idx], ...snap} : {...snap}
    // backSnaps[idx] = backSnap;
    if (config.log)
      console.log("useBackSnaps: 保存当前页面", backSnaps);
  }
}

export const getScrollTop = () => {
  return backSnaps[window.history.state.position]
    ? backSnaps[window.history.state.position].scrollTop
    : 0;
};

export const getSnap=()=>{
  return backSnaps[window.history.state.position]
    ? backSnaps[window.history.state.position]
    : null;
}

// 恢复scrollTop设置
const restore = () => {
  if (config.log)
    console.log(
      `useBackSnaps: 查找上次"#${config.elName}"保存的设置...`
    );
  if (backSnaps[window.history.state.position]) {
    nextTick(() => {
      document.getElementById(config.elName).scrollTop =
        backSnaps[window.history.state.position].scrollTop;
    });
    if (config.log)
      console.log(
        `useBackSnaps: 恢复${config.elName}的scrollTop为${
          backSnaps[window.history.state.position].scrollTop
        }`
      );
  }
};
