<template>
  <div class="mobile-container">
    <div v-for="(module, moduleIndex) in modules"
      :key="moduleIndex"
      class="function-module">
      <p class="function-module-title">{{ module.title }}</p>
      <div class="function-icons">
        <div v-for="(icon, iconIndex) in module.icons"
          :key="iconIndex"
          class="function-icon"
          @click="handleIconClick(icon)">
          <div class="function-icon-wrap"
            :style="{ backgroundColor: icon.iconColor }">
            <svg-icon :icon-class="icon.iconName" />
          </div>
          <p>{{ icon.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import usePermissionStore from '@/store/modules/permission';

const router = useRouter();
const permissionStore = usePermissionStore();
const modules = ref([]); // 替换原有的静态modules
// const modules = [
//   {
//     title: 'CP 活动',
//     icons: [
//       { name: '促销计划', iconName: 'shop-o', iconColor: '#5aaeec', to: '/m/promotion_plan' }
//     ]
//   },
//   {
//     title: '稽核活动',
//     icons: [
//       { name: '售点稽查', iconName: 'manager-o', iconColor: '#feb73b', to: '/m/promotion_plan' }
//     ]
//   }
// ]
// 观察路由挂载后事件
// 格式化路由为菜单所需结构
const formatRoutesToModules = (routes) => {
  // 根据实际路由结构转换，这里假设需要提取一级路由作为模块
  modules.value = routes.map(o => {
    return {
      title: o.meta.title,
      icons: o.children?.map(child => ({
        name: child.meta.title,
        iconName: child.meta.icon || 'default',
        iconColor: child.meta.color || '#5aaeec',
        to: o.path + '/' + child.path
      })) || []
    }
  })
  // .map(route => ({
  //   title: route.meta.title,
  //   icons: route.children?.map(child => ({
  //     name: child.meta.title,
  //     iconName: child.meta.icon || 'default',
  //     iconColor: child.meta.color || '#5aaeec',
  //     to: child.path
  //   })) || []
  // }))
}
// 监听路由变化
watch(
  () => permissionStore.sidebarRouters,
  (newRoutes) => {
    if (newRoutes.length > 0) {
      // 路由加载完成后转换格式
      // 把 hidden: true 的筛选掉
      const filterRoutes = newRoutes.filter(route => !route?.hidden);
      formatRoutesToModules(filterRoutes);
    }
  },
  { immediate: true, deep: true }
);

const handleIconClick = (icon) => {
  router.push(icon.to)
};
</script>

<style scoped
  lang="scss">
  .mobile-container {
    background-color: #f3f3f3;
    min-height: 100vh;
    font-size: 13px;
    // font-size: 12px;
    padding: 20px;

    p {
      margin: 0;
    }

    .function-module {
      background-color: #fff;
      /* 设置白色背景 */
      border-radius: 8px;
      /* 设置圆角 */
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      /* 添加阴影 */
      padding: 16px 5px;
      /* 添加内边距 */
      margin-bottom: 16px;
      /* 设置模块间的间距 */

      .function-module-title {
        font-size: 14px;
        /* 设置标题字体大小 */
        font-weight: bold;
        /* 设置标题字体加粗 */
        margin-bottom: 16px;
        /* 设置标题与内容的间距 */
        padding: 0 5px;
      }

      .function-icons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 创建4列等宽布局 */
        gap: 2px;
        /* 列之间的间距 */
        justify-content: space-between;
        /* 两边对齐 */

        /* 设置图标间的间距 */
        .function-icon {
          text-align: center;

          .function-icon-wrap {
            width: 40px;
            height: 40px;
            margin: 0 auto 10px;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

            .svg-icon {
              color: white;
              font-size: 16px;
            }
          }
        }
      }


    }
  }
</style>