<template>
  <view class="course-arrange-container">
    <view class="course-arrange-progress">
      <text>课程进行：</text>
      <u-line-progress
        active-color="#04a7ff"
        :percent="percent ? percent : 0"
        :show-percent="false"
        :height="20"
        style="margin-top: 10rpx"
      />
      <view class="progress">
        {{
          (totalPercentage ? totalPercentage : "0") + "/" + arrangeList.length
        }}
      </view>
    </view>
    <view v-if="arrangeList.length">
      <u-time-line>
        <u-time-line-item v-for="(item, index) in arrangeList" :key="index">
          <template #node>
            <u-icon name="clock-fill" color="#909399" />
          </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 arrangeItem from "./components/arrangeItem.vue";
import { getTeachCourse } from "@/api/course";

const arrangeList = ref([] as any);
const percent = ref();
const totalPercentage = ref();
const listQuery = reactive({
  pageIndex: 1,
  pageSize: 999,
  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;
    totalPercentage.value = res.data.filter(
      (item: any) => item.courseType === 2
    ).length;
    percent.value = (totalPercentage.value / res.total) * 100;
    // console.log(arrangeList.value)
  }
};
</script>

<style lang="scss" scoped>
.course-arrange-container {
  padding-right: 32rpx;
  margin-left: 32rpx;

  .course-arrange-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32rpx 0 56rpx;
    width: 90%;
    .progress {
      margin-left: 10px;
      margin-top: 8rpx;
    }
    text {
      display: block;
      white-space: nowrap;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(34, 34, 34, 0.9);
      margin-top: 6rpx;
    }

    .registered {
      margin-left: 30rpx;
      color: #3b99fc;
    }
  }
}
:deep(uni-modal) {
  z-index: 99999 !important;
}
</style>
