<template>
  <view class="course-box">
    <view class="top-bar flex">
      <view class="top-left flex flex_between_center">
        <view class="top-title"> 进度 </view>
        <van-image
          width="58rpx"
          height="66rpx"
          fit="cover"
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon3.png"
        />
      </view>
      <view class="top-right">
        <view class="course-name one_line"> {{ CourseName }} </view>
        <view class="section-name one_line"> {{ data.length }}个章节 </view>
      </view>
    </view>
    <van-empty description="暂无数据" v-if="data.length === 0" />
    <view v-for="(item, index) in data" :key="index" v-if="data.length > 0">
      <view class="chapter">
        <view class="flex flex_between_center">
          <view class="flex flex_between_center">
            <view class="dot"></view>
            <text class="chapter-name">{{
              item.ChapterTreeInfo.ChapterName
            }}</text>
          </view>
          <view class="course-time" v-if="item.IsStudy === 0">
            {{ item.ChapterTreeInfo.StudyHours }}课时
          </view>
          <van-image
            width="40rpx"
            height="25rpx"
            fit="cover"
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/finish.png"
            v-if="item.IsStudy === 1"
          />
        </view>
        <view
          v-for="(_item, _index) in item.ChapterTreeInfo.ChildList"
          :key="_index"
          class="course-list one_line"
        >
          {{ _item.ChapterName }}
        </view>
      </view>
    </view>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
} from "vue";
import { getProgress } from "../../api/index";
import { getIndexInfo } from "../../api/index";
export default {
  setup() {
    let data = reactive({
      msg: {
        ClassId: 0,
      },
      data: [],
      CourseName: "",
    });
    let methods = {
      async getData() {
        let res = await getProgress(data.msg);
        data.data = res.Data;
      },
      async getIndexdata() {
        let res = await getIndexInfo();
        if (res) {
          data.CourseName = res.Data.CourseName;
        }
      },
    };
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: "进度",
    });
    this.msg.ClassId = parseInt(options.id);
    this.getData();
    this.getIndexdata();
  },
};
</script>

<style scoped>
.course-box {
  padding: 30rpx;
}
.top-bar {
  height: 120rpx;
  margin-bottom: 28rpx;
}
.top-left {
  width: 220rpx;
  height: 120rpx;
  background-color: #ffefe4;
  border-radius: 20rpx;
  margin-right: 30rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
}
.top-title {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #0f1b35;
}
.top-right {
  width: 440rpx;
  height: 120rpx;
}
.course-name {
  box-sizing: border-box;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
  height: 50%;
  line-height: 70rpx;
}
.section-name {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  height: 50%;
  line-height: 50rpx;
}
.chapter {
  box-sizing: border-box;
  padding: 30rpx;
  border-radius: 12rpx;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(36, 36, 36, 0.2);
  margin-bottom: 30rpx;
}
.chapter .dot {
  width: 6rpx;
  height: 6rpx;
  background-color: #00acf9;
  border-radius: 50%;
  margin-right: 10rpx;
}
.chapter-name {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}
.course-time {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}
.course-list {
  width: 614rpx;
  height: 80rpx;
  line-height: 78rpx;
  background-color: #f7f8fc;
  border-radius: 6rpx;
  margin-top: 20rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.info {
  width: 544rpx;
  height: 700rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}
.info-top {
  height: 90rpx;
  background-color: #b4ddfe;
  box-sizing: border-box;
  padding: 0 30rpx;
}
.left-icon {
  width: 6rpx;
  height: 22rpx;
  background-image: linear-gradient(180deg, #00acf9, #ffffff);
  margin-right: 10rpx;
}
.wrapper-title {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}
.info-main {
  height: 610rpx;
  padding-top: 30rpx;
}
.wrapper-section {
  padding-left: 50rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
  margin-bottom: 30rpx;
}
.wrapper-section .left-bot {
  width: 8rpx;
  height: 8rpx;
  background-color: #00acf9;
  border-radius: 50%;
  margin-right: 10rpx;
}
.info-con {
  padding-left: 65rpx;
  padding-right: 55rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}
.Know-btn {
  width: 300rpx;
  height: 90rpx;
  background-color: #00acf9;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin: 40rpx auto 0;
}
</style>
