<template>
  <!-- PC端 -->
  <div
       class="w-full bg-gray-500 h-[300px] py-5 hidden-sm-and-down">
    <div class="xl:w-screen-xl flex justify-between m-auto">
      <div class="flex flex-col pt-10">
        <img :src="config.siteBottomLogo" style="width: 315px;"/>
        <div class="flex">
          <template v-for="(item,index) in subMenu">
            <el-space class="item">
              <nuxt-link :to="navTo(item)" class="text-base text-white hover:text-gray-200 py-3 link:text-white visited:text-white">{{ item.title }}</nuxt-link>
              <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-white hover:text-gray-200">{{ sub.title }}</span></nuxt-link>
                </template>
              </div>
            </el-space>
          </template>
        </div>
      </div>
      <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>
    <!-- 版权信息 -->
    <Copyright />
  </div>
  <!-- 移动端 -->
  <div class="hidden-sm-and-up">
    <Copyright />
  </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" @click="onSubMenu(item)">-->
  <!--        <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";
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
import {navigateTo} from "#imports";
import Copyright from "~/components/AppFooter/Copyright/Copyright.vue";

const subMenu = useSubMenu();
const config = useConfigInfo();
const activeNames = ref(['1'])

const onSubMenu = (item: CmsNavigation) => {
  if (item.children?.length === 0) {
    return navigateTo({path: item.path})
  }
}
</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>
