<template>
  <div class="page-container">
    <Header :title="currentTitle"></Header>
    <van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功">
      <div class="content">
        <van-notice-bar class="notice" scrollable text="下滑刷新页面" color="black" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>信安智能</van-swipe-item>
        </van-swipe>
        <div class="item-content">
          <van-cell-group inset>
            <!-- 全部改为动态渲染的菜单项 -->
            <template v-for="(item, index) in filteredMenuItems" :key="index">
              <van-cell size="large" class="custom-cell" :title="item.title" :icon="item.icon" is-link
                :value="item.value" @click="item.action" />
            </template>
          </van-cell-group>
        </div>
      </div>
    </van-pull-refresh>
    <Footer></Footer>
  </div>
</template>

<script>
import { ref, onMounted, computed, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import Header from "../../components/Header.vue";
import Footer from "../../components/Footer.vue";

export default {
  components: { Header, Footer },
  setup() {
    const currentTitle = ref('系统设置');
    const loading = ref(false);
    const router = useRouter();

    // 所有菜单项配置（8个，对应8位二进制）
    const allMenuItems = ref([
      { title: "显示设置", icon: "photo-o", value: "显示", action: () => navigateTo('web/screen_main.html') },
      { title: "声卡设置", icon: "volume-o", value: "语音", action: () => goto('voiceset') },
      { title: "车牌识别", icon: "search", value: "识别", action: () => goto('recognition') },
      { title: "预警设置", icon: "warning-o", value: "预警", action: () => goto('warning') },
      { title: "远程喊话", icon: "bullhorn-o", value: "喊话", action: () => navigateTo('web/voice_copy.html') },
      { title: "网关设置", icon: "desktop-o", value: "控制", action: () => goto('GatewaySetting') },
      { title: "路锥控制", icon: "warning-o", value: "控制", action: () => goto('ConeControl') },
      { title: "翻转屏遥控", icon: "warning-o", value: "控制", action: () => goto('flipScreen') }
    ]);

    // 从父页面接收的权限控制字符串（8位二进制）
    const permissionString = ref('00000000'); // 默认全部隐藏 

    // 计算属性：过滤出需要显示的菜单项 
    const filteredMenuItems = computed(() => {
      return allMenuItems.value.filter((_, index) => {
        return permissionString.value[index] === '1';
      });
    });

    // 更新菜单显示状态的函数 
    const updateMenuVisibility = (binaryStr) => {
      allMenuItems.value.forEach((item, index) => {
        item.isVisible = binaryStr[index] === '1';
      });
    };

    // 监听父页面的消息 
    onMounted(() => {
      const messageHandler = (event) => {
              console.log(' 收到父页面消息:', event);
        console.log(' 收到父页面消息:', event.data);

        // 更简洁的写法（当确定格式为XXXXXXXX/XXX时）
        if (typeof event.data === 'string') {
          permissionString.value = event.data.substring(0, 8);
          if (/^[01]{8}$/.test(permissionString.value)) {
            updateMenuVisibility(permissionString.value);
          }
        } else {
          console.error(' 无效的权限字符串:', event.data);
        }
      };

      window.addEventListener('message', messageHandler);

      // 在组件卸载时移除事件监听器
      onBeforeUnmount(() => {
        window.removeEventListener('message', messageHandler);
        console.log('移除事件监听器');
      });
    });

    // 跳转方法 
    const navigateTo = (path) => {
      window.location.href = path;
    };

    const goto = (name) => {
      router.push({ name });
    };

    const onRefresh = () => {
      setTimeout(() => {
        loading.value = false;
      }, 1000);
    };

    return {
      currentTitle,
      loading,
      filteredMenuItems,
      onRefresh,
      navigateTo,
      goto,
      updateMenuVisibility
    };
  }
};
</script>

<style scoped>
/* 原有样式保持不变 */
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  border-radius: 20px !important;
  margin-top: 80px;
  margin-bottom: 40px;
  min-height: 100vh;
}

.item-content {
  margin-top: 20px;
}

van-pull-refresh {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  border-radius: 10px;
  margin-bottom: 10px;
}

.notice {
  margin-bottom: 10px;
  background-color: #fff;
}

/* Custom styles for van-cell */
.custom-cell .van-cell__title,
.custom-cell .van-cell__label,
.custom-cell .van-cell__value,
.custom-cell .van-icon {
  font-size: 20px;
}

.custom-cell .van-cell__title {
  font-weight: bold;
}

.custom-cell .van-cell__value {
  color: #666;
}
</style>