<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/icon4.png"
        />
      </view>
      <view class="top-right">
        <view class="course-name one_line"> {{ CourseName }} </view>
        <view class="section-name one_line"> {{ SurplusHours }}课时 </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" @click="openLayer">
        <view class="flex flex_start_center">
          <van-image
            width="30rpx"
            height="24rpx"
            fit="cover"
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/classroom.png"
            style="margin-right: 10rpx"
          />
          <text class="mr-30 classroom">{{ item.RoomName }}</text>
          <van-image
            width="18rpx"
            height="22rpx"
            fit="cover"
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/user.png"
            style="margin-right: 10rpx"
          />
          <text class="mr-30 teacherName">{{ item.TeacherName }}</text>
          <van-image
            width="24rpx"
            height="22rpx"
            fit="cover"
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/calendar.png"
            style="margin-right: 10rpx"
          />
          <text class="date">{{ item.ClassDateStr }}</text>
        </view>
        <view
          v-for="(_item, _index) in item.PlanTimeList"
          :key="_index"
          class="course-list"
        >
          <van-image
            width="22rpx"
            height="22rpx"
            fit="cover"
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/time.png"
            style="margin-right: 10rpx"
          />
          {{ _item.StartTime }}-{{ _item.EndTime }}
        </view>
      </view>
    </view>
    <van-toast id="van-toast" />
  </view>
</template>

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

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

.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: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.classroom {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}
.teacherName,
.date {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}
</style>
