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

const operationStateMap = {
  2: '接收',
  3: '到场',
  4: '完成',
  7: '评价'
}

const keyValue = reactive([
  { key: '期望时间', value: '', field: 'nextAnnual' },
  { key: '关联电梯', value: '', field: 'elevatorName' },
  { key: '电梯编号', value: '', field: 'elevatorNum' },
  {
    key: '当前状态',
    value: '',
    format: (item) => operationStateMap[item.state] || '未知'
  }
])

const { paging, dataList, dataTotal, queryHandler } = usePaging({
  apiFn: getAnnualPlanOverdueListApi
})
</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>
