<template>
  <!-- PC端 -->
  <div class="w-full bg-black h-[300px] py-5 hidden-sm-and-down">
    <div class="xl:w-screen-xl flex justify-between m-auto">
      <template v-for="(item,index) in subMenu">
        <div class="item">
          <div class="text-base text-gray-400 hover:text-gray-200 py-3 font-bold">{{ item.title }}</div>
          <div class="sub-menu flex flex-col">
            <template v-for="(sub,subIndex) in item.children">
              <nuxt-link :to="navTo(sub)" class="py-1 text-sm"><span class="text-gray-400 hover:text-gray-200">{{ sub.title }}</span></nuxt-link>
            </template>
          </div>
        </div>
      </template>
      <div class="flex flex-col text-base">
        <p class="text-base text-[#83adf6ff] font-bold">扫一扫关注公众号</p>
        <el-avatar :src="config.wxQrcode" shape="square" :size="120" />
      </div>
    </div>
  </div>
  <!-- 移动端 -->
  <el-collapse v-model="activeNames" accordion class="hidden-sm-and-up my-collapse">
    <template v-for="(item,index) in subMenu">
      <el-collapse-item :title="item.title" :name="index">
        <template v-if="item.children">
          <template v-for="sub in item.children">
            <nuxt-link :to="sub.path" class="block cursor-pointer text-gray-600 hover:text-gray-900 py-0.5">
              <span class="px-4">{{ sub.title }}</span>
            </nuxt-link>
          </template>
        </template>
      </el-collapse-item>
    </template>
  </el-collapse>
</template>
<script setup lang="ts">
import {useConfigInfo, useSubMenu} from "~/composables/configState";
const subMenu = useSubMenu();
const config = useConfigInfo();
const activeNames = ref(['1'])
</script>

<style lang="scss">
.my-collapse{
  .el-collapse-item__header{
    background-color: transparent !important;
  }
  .el-collapse-item__wrap{
    background-color: transparent !important;
  }
  .el-collapse-item{
    padding: 0 16px;
  }
}
</style>
