<template>
  <div :class="['layerBox', { 'fixed': isFixed }]">
    <tableTitle :name="headerTitle"/>
    <div class="menuTopBox">
      <div class="menuItem itemMenuBg1" @click="addModule(1)">
        登录菜单(12x1)
      </div>
      <div class="menuItem itemMenuBg2" @click="addModule(2)">
        Logo栏(12x2)
      </div>
      <div class="menuItem itemMenuBg3" @click="addModule(3)">
        导航菜单(12x2)
      </div>
      <div class="menuItem itemMenuBg4" @click="addModule(4)">
        轮播图(8x5)
      </div>
      <!-- <div class="menuItem itemMenuBg5" @click="addModule(5)">
        多分类列表
      </div> -->
      <div class="menuItem itemMenuBg6" @click="addModule(6)">
        多图列表(12x0)
      </div>
      <div class="menuItem itemMenuBg7" @click="addModule(7)">
        纯文本列表(4x5)
      </div>
      <div class="menuItem itemMenuBg8" @click="addModule(8)">
        图文列表(8x10)
      </div>
      <!-- <div class="menuItem itemMenuBg9" @click="addModule(9)">
        排行榜列表
      </div> -->
      <div class="menuItem itemMenuBg10" @click="addModule(10)">
        友情链接(12x3)
      </div>
      <div class="menuItem itemMenuBg11" @click="addModule(11)">
        纯文本(12x1)
      </div>
    </div>
  </div>
</template>

<script>
import tableTitle from './tableTitle.vue';

export default {
  props: {
    
  },
  components: {
    tableTitle
  },
  data() {
    return {
      headerTitle: '可选模块',
      isFixed: false // 控制菜单是否悬浮
    };
  },
  methods: {
    addModule(id) {
      this.$emit('add-module', id); // 触发事件，将模块 ID 传递给父组件
    },
    handleScroll() {
      const scrollY = window.scrollY;
      // 设置一个阈值，避免频繁切换
      if (scrollY > 100 && !this.isFixed) {
        this.isFixed = true; // 只有在超过 100 像素时才设置为悬浮状态
      } else if (scrollY <= 0 && this.isFixed) {
        this.isFixed = false; // 只有在回到 100 像素以下时才取消悬浮状态
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll); // 监听滚动事件
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll); // 清理事件监听
  }
};
</script>

<style scoped lang="less">
.menuTopBox {
  display: flex;
  flex-wrap: wrap;
  transition: top 0.3s; /* 添加过渡效果 */
}

.menuItem {
  display: flex;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px 10px 10px 40px;
}

.fixed {
  position: fixed; /* 固定在顶部 */
  top: 0; /* 吸附到顶部 */
  //width: 100%; /* 确保宽度为 100% */
  background-color: white; /* 设置背景颜色以覆盖下面的内容 */
  z-index: 1000; /* 确保在其他内容之上 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影以增强视觉效果 */
}

/* 背景图样式 */
.itemMenuBg1 {
  background: url('../../../../assets/creatWebsite/menu/default/top_menu.png') no-repeat 10px #f0f2f5;
}
.itemMenuBg2 {
  background: url('../../../../assets/creatWebsite/menu/default/logo.png') no-repeat 10px #f0f2f5;
}
.itemMenuBg3 {
  background: url('../../../../assets/creatWebsite/menu/default/nav_menu.png') no-repeat 10px #f0f2f5;
}
.itemMenuBg4 {
  background: url('../../../../assets/creatWebsite/menu/default/banner.png') no-repeat 10px #f0f2f5;
}
.itemMenuBg5 {
  background: url('../../../../assets/creatWebsite/menu/default/class_list.png') no-repeat 10px #f0f2f5;
}
.itemMenuBg6 {
  background: url('../../../../assets/creatWebsite/menu/default/img_list.png') no-repeat 10px #f0f2f5;
}
.itemMenuBg7 {
  background: url('../../../../assets/creatWebsite/menu/default/text_list.png') no-repeat 10px #f0f2f5;
}
.itemMenuBg8 {
  background: url('../../../../assets/creatWebsite/menu/default/img_text_list.png') no-repeat 10px #f0f2f5;
}
.itemMenuBg9 {
  background: url('../../../../assets/creatWebsite/menu/default/level.png') no-repeat 10px #f0f2f5;
}
.itemMenuBg10 {
  background: url('../../../../assets/creatWebsite/menu/default/link.png') no-repeat 10px #f0f2f5;
}
.itemMenuBg11 {
  background: url('../../../../assets/creatWebsite/menu/default/text.png') no-repeat 10px #f0f2f5;
}
</style>
