<template>
  <view>
    <view
      class="timetable-item"
      v-for="(item, index) in data.PlanTimeList"
      :key="index"
    >
      <view class="flex flex_start_center title-row">
        <view class="class-time">
			<view class="" style="font-size: 22rpx;font-weight: 400;color: #111111;">
				{{data.DateMonth}}-{{data.DateDay}}
			</view>
			<view class="">
				{{ item.StartTime }} 
			</view>
				
		</view>
        <view class="circle"></view>
        <view class="class-title one_line flex">
          {{ data.ClassName }}
          <view v-for="(_item, _index) in data.Chapter" :key="_index">
            {{ _item.ChapterName }}
            <text v-if="_index !== data.Chapter.length - 1">,</text>
          </view>
        </view>
      </view>
      <view class="left-line"></view>
      <view class="class-con flex">
        <van-image
          round
          width="84rpx"
          height="84rpx"
          fit="cover"
          :src="item.UserIcon"
          class="teacherimg"
        />
        <view class="class-right flex_grow flex flex_start_center">
          <!-- <view class="study-con"> 今日学习课程内容 </view> -->
          <view class="teacher-name flex flex_start-center">
            {{ item.TeacherName }}</view
          >
        </view>
      </view>
	  <view class="class-con class_status">
		<view v-if="item.IsLeave === 1 && item.IsCheck == 2">状态：<text style="color:#E6A23C;">已请假</text></view>
		<view v-if="item.IsLeave === 0 &&item.IsCheck === 0">状态：<text style="color:#DC3241">正常</text></view>
		<view v-if="item.IsLeave === 0 &&item.IsCheck === 1">状态：<text style="color:#F56C6C">缺勤</text></view>
	  </view>
      <view class="btn-box">
        <van-button
          custom-class="leave-btn"
          @click="
            jumpPage(`/pages/course/askForLeave?classId=${data.ClassId} `)
          "
          v-if="item.IsLeave === 1 && item.IsCheck < 2"
          >请假</van-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
} from "vue";
export default {
  name: "",
  props: { data: Object},
  components: {},
  setup(props) {
    let methods = {
      jumpPage(url) {
        uni.navigateTo({
          url: url,
        });
      },
    };
    return {
      ...toRefs(props),
      ...methods,
    };
  },
};
</script>

<style scoped>
.timetable-item {
  box-sizing: border-box;
  padding: 0 30rpx;
  height: 280rpx;
  position: relative;
}
.left-line {
  width: 2rpx;
  height: 275rpx;
  background-color: #e2e2e2;
  position: absolute;
  left: 112rpx;
  top: 20rpx;
}

.class-time {
  width: 68rpx;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #1b1d1e;
  margin-right: 10rpx;
}
.circle {
  box-sizing: border-box;
  width: 12rpx;
  height: 12rpx;
  background-color: #ffffff;
  border: 4rpx solid #DC3241;
  border-radius: 50%;
  margin-right: 20rpx;
}
.class-title {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
}
.teacherimg {
  margin-right: 30rpx;
}
.class-con {
  margin-left: 110rpx;
  margin-top: 30rpx;
}
.study-con {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
  margin-top: 8rpx;
  /* margin-bottom: 8rpx; */
}
.teacher-name {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.btn-box {
  position: absolute;
  right: 30rpx;
  top: 170rpx;
}
/deep/.leave-btn {
  width: 142rpx;
  height: 52rpx;
  background-color: #DC3241;
  border-radius: 8rpx;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
/deep/.already-leave-btn {
  width: 142rpx;
  height: 52rpx;
  background-color: #DC3241;
  opacity: 0.5;
  border-radius: 8rpx;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.class_status{
	font-size: 26rpx;
}
</style>
