<script setup>
import dayjs from 'dayjs'
import { useFetch } from 'hooks/use-fetch'
import { getSignInListApi } from '@/api/elevator'
// 3 年前的年月日
const startDate = dayjs().subtract(3, 'year').format('YYYY-MM-DD')
// 当前的年月日（本月最后一天）
const endDate = dayjs().endOf('month').format('YYYY-MM-DD')
const change = (e) => {
  console.log(e)
  const { fulldate } = e
  query.value.pageNum = 1
  // query.value.fulldate = fulldate
  query.value.startTime = `${fulldate} 00:00:00`
  query.value.endTime = `${fulldate} 23:59:59`
  dataList.value = []
  getList()
}

const dataList = ref([])
// TODO: 首次请求 50 条，前端暂不做分页
const query = ref({
  pageNum: 1,
  pageSize: 50,
  startTime: `${dayjs().format('YYYY-MM-DD')} 00:00:00`,
  endTime: `${dayjs().format('YYYY-MM-DD')} 23:59:59`
})
const { result, fetchApi } = useFetch({
  apiFn: getSignInListApi,
  isList: true
})
const getList = async () => {
  await fetchApi({
    ...options.value,
    ...query.value
  })
  dataList.value.push(...result.value.rows)
}
const options = ref({})
onLoad(async (e) => {
  dataList.value = []
  options.value = e
})
onMounted(async () => {
  console.log('onMounted', options.value)
  await getList()
})
</script>

<template>
  <view>
    <uni-calendar
      :insert="true"
      :lunar="true"
      :start-date="startDate"
      :end-date="endDate"
      @change="change"
    />

    <view mt-30>
      <up-list>
        <up-list-item
          v-for="(item, index) in dataList"
          :key="index"
          :anchor="index"
        >
          <up-cell :title="item.signTime">
            <template #label>
              <view mt-8>
                <view f-s-c mt-4 text-28 text="#999999">
                  <up-icon name="map-fill" :size="24" :color="`${'#999999'}`" />
                  <text text-28 font-400 ml-4>{{ item.address }}</text>
                </view>
                <view mt-4>备注：{{ item.remark }}</view>
              </view>
            </template>
          </up-cell>
        </up-list-item>
      </up-list>

      <!-- <up-loadmore :line="true" status="nomore" /> -->
    </view>
  </view>
</template>
