<script setup lang="ts" name="TripList">
import { ref, onMounted, reactive, watchEffect, nextTick } from 'vue'
// import { useRouter, useRoute } from 'vue-router'
import { useDict } from '@/common/utils/dict'
import PullList from '../components/List/PullList.vue'
import Card from './modules/card.vue'
import { myCourselist } from '@/api/train/course.ts'
const { course_type } = useDict('course_type')

// const router = useRouter()
const pullListRef = ref<InstanceType<typeof PullList>>()

const queryParams:any = ref({
  pageNum: 1,
  pageSize: 10,
  courseType: ''
})
const active = ref(0)
onMounted(() => {
  console.log('course_type',course_type.value)
  queryParams.value.courseType = course_type.value[0].value
})
// 请求方法，传入PullList组件，需返回{rows: [], total: number}
function onRequest(query?: any, isRefresh?: boolean): Promise<{rows: any[], total: number}> {
  // console.log(course_type.value)
  // if (!queryParams.value.courseType || queryParams.value.courseType === '') {
  //   queryParams.value.courseType = course_type.value[0].value
  // }
  return myCourselist(query)
}
/**
 * 课程详情
 * @param item
 */
function courseDetail(item:any):void {
  // router.push({
  //   path: '/course/sectionList',
  //   query: {
  //     courseId: item.id, // 课程id
  //     trainId: item.trainId, // 培训id
  //     trainStatus: item.trainStatus
  //   }
  // })
  uni.navigateTo({
    url:'/course/sectionList?courseId=' + item.id + '&trainId=' + item.trainId + '&trainStatus=' + item.trainStatus
  })
}
/**
 * 学习记录
 * @param item
 */
function courseLearnRecord(item:any):void {
  // router.push({
  //   path: '/course/learnRecord',
  //   query: {
  //     courseId: item.id,
  //     trainId: item.trainId
  //   }
  // })
  uni.navigateTo({
    url:'/course/learnRecord?courseId=' + item.id + '&trainId=' + item.trainId
  })
}
function handleChangeTab(val:any) {
  console.log(val)
  queryParams.value.courseType = course_type.value[val.detail.index].value 
    pullListRef.value?.refresh()
}

</script>

<template>
  <div>
    <van-tabs
      v-model:active="active"
      :ellipsis="false"
      line-height="0"
      @change="handleChangeTab"
    >
      <van-tab
        v-for="(item,index) in course_type"
        :key="index"
        :title="item.label"
      >
  
      </van-tab>

    </van-tabs>
          <div class="container" v-if="course_type.length > 0">
          <PullList ref="pullListRef" v-model:query-string="queryParams" :isFixed="false" zHeight="90vh" :request-method="onRequest">
            <template #default="{ item, index }">
              <Card :item="item" @course-detail="courseDetail" @course-learn-record="courseLearnRecord"/>
            </template>
          </PullList>
        </div>
  </div>
</template>

<style lang="less" scoped>
// .container {
//   height: 100%;
//   overflow: auto;

// }
:deep(.van-pull-refresh__head){
  height: 0;
}
</style>
