<template>
  <view class="main_box">
    <!--自定义导航栏-->
    <view class="navbar_section">
      <view class="left"></view>
      <view class="title">待办</view>
      <view class="right" @click="openObjAddView()">发布作业</view>
    </view>

    <view class="main_section">
<!--      <view class="section_1">-->
<!--        <view class="top">-->
<!--          <view class="user">-->
<!--            <view class="pic">-->
<!--              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>-->
<!--            </view>-->
<!--            <view class="name">包子皮</view>-->
<!--          </view>-->
<!--          <view class="right">-->
<!--            <view>-->
<!--              <text class="title">到课率统计</text>-->
<!--              <text>28%</text>-->
<!--            </view>-->
<!--            <view>-->
<!--              <text class="title" @click="openObjAddView()">发布作业</text>-->
<!--              <text></text>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="bottom"></view>-->
<!--        <view class="text_box">-->
<!--          <text>月授课数</text>-->
<!--          <text>12</text>-->
<!--          <text>节，月负责学员</text>-->
<!--          <text>188</text>-->
<!--          <text>名</text>-->
<!--        </view>-->
<!--      </view>-->

<!--      <view class="section_2">-->
<!--        <view class="left_box">-->
<!--          <view>-->
<!--            <text>课程</text>-->
<!--            <text>预告</text>-->
<!--          </view>-->
<!--          <view>-->
<!--            <text>5/28周五 15:30~17:30</text>-->
<!--            <text>301室篮球少儿课程</text>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="rigth_box">-->
<!--          <view>详情</view>-->
<!--        </view>-->
<!--      </view>-->

      <!--最近课程-->
      <view class="section_3">
        <view class="title_box">
          <view class="top_box">
            <text>最近课程</text>
            <view></view>
          </view>
          <view class="line"></view>
        </view>
        <view class="ul">
          <!--          上课中-->
          <view class="li" v-for="(v,k) in infoData.course_list" :key="k" @click="openViewCourseInfoList(v)">
            <view class="top_box">
              <view class="title">课程：{{ v.courses_name }}</view>
              <view class="title">时间：{{ v.date_time }} {{ v.time_slot.split(',')[0] }}-{{ v.time_slot.split(',')[1] }}
              </view>
              <view class="title">地点：{{ v.address }}</view>
            </view>

            <view class="botton_box" v-if="v.status == 1">
              <view class="box">
                <view>已签到学生（{{ v.sign_count }}/{{ v.students_count }}）</view>
                <view>
                  查看
                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
                </view>
              </view>
              <!--              <view class="box">-->
              <!--                <view>尚未发布作业</view>-->
              <!--                <view></view>-->
              <!--              </view>-->
            </view>
            <view class="botton_box" v-else>
              <view class="box">
                <view>应到学生（{{ v.students_count }}）</view>
                <view>
                  查看
                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
                </view>
              </view>
            </view>

            <view
                v-if="v.status == 1"
                class="tag"
                style="background:#fad24e;">上课中
            </view>
            <view
                v-else
                class="tag"
                style="background:#1cd188;">待上课
            </view>
          </view>

        </view>
      </view>

      <!--作业批改-->
      <view class="section_4">
        <view class="title_box">
          <view class="top_box">
            <text>作业批改</text>
            <view @click="openObjListView()">全部</view>
          </view>
          <view class="line"></view>
        </view>
        <view class="ul">
          <view class="li" v-for="(v,k) in infoData.task_list" :key="k" @click="openViewWorkDetails(v)">
            <view class="left_box">
              <view class="date_box">
                <text>{{v.wc_count}}</text>
                <text>/</text>
                <text>{{v.student_count}}</text>
              </view>
              <view class="ratio">
                完成率：{{v.rate}}%
              </view>
            </view>
            <view class="center_box">
              <view>班级：{{v.class_name}}</view>
              <view>时间：{{v.send_time}}</view>
              <view>课程：{{v.courses_name}}
              </view>
            </view>
            <view class="right_box">
              <!--            <view class="tag" style="background:#fad24e;">上课中</view>-->
              <view class="tag" style="background:#1cd188;">待批改</view>
            </view>
          </view>

        </view>
      </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 {
      //首页数据
      infoData:{
        course_list:[],//课程列表
        task_list:[],//作业批改
      },
    }
  },
  onLoad() {},
  onShow() {
    //this.init()//初始化
  },
  methods: {

    //初始化
    async init(){
      await this.getInfo()
    },

    //获取首页信息
    async getInfo(){
      let res = await memberApi.jlIndex({})
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      this.infoData = res.data
    },


    //打开-发布作业页
    openObjAddView(){
      this.$navigateTo({
        url: '/pages/coach/job/add'
      })
    },

    //打开作业列表页
    openObjListView(){
      this.$navigateTo({
        url: '/pages/coach/job/list'
      })
    },

    //跳转页面-课程详情
    openViewCourseInfoList(item){
      let id = item.id
      this.$navigateTo({
        url: `/pages/coach/course/info_list?id=${id}`
      })
    },

    //跳转页面-作业详情
    openViewWorkDetails(item){
      let id = item.id
      this.$navigateTo({
        url: `/pages/coach/student/work_details?id=${id}`
      })
    },

  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

//自定义导航栏
.navbar_section{
  padding: 0 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #29d3b4;
  view{
    width: 30%;
    text-align: center;
  }
  .left{
    text-align: left;
  }
  .title{
    padding: 40rpx 0rpx;

    /* 小程序端样式 */
    // #ifdef MP-WEIXIN
    padding: 80rpx 0rpx;
    // #endif

    font-size: 30rpx;
    color: #fff;
  }
  .right{
    padding: 20rpx 0;
    font-size: 26rpx;
    color: #fff;
    text-align: right;
  }
}

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


  .section_1{
    background: #FFFFFF 100%;
    height: 264rpx;
    border-radius: 14rpx;
    margin: 28rpx auto;
    padding: 28rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 28rpx;
    .top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user{
        display: flex;
        align-items: center;
        gap: 20rpx;
        .pic{
          width: 144rpx;
          height: 144rpx;
          border-radius: 50%;
          image{
            width: 100%;
            height: 100%;
          }
        }
      }
      .right{
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        view{
          display: flex;
          gap: 10rpx;
          .title{
            width: 148rpx;
            text-align: right;
          }
        }
      }
    }
    .bottom{
      padding: 0 44rpx;
    }
  }

  .section_2{
    border-radius: 60rpx;
    padding: 28rpx 36rpx;
    background: #29D3B4 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left_box{
      display: flex;
      view{
        display: flex;
        flex-direction: column;
        text{}
      }
      view:nth-child(1){
        padding-right: 10rpx;
        border-right: 2px solid #fff;
      }
      view:nth-child(2){
        padding-left: 10rpx;
      }
    }
    .rigth_box{
      view{
        width: 106rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        border-radius: 25rpx;
        background: #32baa1;
        font-size: 24rpx;
      }
    }
  }

  .section_3{
    margin-top: 36rpx;
    color: #fff;
    font-size: 24rpx;
    .title_box{
      display: flex;
      flex-direction: column;
      .top_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        text{
          font-size: 30rpx;
        }
      }
      .line{
        width: 90rpx;
        height: 2px;
        background: #29D3B4;
      }
    }
    .ul{
      margin-top: 30rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .li{
        border: 1px solid #00E5BB;
        position: relative;
        border-radius: 22rpx;
        background: #434544 100%;
        padding: 14rpx 20rpx;
        padding-bottom: 44rpx;
        display: flex;
        flex-direction: column;
        .top_box{
          padding-bottom: 18rpx;
          border-bottom: 1px dashed #F2F2F2;
          display: flex;
          flex-direction: column;
          gap: 18rpx;
          .title{}
        }
        .botton_box{
          padding-top: 18rpx;
          display: flex;
          flex-direction: column;
          gap: 18rpx;
          color: #D7D7D7;
          .box{
            display: flex;
            justify-content: space-between;
            view{
              display: flex;
              align-items: center;
            }
          }
        }
        .tag{
          position:absolute;
          top: 0rpx;
          right: 0rpx;
          padding: 10rpx;
          width: 102rpx;
          text-align: center;
          font-size: 24rpx;
          border-bottom-left-radius: 20rpx;
          border-top-right-radius: 20rpx;
        }
      }

    }
  }

  .section_4{
    margin-top: 36rpx;
    color: #fff;
    font-size: 24rpx;
    .title_box{
      display: flex;
      flex-direction: column;
      .top_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        text{
          font-size: 30rpx;
        }
      }
      .line{
        width: 90rpx;
        height: 2px;
        background: #29D3B4;
      }
    }
    .ul{
      margin-top: 30rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .li{
        position: relative;
        border-radius: 22rpx;
        background: #434544 100%;
        padding: 32rpx 0;
        display: flex;
        align-items: center;
        .left_box{
          margin-left: 28rpx;
          width: 146rpx;
          display: flex;
          flex-direction: column;
          gap: 10rpx;
          .date_box{
            display: flex;
            font-size: 48rpx;
            text:nth-child(1){
              color: #29D3B4;
            }
          }
          .ratio{
            color: #AAAAAA;
          }
        }
        .center_box{
          margin-left: 52rpx;
          display: flex;
          flex-direction: column;
          gap: 10rpx;
        }
        .right_box{
          .tag{
            position:absolute;
            top: 0rpx;
            right: 0rpx;
            padding: 10rpx;
            width: 102rpx;
            text-align: center;
            font-size: 24rpx;
            border-bottom-left-radius: 20rpx;
            border-top-right-radius: 20rpx;
          }

        }
      }

    }
  }

}


</style>