import OEmpty from '@/components/o-empty'
import dayjs from 'dayjs'
import { List, PullRefresh, showToast } from 'vant'
import { defineComponent, reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import styles from './wait-approval.module.less'
import request from '@/helpers/request'
import ApprovalItem from './approval-item'
export default defineComponent({
  name: 'wait-approval',
  setup() {
    const router = useRouter()
    const forms = reactive({
      page: 1,
      rows: 20
    })

    const refreshing = ref(false)
    const loading = ref(false)
    const finished = ref(false)
    const showContact = ref(false)
    const list = ref([])

    const getList = async () => {
      console.log('getList')
      loading.value = true
      try {
        if (refreshing.value) {
          forms.page = 1
          list.value = []
          refreshing.value = false
        }

        const res = await request.post('/api-school/userLeaveRecord/page', {
          data: { ...forms }
        })

        if (list.value.length > 0 && res.data.pages === 1) {
          return
        }

        forms.page = res.data.current + 1
        list.value = list.value.concat(res.data.rows || [])
        showContact.value = list.value.length > 0
        loading.value = false
        finished.value = res.data.current >= res.data.pages
      } catch (e: any) {
        // console.log(e, 'e')
        const message = e.message
        showToast(message)
        showContact.value = false
        finished.value = true
      }
    }
    const onRefresh = () => {
      finished.value = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true
      getList()
    }
    return () => (
      <>
        {showContact.value ? (
          <PullRefresh v-model={refreshing.value} onRefresh={onRefresh}>
            <List
              v-model:loading={loading.value}
              finished={finished.value}
              finished-text="没有更多了"
              onLoad={getList}
            >
              {list.value.map((item: any) => (
                <ApprovalItem item={item} type="wait"></ApprovalItem>
              ))}
            </List>
          </PullRefresh>
        ) : (
          <OEmpty />
        )}
      </>
    )
  }
})