import OEmpty from '@/components/o-empty'
import OFullRefresh from '@/components/o-full-refresh'
import dayjs from 'dayjs'
import { List, PullRefresh, showToast } from 'vant'
import { defineComponent, reactive, ref, onMounted, TransitionGroup } 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: 'end-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 list = ref([])

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

        const res = await request.post('/api-school/userApproveRecord/page', {
          data: { ...forms, hasHandle: true },
          hideLoading: refreshing.value
        })

        if (Array.isArray(res?.data?.rows)) {
          list.value = list.value.concat(res.data.rows || [])
          forms.page = res.data.current + 1
          finished.value = !res.data.next
        } else {
          finished.value = true
        }
      } catch (e: any) {
        finished.value = true
      }
      loading.value = false
      refreshing.value = false
    }
    onMounted(() => {
      getList()
    })
    const gotoDetail = (row: any) => {
      // leaveCategoryId 1请假 2退团
      router.push({ path: '/student-leave', query: { id: row.id, type: 'end' } })
    }
    return () => (
      <OFullRefresh
        modelValue={refreshing.value}
        onRefresh={() => {
          refreshing.value = true
          getList()
        }}
        style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.33333rem);"
      >
        <List
          loading={loading.value}
          loading-text=" "
          finished={finished.value}
          finished-text=" "
          onLoad={getList}
        >
          <TransitionGroup name="van-fade">
            {list.value.map((item: any, itemIndex: number) => (
              <div key={`index-${itemIndex}`} onClick={() => gotoDetail(item)}>
                <ApprovalItem item={item} type="end"></ApprovalItem>
              </div>
            ))}
          </TransitionGroup>
        </List>
        {!loading.value && !list.value.length && <OEmpty tips="暂无审批" />}
      </OFullRefresh>
    )
  }
})