<template>
  <!-- <headers title="课程安排" /> -->
  <view class="course-arrange-container">
    <view class="progress">
      <text>课程进度：</text>
      <u-line-progress
        active-color="#2979ff"
        :percent="percent ? percent : 0"
        :height="25"
      />
    </view>
    <view v-if="arrangeList.length">
      <u-time-line>
        <u-time-line-item v-for="(item, index) in arrangeList" :key="index">
          <template #node>
            <view class="u-node">
              <view class="u-dot"></view>
            </view>
          </template>
          <template #content>
            <arrangeItem :arrangeItem="item" />
          </template>
        </u-time-line-item>
      </u-time-line>
      <view style="padding: 20rpx">
        <u-loadmore :status="status" icon-type="flower" />
      </view>
    </view>
    <view v-else class="empty">
      <u-empty text="暂无课程安排" mode="list" />
    </view>
  </view>
</template>

<script setup lang="ts">
// import headers from "@/components/header/index.vue"
import arrangeItem from "./components/arrangeItem.vue"
import { getTeachCourse } from "@/api/course"

const arrangeList = ref([] as any)
const percent = ref()
const listQuery = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  classId: "",
  Name: "",
})

const status = ref("loadmore")

onLoad((options: any) => {
  listQuery.classId = options.classId
  init()
})

// 上拉加载数据
onReachBottom(() => {
  // 判断是否还有下一页数据
  if (listQuery.pageIndex * listQuery.pageSize >= listQuery.total)
    return (status.value = "nomore")
  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  if (status.value === "loading") return
  listQuery.pageIndex += 1
  init()
})

const init = async () => {
  status.value = "loading"
  const { data: res } = await getTeachCourse(listQuery)
  if (res.code == 200) {
    if (res.total > 10) status.value = "loadmore"
    else status.value = "nomore"
    arrangeList.value = [...arrangeList.value, ...res.data]
    listQuery.total = res.total
    let num: number = res.data.filter(
      (item: any) => item.courseType === 2
    ).length
    percent.value = (num / res.total) * 100
    // console.log(arrangeList.value)
  }
}
</script>

<style lang="scss" scoped>
.course-arrange-container {
  padding: 0 20rpx;

  .progress {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26rpx 10rpx 50rpx 30rpx;

    text {
      display: block;
      padding: 12rpx 0;
      font-size: 32rpx;
      white-space: nowrap;
    }

    .registered {
      margin-left: 30rpx;
      color: #3b99fc;
    }
  }

  .u-dot {
    height: 22rpx;
    width: 22rpx;
    border-radius: 3.125rem;
    background: #2979ff;
    box-shadow: 0 0 10px rgba(0, 0, 0.6, 0.412);
  }
}
:deep(uni-modal) {
  z-index: 99999 !important;
}
</style>
