<!--班级-详情-->
<template>
  <view class="main_box">
    <!--自定义导航栏-->
<!--    <view class="navbar_section">-->
<!--      <view class="title">班级详情</view>-->
<!--    </view>-->

    <view class="main_section">
      <view class="section_1">
<!--        <view class="left">-->
<!--          <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>-->
<!--          <view class="name">包皮子</view>-->
<!--        </view>-->
        <view class="right">
          <view class="item">
            班级：{{classInfo.name}}
          </view>

          <view class="item">
            地点：{{classInfo.address}}
          </view>

<!--          <view class="item">-->
<!--            课程：篮球少儿课-->
<!--          </view>-->

          <view class="item">
            人数：{{classInfo.max_students}}人
          </view>

          <view class="item">

            时间：{{classInfo.start_date}}  - {{classInfo.end_date}}
          </view>
        </view>
      </view>

<!--      <view class="section_2">-->
<!--        <view class="title_box">-->
<!--          <view>最近课程</view>-->
<!--        </view>-->
<!--        <view class="tag_list">-->
<!--          <view class="item" @click="openViewCourseInfo({id:1})">-->
<!--            <view class="title">-->
<!--              篮球少儿课-->
<!--            </view>-->
<!--            <view>-->
<!--              2020.05.30 15:30 - 17:30-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="item" @click="openViewCourseInfo({id:2})">-->
<!--            <view class="title">-->
<!--              篮球少儿课-->
<!--            </view>-->
<!--            <view>-->
<!--              2020.05.30 15:30 - 17:30-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->

      <view class="section_3">
        <view class="btn_box">
          <view :class="['btn', tabType=='1'?'select':'']" @click="tabChange(1)">
            班级成员
          </view>
          <view :class="['btn', tabType=='2'?'select':'']" @click="tabChange(2)">
            课程计划
          </view>
        </view>
      </view>

      <!-- 班级成员列表-->
      <view class="section_4" v-if="tabType=='1'">
        <view class="ul">
          <view
              class="li"
              v-for="(v,k) in classMemberList"
              :key="k"
              @click="openViewStudentInfo(v)"
          >
            <view class="left">
              <view class="box_1">
                <image class="pic" :src="$util.img(v.header)"></image>
                <view class="tag_box" v-if="v.expire">
                  即将到期
                </view>
              </view>
              <view class="box_2">
                <view class="name">{{ v.name }}</view>
                <view class="date">课程截止时间：{{ $util.formatToDateTime(v.expire_time, 'Y-m-d') }}</view>
              </view>
            </view>
            <view class="right">
              <view class="item">
                <view>{{ v.have_study_time }}</view>
                <view>已上课时</view>
              </view>
              <view class="item">
                <view>{{ v.end_study_time }}</view>
                <view>剩余课时</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!--课程计划-->
      <scroll-view
          v-if="tabType=='2'"
          class="section_5"
          scroll-y="true"
          :lower-threshold="lowerThreshold"
          @scrolltolower="loadMoreData"
          style="height: 65vh;"
      >
        <view class="ul">
          <view
              class="li"
              v-for="(v,k) in courseList"
              :key="k"
              @click="openViewCourseInfo(v)"
          >
            <view class="top_box">
              <view class="title">
                课程：{{v.courses_name}}
              </view>
              <view class="title">
                时间：{{v.date}}
              </view>
              <view class="title">
                地点：{{v.address}}
              </view>
            </view>
            <view class="bottom_box">
              <view class="item">
                <view class="left">应到学员（{{v.max_students}}）</view>
                <view class="right">
                  查看
                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
                </view>
              </view>
              <view class="item">
                <view class="left">已签到学生（{{v.has_sign_count}}/{{v.max_students}}）</view>
                <view class="right">
                  查看
                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
                </view>
              </view>
