<template>
  <!--顶部导航栏-->
  <dinbu></dinbu>

  <!--轮播图-->
  <carouselChart></carouselChart>


   <!-- 中部菜单 -->
   <van-grid :column-num="4">
    <van-grid-item v-for="(item, index) in menuItems" @click="goToPage(index)" :key="index" :icon="item.icon" :text="item.text" />
  </van-grid>

  <!--推荐机构展示-->
  <recommend></recommend>
   
  <!--热门服务-->
  <service></service>



  <tabBar></tabBar>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from 'vue-router';
import tabBar from "@/components/tabBar/index.vue";
import http from "@/api/request";
import dinbu from "@/components/dinbu/index.vue";
import carouselChart from "@/components/carouselChart.vue";
import recommend from "@/components/recommend.vue";
import service from '@/components/service.vue'
import s1Image from "@/assets/fuwu/s1.png"
import s2Image from "@/assets/fuwu/s2.png"
import s3Image from "@/assets/fuwu/s3.png"
import s4Image from "@/assets/fuwu/s4.png"


const keywords = ref("");
// const gridArr=ref([])
const recommendArr = ref();
const router = useRouter();

onMounted(async () => {
  let result = await http
    .post("/login", { username: "admin", password: "123456" })
    .catch((err) => {
      console.log(err);
    });

  recommendArr.value = result.data;
});
// gridArr.value=result.data.category_nav


const menuItems = [
  { icon: s4Image ,text: '找机构',url: '/institution'},
  { icon: s3Image, text: '找服务',url: '/found' },
  { icon: s2Image, text: '标题3',url: '/publish' },
  { icon: s1Image , text: '标题4',url: '/found' },
];
const goToPage = (index,id) => {
  // 导航到详情页面，并携带参数 机构ID
  const url = menuItems[index].url;
  console.log(url)
  router.push({ path: url, query: { id : 123 } });
};

</script>

<style scoped></style>
