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

    <!--学员信息-->
    <view class="user_section">
     <view class="box">
       <vie class="left">
         <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
         <view class="btn_box">
           <view class="btn">即将到期</view>
         </view>
       </vie>
       <vie class="right">
         <veiw class="item">
           <view class="name">黄明明</view>
           <view class="age">
             13岁
           </view>
         </veiw>
         <view class="item">
           <view class="title">家长姓名：黄大呢</view>
         </view>
         <view class="item">
           <view class="title">家长电话：18888888888</view>
         </view>
       </vie>
     </view>
    </view>

    <!--课程信息-->
    <view class="course_section">
      <view class="main">
        <view class="course_box">
          <view class="item">
            <view class="title">篮球少儿课程</view>
          </view>

          <view class="item">
            <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
            <view class="name">包子皮</view>
          </view>

          <view class="item">
            <view class="content">截止时间：2020.05:25</view>
          </view>

          <view class="item">
            <view class="content">已上课时：24</view>
            <view class="content">剩余课时：24</view>
          </view>

          <view class="tag">
            出勤高
          </view>

          <view class="btn">
            延课一周
          </view>
        </view>
      </view>
      <view class="bg_box bg_top"></view>
      <view class="bg_box bg_bottom"></view>
    </view>


    <view class="main_section">
      <view class="section_box">
        <view class="tag_box">
          <view :class="['item', tabType=='1' ? 'select':'']" @click="tabChange(1)">出勤记录</view>
          <view :class="['item', tabType=='2' ? 'select':'']" @click="tabChange(2)">体侧报告</view>
        </view>

        <view v-if="tabType=='1'" class="section_1">
         <view class="ul">
           <view class="li" @click="opebViewWorkDetails({id :1})">
             <view class="left">
               <view class="title">篮球少儿课</view>
               <view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
             </view>
             <view class="right">
               <view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view>
               <view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view>
             </view>
           </view>
           <view class="li" @click="opebViewWorkDetails({id :1})">
             <view class="left">
               <view class="title">篮球少儿课</view>
               <view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
             </view>
             <view class="right">
               <view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view>
               <view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view>
             </view>
           </view>
           <view class="li" @click="opebViewWorkDetails({id :1})">
             <view class="left">
               <view class="title">篮球少儿课</view>
               <view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
             </view>
             <view class="right">
               <view v-if="Atype==2" class="btn" style="background-color: #29D3B4;">作业完成</view>
               <view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view>
             </view>
           </view>
           <view class="li" @click="opebViewWorkDetails({id :1})">
             <view class="left">
               <view class="title">篮球少儿课</view>
               <view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
             </view>
             <view class="right">
               <view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view>
               <view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view>
             </view>
           </view>
         </view>
        </view>



        <view v-if="tabType=='2'" class="section_2">
          <view class="ul">
            <view class="li" @click="openViewPhysicalExamination({id:1})">
              <view class="top">
                <view class="title">综合评分:96</view>
                <view class="hint">打败了99%学员</view>
              </view>
              <view class="bottom">测试时间：2020.05.30</view>
            </view>
              <view class="li" @click="openViewPhysicalExamination({id:1})">
              <view class="top">
                <view class="title">综合评分:96</view>
                <view class="hint">打败了99%学员</view>
              </view>
              <view class="bottom">测试时间：2020.05.30</view>
            </view>
              <view class="li" @click="openViewPhysicalExamination({id:1})">
              <view class="top">
                <view class="title">综合评分:96</view>
                <view class="hint">打败了99%学员</view>
              </view>
              <view class="bottom">测试时间：2020.05.30</view>
            </view>
              <view class="li" @click="openViewPhysicalExamination({id:1})">
              <view class="top">
                <view class="title">综合评分:96</view>
                <view class="hint">打败了99%学员</view>
              </view>
              <view class="bottom">测试时间：2020.05.30</view>
            </view>
              <view class="li" @click="openViewPhysicalExamination({id:1})">
              <view class="top">
                <view class="title">综合评分:96</view>
                <view class="hint">打败了99%学员</view>
              </view>
              <view class="bottom">测试时间：2020.05.30</view>
            </view>
          </view>
        </view>



      </view>

    </view>

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

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


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      formData:{},
      tabType:'1',//1=班级成员,2=作业任务
      Atype:1,//1=作业完成,2=作业未提交
    }
  },
  onLoad() {
  },
  methods: {
    //切换tab
    tabChange(tabType) {
      this.tabType = tabType
    },

    //打开课程详情
    openViewCourseInfo(item){
      uni.navigateTo({
        url: '/pages/coach/course/info'
      })
    },
    //打开学员详情页
    openViewStudentInfo(item){
      uni.navigateTo({
        url: '/pages/coach/student/info'
      })
    },

    //打开体测报告
    openViewPhysicalExamination(item){
      uni.navigateTo({
        url: '/pages/coach/student/physical_examination'
      })
    },

    //打开作业任务
    opebViewWorkDetails(item){
      uni.navigateTo({
        url: '/pages/coach/student/work_details'
      })
    },
  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
  min-height: 100vh;
}

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

