<template>
  <div class="mibiShop container-height">
    <Breadcrumb />
    <div class="list">
      <div class="list_item bg_color_fff border_radius_16 box_shadow_card"
      v-for="item in 10" :key="item"
      >
        <img src="" alt="" style="width: 291.2px; height: 291.2px;" class="bg_color_f5">
        <div class="item_info padding16">
          <div class="line2 font_size18 bold line_height24">
            {{item==1?'小红xhs书虚拟电商赚钱项目开店选品定价上架自动发货在...':'小红xhs书虚拟'}}
          </div>
          <div class="flex-center-between">
            <div class="bold color_price font_size20">900米币</div>
            <div class="border_radius_4 lijiduihuan  color_fff gradient font_size14 flex-center mt10">
              立即兑换
            </div>
          </div>
        </div>
      </div>
    </div>
     <Pagination 
        :total="listTotal"
        :page-size="searchFom.pageSize"
        :current-page="searchFom.pageNum"
        @page-change="handlePageChange"
      />
  </div>
</template>
<script setup>
import Pagination from '@/components/Pagination.vue'
import { ref, onMounted,reactive } from 'vue'
import { useRoute } from 'vue-router'
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore()
const route = useRoute()
const query = route.query;
const learnNoteId = ref(query.learnNoteId || '');


// 添加分页相关数据
const list = ref([]);
const listTotal = ref(0);
const searchFom = reactive({
  pageNum: 1,
  pageSize: 10,
})
onMounted(() => {
  // getList();
});

const handlePageChange = (page) => {
  searchFom.pageNum = page
  // 这里可以添加获取数据的逻辑
  console.log('当前页:', page);
  getList();
}
// 查询寻找工作流列表
const getList = async (type) => {
  if(type === 'init'){
    searchFom.pageNum = 1
  }
  // const res = await getQuestList(searchFom)
  // if(res.code === 200){
  //   listTotal.value = res.total
  //   list.value = res.rows
  // }
};

</script>
<style lang="scss">
.mibiShop{
  .list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(291.2px, 1fr));
    gap: 16px;
    .list_item{
      width: 291.2px;
      .item_info{
        height: 124px;
        .line2{
          height: 52px;
        }
        .lijiduihuan{
          height: 32px;
          padding: 0 16px;
        }
      }
    }
  }
}
</style>
