<script setup lang="ts" name="LearnRecord">
import { ref, onMounted, reactive, watchEffect, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useRouter, useRoute } from 'vue-router'
import { useDict } from '@/common/utils/dict'
import PullList from '@/components/List/PullList.vue'
import RecordCard from './modules/recordCard.vue'
import { listTmTrainRecord } from '@/api/train/course.ts'
import moreOption from '@/assets/image/train/moreOption.png'
const { train_type, train_category, train_way } = useDict('train_type', 'train_category', 'train_way')
import { getCompanyList } from '@/common/utils/transcoding'

const courseId = ref('')
const trainId = ref('')
onLoad((option) => {
  courseId.value = option.courseId ? option.courseId : ''
  trainId.value = option.trainId ? option.trainId : ''
  queryParams.value.courseId = option.courseId
  queryParams.value.trainId = option.trainId
})
// const route = useRoute()
const pullListRef = ref<InstanceType<typeof PullList>>()

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  courseId: courseId.value,
  trainId: trainId.value
})


// 请求方法，传入PullList组件，需返回{rows: [], total: number}
function onRequest(query?: any, isRefresh?: boolean): Promise<{rows: any[], total: number}> {
  return listTmTrainRecord(query)
}


</script>

<template>
  <div class="container full">


    <!-- </div> -->
    <PullList ref="pullListRef" v-model:query-string="queryParams" :request-method="onRequest">
      <template #default="{ item, index }">
        <RecordCard :item="item" />
      </template>
    </PullList>


  </div>
</template>

<style lang="less" scoped>
.container {
  .option-container {
    display: flex;
    align-items: center;
    .more-option {
      height: 1.6rem;
      width: 1.6rem;
      margin-left: 1.2rem;
    }
    .search-input {
      flex: 1;

    }
  }

}
.van-search {
  position: relative;
  z-index: 1;
  padding: 1rem;
  // min-height: 4.4rem;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
  // overflow: hidden;
}
.label{
  .title{
    margin-top: 1.2rem;
    padding-left: 1.2rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(62, 62, 62, 1);
  }
  .option-select-container {
    padding: 1.2rem;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    .option-item {
      border: thin solid rgb(222, 219, 219);
      box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
      padding: 0.5rem 1.2rem;
      margin-top: 0.8rem;
      border-radius: 10em;
      margin-left: 1.2rem;
    }
    .active-item {
      border: thin solid rgba(71, 115, 252, 1);
    }
  }
}
.more-option-search-btn {
  padding: 1.2rem;
  position: absolute;
  bottom: 4rem;
  width: 100%;
  left: 0;
}
:deep(.van-pull-refresh__head) {
  height: 0;
}
</style>