//学员信息
.user_section {
  background-color: #29D3B4;
  padding-top: 58rpx;
  padding-bottom: 42rpx;
  .box{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15rpx;
    .left{
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 120rpx;
      .pic{
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
      }
      .btn_box{
        position: absolute;
        bottom: -18rpx;
        .btn{
          width: 120rpx;
          height: 38rpx;
          line-height: 40rpx;
          border-radius: 4rpx;
          background-color: rgba(245,154,35,1);
          color: rgba(255,255,255,1);
          font-size: 20rpx;
          text-align: center;
          border: 0rpx solid rgba(121,121,121,1);
        }
      }

    }
    .right{
      display: flex;
      flex-direction: column;
      gap: 18rpx;
      .item{
        color: #fff;
        display: flex;
        align-items: center;
        .name{
          font-size: 28rpx;
        }
        .age{
          margin-left: 20rpx;
          width: 128rpx;
          height: 42rpx;
          line-height: 42rpx;
          border-radius: 34rpx;
          background-color: rgba(255,255,255,1);
          color: rgba(51,51,51,1);
          font-size: 28rpx;
          text-align: center;
        }
      }
    }
  }
}

//课程信息
.course_section{
  position: relative;
  .main{
    position: relative;
    z-index: 2;
    padding: 0 24rpx;
    display: flex;
    justify-content: center;
    .course_box{
      padding: 42rpx 28rpx;
      width: 692rpx;
      border-radius: 20rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      position: relative;
      .item {
        display: flex;
        align-items: center;
        gap: 22rpx;
        .title {
          font-size: 28rpx;
          color: #333333;
        }

        .pic {
          width: 58rpx;
          height: 58rpx;
          border-radius: 50%;
        }

        .name {
          color: #333333;
          font-size: 24rpx;
        }

        .content {
          color: #AAAAAA;
          font-size: 24rpx;
        }
      }
      .tag{
        position: absolute;
        right: 0;
        top: 0;
        width: 110rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 0rpx 24rpx 0rpx 24rpx;
        background-color: rgba(236,128,141,1);
        color: rgba(255,255,255,1);
        font-size: 24rpx;
        text-align: center;
      }
      .btn{
        position: absolute;
        right: 30rpx;
        bottom: 50rpx;
        width: 130rpx;
        height: 48rpx;
        line-height: 48rpx;
        border-radius: 10rpx;
        background-color: rgba(41,211,180,0);
        color: rgba(50,219,224,1);
        font-size: 24rpx;
        text-align: center;
        font-family: -regular;
        border: 2rpx solid rgba(50,219,224,1);
      }
  }
}
  .bg_box{
    z-index: 1;
    width: 100%;
    height: 150rpx;
  }

  .bg_top{
    position: absolute;
    top: 0;
    background-color: #29D3B4;
  }
  .bg_bottom{
    top: 50%;
    position: absolute;
    background-color: #292929;
  }
}

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

  .section_box {
    background: #fff;
    border-radius: 16rpx;
    padding: 34rpx 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38rpx;
    .tag_box{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 112rpx;
      .item{
        width: 112rpx;
        font-size: 28rpx;
      }
      .select{
        color: #29D3B4;
      }
    }

    //出勤记录
    .section_1{
      width: 100%;
      .ul{
        display: flex;
        flex-direction: column;
        gap: 12rpx;
        .li{
          padding: 30rpx 20rpx;
          border: 1px solid #29D3B4;
          border-radius: 18rpx;
          background-color: rgba(41,211,180,0.16);
          font-size: 26rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left{
            display: flex;
            flex-direction: column;
            gap: 15rpx;
          }
          .right{
            .btn{
              width: 110rpx;
              height: 44rpx;
              line-height: 44rpx;
              border-radius: 8rpx;
              background-color: rgba(41,211,180,1);
              color: rgba(255,255,255,1);
              font-size: 20rpx;
              text-align: center;
            }
          }
        }
      }
    }
    //体测报告
    .section_2{
      width: 100%;
      .ul{
        display: flex;
        flex-direction: column;
        gap: 12rpx;
        .li{
          padding: 30rpx 20rpx;
          border: 1px solid #29D3B4;
          border-radius: 18rpx;
          background-color: rgba(41,211,180,0.16);
          font-size: 26rpx;
          display: flex;
          flex-direction: column;
          gap: 20rpx;
          .top{
            display: flex;
            align-items: center;
            gap: 40rpx;
            .title{
              font-size: 34rpx;
            }
            .hint{
              color: #F59A23;
              font-size: 24rpx;
            }
          }
          .bottom{}

        }
      }
    }


  }

}


</style>