<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 }">
            <van-icon :name="icon.iconName" />
          </div>
          <p>{{ icon.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const router = useRouter();
const modules = [
  {
    title: 'CP 活动',
    icons: [
      { name: '促销计划', iconName: 'shop-o', iconColor: '#5aaeec', to: '/m/promotion_plan'  },
      { name: '促销稽核', iconName: 'manager-o', iconColor: '#feb73b', to: '/m/promotion_plan' },
    ]
  }
]

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

<style scoped
  lang="scss">
  .mobile-container {
    background-color: #f3f3f3;
    min-height: 100%;
    font-size: 14px;
    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;
      /* 添加内边距 */
      margin-bottom: 16px;
      /* 设置模块间的间距 */

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

      .function-icons {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;

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

          .function-icon-wrap {
            width: 60px;
            height: 60px;
            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);

            .van-icon {
              color: white;
              font-size: 35px;
            }
          }
        }
      }


    }
  }
</style>