import OEmpty from '@/components/o-empty'
import OHeader from '@/components/o-header'
import OSearch from '@/components/o-search'
import dayjs from 'dayjs'
import {
  DatePicker,
  DatePickerColumnType,
  Popup,
  List,
  PullRefresh,
  ActionSheet,
  showToast
} from 'vant'
import { defineComponent, reactive, ref, onMounted } from 'vue'
import sanIcon from './images/san-icon.png'
import { useRoute, useRouter } from 'vue-router'
import styles from './index.module.less'
import request from '@/helpers/request'
import { state as globalState } from '@/state'
import StudentCell from './modals/student-cell'
export default defineComponent({
  name: 'student-att-day',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const myTimer = route.query.time as string
    const state = reactive({
      showPopoverTime: false,
      currentDate: myTimer ? myTimer.split('-') : [2022, 12, 19],
      currentDateName: ''
    })
    const forms = reactive({
      nickName: '',
      time: myTimer,
      timeName:
        myTimer.split('-')[0] + '年' + myTimer.split('-')[1] + '月' + myTimer.split('-')[2] + '日',
      page: 1,
      rows: 20,
      timeType: 'DAY'
    })

    const columnsType = ref<DatePickerColumnType[]>(['year', 'month', '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 refreshing = ref(false)
    const loading = ref(false)
    const finished = ref(false)
    const showContact = ref(false)
    const list = ref([])

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

        const res = await request.post('/api-school/courseScheduleStudentAttendance/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 checkTimer = (val: any) => {
      console.log(val, 'val')
      forms.time = val.selectedValues[0] + '-' + val.selectedValues[1] + '-' + val.selectedValues[2]
      forms.timeName =
        val.selectedValues[0] + '年' + val.selectedValues[1] + '月' + val.selectedValues[2] + '日'
      state.showPopoverTime = false
      refreshing.value = true
      getList()
    }

    onMounted(() => {
      getList()
    })
    const onRefresh = () => {
      finished.value = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true
      getList()
    }
    return () => (
      <>
        {/* </OSticky> */}
        <OHeader>
          {{
            title: () => (
              <div class={styles.NavTitle} onClick={() => (state.showPopoverTime = true)}>
                {forms.timeName}{' '}
                <img
                  class={[styles.sanIcons, state.showPopoverTime ? styles.isReversal : '']}
                  src={sanIcon}
                  alt=""
                />
              </div>
            )
          }}
        </OHeader>
        <OSearch
          placeholder="请输入学生姓名"
          inputBackground="white"
          background="#f6f6f6"
          onSearch={(val: any) => {
            forms.nickName = val
            refreshing.value = true
            getList()
          }}
          modelValue={forms.nickName}
        ></OSearch>
        {showContact.value ? (
          <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) => (
                <StudentCell item={item}></StudentCell>
              ))}
            </List>
          </PullRefresh>
        ) : (
          <OEmpty />
        )}
        <Popup v-model:show={state.showPopoverTime} position="bottom" style="{ height: '30%' }">
          <DatePicker
            onCancel={() => {
              state.showPopoverTime = false
            }}
            onConfirm={checkTimer}
            v-model={state.currentDate}
            title="选择日期"
            columnsType={columnsType.value}
          />
        </Popup>
      </>
    )
  }
})
