import OEmpty from '@/components/o-empty'
import dayjs from 'dayjs'
import { List, PullRefresh, showToast } from 'vant'
import OFullRefresh from '@/components/o-full-refresh'
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'
import { approvalManageStrips } from '..'
export default defineComponent({
  name: 'wait-approval',
  setup(props, { emit }) {
    const router = useRouter()
    const forms = reactive({
      page: 1,
      rows: 1000
    })

    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
      if (refreshing.value) {
        finished.value = false
        forms.page = 1
        list.value = []
      }
      try {
        const res = await request.post('/api-school/userApproveRecord/page', {
          data: { ...forms, hasHandle: false }
          // hideLoading: refreshing.value
        })

        if (Array.isArray(res?.data?.rows)) {
          forms.page = res.data.current + 1
          list.value = list.value.concat(res.data.rows || [])
          finished.value = !res.data.next
          approvalManageStrips.approval = list.value.length
        } else {
          finished.value = false
        }
      } catch (e: any) {
        finished.value = true
      }
      loading.value = false
      refreshing.value = false
    }

    const gotoDetail = (row: any) => {
      // leaveCategoryId 1请假 2退团
      router.push({ path: '/student-leave', query: { id: row.id, type: 'doing' } })
    }
    onMounted(() => {
      getList()
    })
    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}
          finished={finished.value}
          finished-text=" "
          loading-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="wait"></ApprovalItem>
              </div>
            ))}
          </TransitionGroup>
        </List>
        {!loading.value && !list.value.length && (
          <div class="emptyFixedHeightContainer">
            <OEmpty tips="暂无审批" />
          </div>
        )}
      </OFullRefresh>
    )
  }
})