<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/icon2.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" v-if="item.ChildList.length > 0">
        <view class="flex flex_between_center">
          <view class="flex flex_between_center">
            <view class="dot"></view>
            <text class="chapter-name">{{ item.ChapterName }}</text>
          </view>
          <view class="course-time"> {{ item.StudyHours }}课时 </view>
        </view>
        <view
          v-if="item.ChildList.length > 0"
          v-for="(_item, _index) in item.ChildList"
          :key="_index"
          class="course-list one_line"
          @click="jumpPage(_item)"
        >
          {{ _item.ChapterName }}
        </view>
      </view>
      <view
        class="chapter"
        v-if="item.ChildList.length == 0"
        @click="jumpPage(item)"
      >
        <view class="flex flex_between_center">
          <view class="flex flex_between_center">
            <view class="dot"></view>
            <text class="chapter-name">{{ item.ChapterName }}</text>
          </view>
          <view class="course-time"> {{ item.StudyHours }}课时 </view>
        </view>
      </view>
    </view>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
  inject,
} from "vue";
import { getCourse } from "../../api/index";
let { CourseName } = uni.getStorageSync("indexData");
export default {
  setup() {
    let data = reactive({
      data: [],
      msg: {
        CourseId: 0,
      },
      CourseName,
    });
    let methods = {
      jumpPage(item) {
        let data = encodeURIComponent(JSON.stringify(item));
        uni.navigateTo({
          url: "/pages/course/chapter?con=" + data,
        });
      },
      async getdata() {
        let res = await getCourse(data.msg);
        if (res) {
          data.data = res.Data;
        }
      },
    };

    onMounted(() => {});

    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: "课程",
    });
    this.msg.CourseId = options.id;
    this.getdata();
  },
};
</script>

<style scoped>
.course-box {
  padding: 30rpx;
}
.top-bar {
  height: 120rpx;
  margin-bottom: 28rpx;
}
.top-left {
  width: 220rpx;
  height: 120rpx;
  background-color: #dde6ff;
  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;
}
</style>
