<script setup>
import { getWorkDataOverdueListApi } from '@/api/elevator'
import { usePaging } from '@/composables/use-paging'

const keyValue = reactive([
  { key: '上次维保日期', field: 'lastTime' },
  { key: '本次计划日期', field: 'expectTime' }
])

const { paging, dataList, dataTotal, queryHandler } = usePaging({
  apiFn: getWorkDataOverdueListApi
})
</script>

<template>
  <view w-full h-100vh flex-col f-s-c>
    <view w-full text-32 font-500 px-32 py-12>总数：{{ dataTotal }}个</view>

    <view w-full flex-auto overflow-hidden bg-white>
      <z-paging
        ref="paging"
        v-model="dataList"
        :fixed="false"
        @query="queryHandler"
      >
        <up-card
          v-for="(item, index) in dataList"
          :key="index"
          :title="`超出天数：${item.exceedDay}天`"
        >
          <template #body>
            <view>
              <view mb-8 px-30 text-36 font-500 f-c-c justify-between>
                <text>{{ item.elevatorName }}</text>
              </view>
              <up-cell
                v-for="(val, idx) in keyValue"
                :key="idx"
                :title="val.key"
                :value="val.format ? val.format(item) : item[val.field]"
              />
            </view>
          </template>
        </up-card>
      </z-paging>
    </view>
  </view>
</template>
