import OSearch from '@/components/o-search'
import OEmpty from '@/components/o-empty'
import dayjs from 'dayjs'
import {
  Icon,
  Popover,
  DatePicker,
  DatePickerColumnType,
  Popup,
  List,
  PullRefresh,
  ActionSheet,
  showToast,
  Sticky
} from 'vant'
import { defineComponent, reactive, ref, onMounted, watch, inject } from 'vue'
import { useRouter } from 'vue-router'
import styles from './timer-bang.module.less'
import request from '@/helpers/request'
import { state as globalState } from '@/state'
import RankItem from '../modals/rank-item'
import MyRankingItem from '../modals/my-ranking-item'
export default defineComponent({
  props: ['toHeight'],
  emits: ['setTime'],
  name: 'day-bang',
  setup(props, { slots, attrs, emit }) {
    const router = useRouter()
    const state = reactive({
      showPopoverTime: false,
      showPopoverOrchestra: false,
      showPopoverSubject: false,
      actions: [] as any,
      subjects: [] as any,
      currentDate: [dayjs().format('YYYY'), dayjs().format('MM')]
    })
    const parentData = inject('parentData', { practiceMonth: '', timeName: '' } as any)
    const forms = reactive({
      practiceMonth: parentData.practiceMonth,
      page: 1,
      rows: 50,
      sortType: 'PRACTICE_DAY'
    })
    const minDate = ref(new Date(dayjs().subtract(10, 'year').format('YYYY-MM-DD')))
    const maxDate = ref(new Date(dayjs().add(10, 'year').format('YYYY-MM-DD')))
    const columnsType = ref<DatePickerColumnType[]>(['year', 'month'])
    const refreshing = ref(false)
    const loading = ref(false)
    const finished = ref(false)
    const showContact = ref(false)
    const list = ref([])
    const toTop = ref(props.toHeight)
    const myInfo = ref({} as any)
    console.log(props.toHeight)
    watch(
      () => props.toHeight,
      (val: number) => {
        toTop.value = val
      }
    )
    watch(
      () => parentData.practiceMonth,
      (val) => {
        forms.practiceMonth = val
        refreshing.value = true
        getList()
      }
    )
    const getList = async () => {
      loading.value = true
      try {
        if (refreshing.value) {
          forms.page = 1
          list.value = []
          refreshing.value = false
        }

        const res = await request.post('/api-student/student/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 || [])
        list.value = res.data.rows
        showContact.value = list.value.length > 0
        console.log(showContact.value, ' showContact.value ')
        loading.value = false
        finished.value = true
        myInfo.value = res.data.extra
        // 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
      }
    }

    onMounted(() => {
      getList()
    })
    const onRefresh = () => {
      finished.value = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true
      getList()
    }
    return () => (
      <>
        {showContact.value ? (
          <div>
            <PullRefresh
              v-model={refreshing.value}
              onRefresh={onRefresh}
              style="min-height: 100vh;"
            >
              <List
                v-model:loading={loading.value}
                finished={finished.value}
                finished-text="没有更多了"
                onLoad={getList}
              >
                {list.value.map((item: any, index: number) => (
                  <RankItem item={item} type="day" index={index + 1}></RankItem>
                ))}
              </List>
            </PullRefresh>
            <MyRankingItem item={myInfo.value}></MyRankingItem>
          </div>
        ) : (
          <OEmpty />
        )}
      </>
    )
  }
})