<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 { weekMenu } from '@/api/resturant/menu.ts'
import PullList from '@/component/List/PullList.vue'
import MenuCard from './modules/menuCard.vue'
const userStore = useUserStore()
const route = useRoute()

// {{ (new Date(props.item.menuStarttime)).getMonth() + 1 }}月 {{ props.item.menuName}}
const menuList:any = ref([])
onMounted(() => {
  if (route.query.title) {
  // 如果 route.query.title 可能是数组，需要处理成字符串
    const title = Array.isArray(route.query.title) ? route.query.title.join('') : route.query.title
    document.title = title as string
  }
  weekMenu({
    id: route.query.weekId,
    menuType: userStore.employessInfo.EAT_TYPE || '1'
  }).then(res => {
    console.log(res)
    let data = res.data
    if (!data) return
    menuList.value = data.detailList

  })


})
// 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)
// }


</script>

<template>
  <div class="container">
    <div v-for="(item,index) in menuList" :key="index" class="meal-container">
      <div class="flex-container meal-item meal-breakfast">
        <div class="label">早餐：</div>
        <div class="value">
          {{ item.specificList[0].menuBreakfast }}
        </div>
      </div>
      <div class="flex-container meal-item meal-lunch">
        <div class="label">午餐：</div>
        <div class="value">
          {{ item.specificList[0].menuLunch }}
        </div>
      </div>
      <div class="flex-container meal-item meal-dinner">
        <div class="label">晚餐：</div>
        <div class="value">
          {{ item.specificList[0].menuDinner }}
        </div>
      </div>
    </div>
    <!-- <PullList ref="pullListRef" v-model:query-string="queryParams" :request-method="onRequest">
      <template #default="{ item, index }">
        <MenuCard :item="item" class="menu-card-container" :displayIndex="index"/>
      </template>
    </PullList> -->
  </div>
</template>

<style lang="less" scoped>
.meal-container {
  padding: 0.9rem 0.8rem;
  background-color: #fff;
  overflow: hidden;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
  margin-top: 1.5rem;
  .meal-breakfast {
    position: relative;
    &::after{
      position: absolute;
      display: inline;
      content: '';
      width: 3.5rem;
      height:0.5rem;
      background-color: rgba(255, 105, 105, 0.4);
      bottom: 0.5rem;
    }
  }
  .meal-lunch {
    position: relative;
    &::after{
      position: absolute;
      display: inline;
      content: '';
      width: 3.5rem;
      height:0.5rem;
      background-color: rgba(71, 115, 252, 0.4);
      bottom: 0.5rem;
    }
  }
  .meal-dinner {
    position: relative;
    &::after{
      position: absolute;
      display: inline;
      content: '';
      width: 3.5rem;
      height:0.5rem;
      background-color: rgba(180, 255, 105, 0.4);
      bottom: 0.5rem;
    }
  }
}
.flex-container {
  display: flex;
  align-items: center;
}
</style>
