<script setup lang="ts" name="SectionList">
import { ref, onMounted, reactive, watchEffect, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import useUserStore from '@/store/modules/user'
import { useDict } from '@/common/utils/dict'
import PullList from '../../components/List/PullList.vue'
import employeeMealCard from './modules/employeeMealCard.vue'
import { tAmEmployeeReportList, isReport } from '@/api/resturant/employeeMeal.ts'
// import { showToast } from 'vant'
// import { formatDate } from '../../component/calendar/generateDates'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

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

const queryParams: any = ref({
  pageNum: 1,
  pageSize: 10,
  companyId: userInfo.value.companyId
})


// 请求方法，传入PullList组件，需返回{rows: [], total: number}
function onRequest(query?: any, isRefresh?: boolean): Promise<{rows: any[], total: number}> {
  return tAmEmployeeReportList(query)
}
const formatDate = (date, fmt): string => {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  const o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }
  for (const k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      const str = o[k] + ''
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
    }
  }
  return fmt
}
const padLeftZero = (str) => {
  return ('00' + str).substr(str.length)
}
function toEmployeeMealDetail(item):void {
  isReport(item.id).then(res => {
    let data = res.data
    if (!data) return
    let exist = data.exist
    let endTimeStap = (new Date(item.reportStoptime)).getTime()
    let reportTimeStap = (new Date(formatDate(new Date(), 'yyyy-MM-dd'))).getTime()
    console.log(endTimeStap)
    console.log(reportTimeStap)
    // 截止日期内  && 没报过计划
    if ((endTimeStap > reportTimeStap || endTimeStap === reportTimeStap) && exist === false) {
      router.push({
        path: '/resturant/employeeMealDetail',
        query: {
          planId: item.id, // 小节id
          isReport: '0',
          readonly: '0' // 课程id
        }
      })
      return
    }
    // 截止日期内  && 报过计划
    if ((endTimeStap > reportTimeStap || endTimeStap === reportTimeStap) && exist === true) {
      router.push({
        path: '/resturant/employeeMealDetail',
        query: {
          planId: item.id, // 小节id
          isReport: '1',
          readonly: '0' // 课程id
        }
      })
      return
    }
    // 已经过了截止日期  && 没报过计划
    if (endTimeStap < reportTimeStap && exist === false) {
      showToast('已经超过报餐截止日期，无法报餐')
      return
    }
    // 已经过了截止日期 && 报过计划
    if (endTimeStap < reportTimeStap && exist === true) {
      router.push({
        path: '/resturant/employeeMealDetail',
        query: {
          planId: item.id, // 小节id
          isReport: '1',
          readonly: '1' // 课程id
        }
      })
      return
    }
  })

}

</script>

<template>
  <div class="container full">
    <PullList ref="pullListRef" v-model:query-string="queryParams" :request-method="onRequest">
      <template #default="{ item, index }">
        <employeeMealCard :item="item" @to-employee-meal-detail="toEmployeeMealDetail"/>
      </template>
    </PullList>
  </div>
</template>

<style lang="less" scoped>
.container {
  .option-container {
    display: flex;
    align-items: center;
    .more-option {
      height: 1.6rem;
      width: 1.6rem;
      margin-left: 1.2rem;
    }
    .search-input {
      flex: 1;

    }
  }

}
.van-search {
  position: relative;
  z-index: 1;
  padding: 1rem;
  // min-height: 4.4rem;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
  // overflow: hidden;
}
.label{
  .title{
    margin-top: 1.2rem;
    padding-left: 1.2rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(62, 62, 62, 1);
  }
  .option-select-container {
    padding: 1.2rem;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    .option-item {
      border: thin solid rgb(222, 219, 219);
      box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
      padding: 0.5rem 1.2rem;
      margin-top: 0.8rem;
      border-radius: 10em;
      margin-left: 1.2rem;
    }
    .active-item {
      border: thin solid rgba(71, 115, 252, 1);
    }
  }
}
.more-option-search-btn {
  padding: 1.2rem;
  position: absolute;
  bottom: 4rem;
  width: 100%;
  left: 0;
}
:deep(.van-pull-refresh__head) {
  height: 0;
}
</style>
