<script setup lang="ts" name="SectionList">
import { ref, onMounted, reactive, watchEffect, nextTick } from 'vue'
import useUserStore from '@/store/modules/user'
import { useRouter, useRoute } from 'vue-router'
import { tAmMenuReleaseMobileList } from '@/api/resturant/menu.ts'
import PullList from '../../components/List/PullList.vue'
import MenuCard from './modules/menuCard.vue'
const router = useRouter()
const userStore = useUserStore()


const pullListRef = ref<InstanceType<typeof PullList>>()

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  // menuType: userStore.userInfo.postLevel && Number(userStore.userInfo.postLevel) > 1 ? '2' : '1'
  menuType: userStore.employessInfo.EAT_TYPE || '1'
})


// 请求方法，传入PullList组件，需返回{rows: [], total: number}
function onRequest(query?: any, isRefresh?: boolean): Promise<{rows: any[], total: number}> {
  return tAmMenuReleaseMobileList(query)
}

/**
 * 跳转一周餐谱页面
 * @param item
 */
function pageWeekMenu(item:any) {
  router.push({
    path: '/resturant/weekMenu',
    query: {
      weekId: item.id,
      title: item.menuName
    }
  })
}
const openIndex = ref(0)
function changeOpenIndex(index:number) {
  openIndex.value = index
}
</script>

<template>
  <div class="container">
    <PullList ref="pullListRef" v-model:query-string="queryParams" :request-method="onRequest">
      <template #default="{ item, index }">
        <MenuCard
          :item="item"
          class="menu-card-container"
          :openIndex="openIndex"
          :displayIndex="index"
          @change-open-index="changeOpenIndex"
          @page-week-menu="pageWeekMenu"/>
      </template>
    </PullList>
  </div>
</template>

<style lang="less" scoped>
.menu-card-container{
  margin-top: 1.6rem;
  &:first-child {
    margin-top: 0;
  }
}
</style>