<!--              <view class="item">-->
<!--                <view class="left">作业完成率（80%）</view>-->
<!--                <view class="right">-->
<!--                  查看-->
<!--                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>-->
<!--                </view>-->
<!--              </view>-->
            </view>

            <view class="tag" v-if="!(['1','2'].includes(String(v.status)))" style="background-color:#20CAAF;">
              未开始
            </view>
            <view class="tag" v-if="v.status == 1" style="background-color:#fad24e;">
              上课中
            </view>

            <view class="tag" v-if="v.status == 2" style="background-color:#e2e2e2;">
              已结束
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

<!--    底部导航-->
<!--    <AQTabber/>-->
  </view>
</template>

<script>
import memberApi from '@/api/member.js';
import AQTabber from "@/components/AQ/AQTabber.vue"


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      class_id:'',//班级id
      classInfo:{},//班级数据
      classMemberList:{},//班级成员

      tabType:'1',//1=班级成员,2=课程计划


      loading: false,//加载状态
      lowerThreshold: 100,//距离底部多远触发
      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载

      //筛选条件
      filteredData: {
        page: 1,//当前页码
        limit: 10,//每页返回数据条数
        total: 10,//数据总条数
        class_id: '',//班级id
      },
      courseList:[],//课程计划数据
    }
  },
  onLoad(options) {
    this.class_id = options.class_id//课程id
  },
  onShow() {
    this.init()
  },
  //下拉刷新
  async onPullDownRefresh() {
    //重置为第一页
    await this.loadData()
    await this.getCourseList()
  },
  methods: {

    async init(){
      // member/course_list//课程列表
      // member/class_info//班级详情+成员详情
      this.getClassInfo()//获取班级详情
      await this.getCourseList()//获取课程列表

    },

    //教练端-获取班级详情
    async getClassInfo(){
      let res = await memberApi.jlClassInfo({class_id:this.class_id})//班级详情
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      console.log('获取班级列表',res.data)
      this.classInfo = res.data
      this.classMemberList = res.data.students_list
    },


    //加载更过(下一页)
    loadMoreData() {
      //判断是否加载
      if (!this.isReachedBottom) {
        this.isReachedBottom = true;//设置为不可请求状态
        this.getCourseList();
      }
    },
    //重置为第一页
    async loadData() {
      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多

      this.filteredData.page = 1//当前页码
      this.filteredData.limit = 10//每页返回数据条数
      this.filteredData.total = 10//数据总条数
    },
    //教练端-获取课程列表
    async getCourseList(){

      let data = {...this.filteredData}
      data.class_id = this.class_id

      console.log(12123,this.courseList)

      if(data.page == 1){
        this.courseList = []
      }

      //判断是否还有数据
      if (this.filteredData.page * this.filteredData.limit > this.filteredData.total || this.filteredData.limit > this.filteredData.total) {
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

      let res = await memberApi.courseList(data)
      this.loading = false
      this.isReachedBottom = false;
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }


      this.courseList = this.courseList.concat(res.data.list.data)// 使用 concat 方法 将新数据追加到数组中

      this.filteredData.total = res.data.list.total
      console.log('获取课程列表',this.courseList)
      this.filteredData.page++

    },



    //切换tab
    tabChange(tabType) {
      this.tabType = tabType
    },

    //打开课程详情
    openViewCourseInfo(item){
      let id= item.id
      uni.navigateTo({
        url: `/pages/coach/course/info_list?id=${id}`
      })
    },
    //打开学员详情页
    openViewStudentInfo(item){
      let students_id = item.id
      uni.navigateTo({
        url: `/pages/coach/student/info?students_id=${students_id}`
      })
    },
  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

//自定义导航栏
.navbar_section{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #292929;
  .title{
    padding: 20rpx 0;
    font-size: 30rpx;
    color: #fff;
  }
}

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 24rpx;
  color: #FFFFFF;

  .section_1 {
    background: #333333;
    border-radius: 16rpx;
    padding: 34rpx 64rpx;
    display: flex;
    align-items: center;
    gap: 38rpx;
    .left{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;
      .pic{
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
      }
    }
    .right{
      display: flex;
      flex-direction: column;
      gap: 12rpx;
      .item {}
    }
  }

  .section_2{
    margin-top: 42rpx;
    .title_box{
      font-size: 32rpx;
    }
    .tag_list{
      margin-top: 26rpx;
      display: flex;
      align-items: center;
      gap: 26rpx;
      .item{
        padding-left: 20rpx;
        width: 330rpx;
        height: 162rpx;
        border: 1px solid #00e5bb;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10rpx;
      }
    }
  }

  //按钮切换
  .section_3{
    margin-top: 54rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn_box{
      width: 698rpx;
      border-radius: 8rpx;
      background-color: rgba(22,132,252,1);
      border: 1rpx solid rgba(22,132,252,1);

      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      .btn{
        width: 100%;
        height: 76rpx;
        line-height: 76rpx;
        text-align: center;
        color: #fff;
        font-size: 26rpx;
      }
      .select{
        color: #1684fc;
        background-color: #fff;
      }
    }

  }

  //班级成员列表
  .section_4{
    margin-top: 40rpx;
    .ul{
      display: flex;
      flex-direction: column;
      gap: 10rpx;
      .li{
        padding: 20rpx 0;
        padding-bottom: 40rpx;
        border-bottom: 2px solid #D7D7D7;
        display: flex;
        justify-content: space-between;
        .left{
          display: flex;
          align-items: center;
          gap: 30rpx;
          .box_1{
            padding-left: 20rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            .pic{
              width: 84rpx;
              height: 84rpx;
              border-radius: 50%;
            }
            .tag_box{
              position: absolute;
              bottom: -30rpx;
              width: 120rpx;
              height: 38rpx;
              background-color: #F59A23;
              border-radius: 4rpx;
              line-height: 35rpx;
              text-align: center;
              font-size: 20rpx;
            }
          }
          .box_2{
            display: flex;
            flex-direction: column;
            gap: 20rpx;
            .name{
              font-size: 28rpx;
            }
            .date{
              font-size: 24rpx;
            }
          }
        }
        .right{
          display: flex;
          align-items: center;
          gap: 14rpx;
          .item{
            border: 1px solid #00E5BB;
            border-radius: 10rpx;
            width: 102rpx;
            display: flex;
            flex-direction: column;
            view{
              text-align: center;
              height: 50rpx;
              line-height: 50rpx;
            }
            view:nth-child(1){
              font-size: 32rpx;
              background-color: #fff;
              color: #00e5bb;
            }
            view:nth-child(2){
              font-size: 20rpx;
              background-color: #00e5bb;
            }
          }
        }
      }
    }

  }

  //课程计划
  .section_5{
    margin-top: 36rpx;
    .ul{
      display: flex;
      flex-direction: column;
      gap: 30rpx;
      .li{
        position: relative;
        border-radius: 10rpx;
        background-color: rgba(63,63,67,1);
        border: 2rpx solid rgba(0,229,187,1);
        padding: 20rpx 14rpx;

        display: flex;
        flex-direction: column;
        .top_box{
          display: flex;
          flex-direction: column;
          gap: 10rpx;
          .title{
            color: rgba(255,255,255,1);
            font-size: 24rpx;
          }
        }
        .bottom_box{
          padding-top: 10rpx;
          margin-top: 20rpx;
          border-top: 1px dashed #F2F2F2;
          display: flex;
          flex-direction: column;
          gap: 10rpx;
          .item{
            display: flex;
            align-items: center;
            justify-content: space-between;

            color: rgba(215,215,215,1);
            font-size: 24rpx;
          }
        }
        .tag{
          position: absolute;
          right: 0rpx;
          top: 0rpx;
          width: 110rpx;
          height: 60rpx;
          line-height: 58rpx;
          border-radius: 0rpx 8rpx 0rpx 24rpx;
          background-color: rgba(32,202,175,1);
          color: rgba(255,255,255,1);
          font-size: 24rpx;
          text-align: center;
          border: 0rpx solid rgba(121,121,121,1);
        }
      }
    }
  }







}


</style>