// https://cn.vuejs.org/guide/quick-start.html#using-vue-from-cdn
// export default {
//   data() {
//     return {
//       count: 0,
//       count2: 0,
//     };
//   },
// template: `<div>count is {{ count }}</div>`;
// };

// https://codepen.io/snowman12320/details/zYmXLJR
const App = {
  data() {
    return {
      count: 0, //判斷vue
      nav: null, // 先將nav設置為null
      atTop: true, //導覽列是否在頂端，超過則相反
      xshow: false, //x開關
      prevScrollpos: window.scrollY, // 取得當前頁面滾動位置
      // isOpen: false, // 彈窗
      // isNavOpen: false, // 導覽下拉
      //
      // activeTab: null, //取得當前路徑
      activeTab: window.location.pathname, //取得當前路徑
      activeTab_index: false, //回傳判斷並轉向
      activeTab_contact: false, //回傳判斷並轉向
    };
  },
  beforeCreate() {},
  created() {
    // 啟用此函式 函式中才判斷是否開啟樣式
    this.setActiveTab(this.activeTab); // 使用setActiveTab方法更新activeTab_most
    //
  },
  beforeMount() {},
  mounted() {
    this.nav = this.$refs.nav.offsetHeight; // 獲取nav元素並存儲在data中 / Vue的data中不能直接使用this.$refs.nav，因為Vue實例還沒有渲染完成
    window.addEventListener('scroll', this.handleScroll); // 監聽滾動事件
    // window.addEventListener("popstate", this.handlePopstate); // 監聽路由變化事件
    //
    // this.includeHTML();
  },
  updated() {
    // this.nav = this.$refs.nav.offsetHeight; // 獲取nav元素並存儲在data中 / Vue的data中不能直接使用this.$refs.nav，因為Vue實例還沒有渲染完成
  },
  computed: {
    //computed必须是一个返回值的函数
    // activeTab() {
    //   return window.location.pathname;
    // },
    // atTop() {
    //   return window.scrollY > this.nav.offsetHeight ? false : true;
    // },
  },
  watch: {
    //watch会在初始化组件时触发
    // activeTab(newVal, oldVal) {
    //   this.activeTab_index = this.setActiveTab(newVal);
    // },
  },
  methods: {
    handleScroll() {
      this.atTop = window.scrollY > this.nav ? false : true; // 使用this.nav進行操作
      //
      var currentScrollPos = window.scrollY; // 取得新的頁面滾動位置
      if (this.prevScrollpos > currentScrollPos) {
        // 如果向上滾動
        // this.nav.style.transition = 'all 1000ms'; // 添加過渡效果
        // this.nav.style.transform = 'translateY(0)'; // 展開導覽列
      } else {
        // 如果向下滾動
        if (currentScrollPos > 200) {
          // 如果已經滾動超過200px
          // this.nav.style.transition = 'all 1000ms'; // 添加過渡效果
          // this.nav.style.transform = 'translateY(-200px)'; // 展開導覽列
        }
      }
      this.prevScrollpos = currentScrollPos; // 更新滾動位置
    },
    handlePopstate() {
      //無效
      //   this.activeTab_most = this.setActiveTab(this.activeTab); // 使用setActiveTab方法更新activeTab_most
    },
    setActiveTab(activeTab) {
      //同個tab  多個連結  / 回傳給 不同變數接即可 例如: 某分頁A和某分頁B變數
      switch (activeTab) {
        case '/contact.html':
          this.activeTab_contact = true;
          break;
        case '/index_vue.html':
          this.activeTab_index = true;
          break;
        case '/qa.html':
          this.activeTab_qa = true;
          break;
        case '/news.html':
          this.activeTab_news = true;
          break;
        default:
          break;
      }
    },
    confirm(message) {
      alert(message);
    },
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll); // 在組件銷毀前移除滾動事件監聽
    window.removeEventListener('popstate', this.handlePopstate); // 在組件銷毀前移除事件監聽 /用於監聽路由變化事件，當路由發生變化時，會觸發handlePopstate方法，更新activeTab的值。
  },
};
Vue.createApp(App).mount('#app');