<script setup lang="ts" name="RelaCourseList">
import { ref, onMounted, reactive, watchEffect,watch, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useDict } from '@/common/utils/dict'
import PullList from '@/components/List/PullList.vue'
import RelaCard from './modules/relaCard.vue'
import { listByTrainId } from '@/api/train/plan.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'


onLoad((option) => {
  optionPlanId.value = option.planId || ''
  trainStatus.value = option.status || ''
  console.log('optionPlanId',optionPlanId)
  queryParams.value.trainId = optionPlanId.value
})
const optionPlanId = ref('')
const trainStatus = ref('')
// const router = useRouter()

// const route = useRoute()
const pullListRef = ref<InstanceType<typeof PullList>>()

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  trainId: optionPlanId.value

})


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

/**
 * 学习记录
 * @param item
 */
function courseLearnRecord(item:any):void {

  uni.navigateTo({
    url:'/course/learnRecord?courseId=' + item.id + '&trainId=' + optionPlanId.value
  })

}

/**
 * 课程详情
 * @param item
 */
function courseDetail(item:any):void {

  uni.navigateTo({
    url:'/course/sectionList?courseId=' + item.id + '&trainId=' + optionPlanId.value + '&trainStatus=' + trainStatus.value
  })
}

</script>

<template>
  <div class="container">


    <!-- </div> -->
    <PullList ref="pullListRef" v-model:query-string="queryParams" :isFixed="false" zHeight="96vh"  :request-method="onRequest">
      <template #default="{ item, index }">
        <div style="padding: 0 30rpx;" >
          <RelaCard :item="item" @course-learn-record="courseLearnRecord" @course-detail="courseDetail(item)"/>
        </div>
      </template>
    </PullList>


  </div>
</template>

<style lang="less" scoped>
.container {
  height: 100%;
  overflow: auto;
  .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>
