<template>
  <!--顶部导航栏-->
  <dinbu></dinbu>
 
 
 <!--下拉选项-->
   <van-dropdown-menu active-color="#ee0a24">
     <van-dropdown-item v-model="value1" :options="option1" />
     <van-dropdown-item v-model="value2" :options="option2" />
     <van-dropdown-item v-model="value3" :options="option3" />
     <van-dropdown-item v-model="value4" :options="option4" />
   </van-dropdown-menu>
 
  
    <van-card  v-for="(item, index) in items" @click="goToDetailPage"
      :key="index"
      :num="item.num"
      :price="item.price"
      :desc="item.desc"
      :title="item.title"
      :thumb="item.thumb"
    >
      <template #tags>
        <van-tag
          v-for="(tag, tagIndex) in item.tags"
          :key="tagIndex"
          plain
          type="primary"
        >
          {{ tag }}
        </van-tag>
      </template>
      <template #footer>
        <van-button
          v-for="(button, buttonIndex) in item.buttons"
          :key="buttonIndex"
          size="mini"
        >
          {{ button }}
        </van-button>
      </template>
    </van-card>
 

 
 <van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
   <template #prev-text>
     <van-icon name="arrow-left" />
   </template>
   <template #next-text>
     <van-icon name="arrow" />
   </template>
   <template #page="{ text }">{{ text }}</template>
 </van-pagination>
 <br><br>
   <tabBar></tabBar>
 </template>
 
 <script setup>
 import { ref, reactive } from "vue";
 import tabBar from "@/components/tabBar/index.vue";
 import dinbu from "@/components/dinbu/index.vue";
 import card1 from "@/components/card1.vue";
 import service from '@/components/service.vue'
 import s1Image from "@/assets/ser/service1.jpg";
import s2Image from "@/assets/ser/service2.jpg";
import s3Image from "@/assets/ser/service3.jpg";
import { useRouter } from 'vue-router';

const router = useRouter();

 
     const value1 = ref(0);
     const value2 = ref('a');
     const value3 = ref('a');
     const value4 = ref('a');
     const option1 = [
       { text: '综合排序', value: 0 },
       { text: 'xxxxxx', value: 1 },
       { text: 'xxxxxx', value: 2 },
     ];
     const option2 = [
       { text: '分类', value: 'a' },
       { text: 'xxxxxx', value: 'b' },
       { text: 'xxxxxx', value: 'c' },
     ];
     const option3 = [
       { text: '区县选择', value: 'a' },
       { text: 'xxxxxx', value: 'b' },
       { text: 'xxxxxx', value: 'c' },
     ];
     const option4 = [
       { text: '好评度', value: 'a' },
       { text: 'xxxxxx', value: 'b' },
       { text: 'xxxxxx', value: 'c' },
     ];
 
 
     const currentPage = ref(1);
     const items= [
        {
          num: "1",
          price: "3.00",
          desc: "早15午20晚上20",
          title: "上门送餐（早中晚）",
          thumb: s3Image,
          tags: ["标签3", "标签4"],
          buttons: ["订购", "收藏"],
        },
        {
          num: "2",
          price: "2.00",
          desc: "描述信息1",
          title: "商品标题1",
          thumb: s1Image,
          tags: ["标签1", "标签2"],
          buttons: ["按钮1", "按钮2"],
        },
        {
          num: "3",
          price: "3.00",
          desc: "描述信息2",
          title: "商品标题2",
          thumb: s2Image,
          tags: ["标签3", "标签4"],
          buttons: ["按钮3", "按钮4"],
        },
        // 可以添加更多的商品信息对象
      ]


      const goToDetailPage = () => {
  // 导航到详情页面，并携带参数 机构ID
  router.push({ path: '/serviceDetail', query: { id: 123} });
};
 </script>
 
 <style scoped>
   .goods-card {
     margin: 0;
     background-color: white;
   }
 
   .delete-button {
     height: 100%;
   }
 </style>