<template>
  <view class="main_box">
    <!--自定义导航栏-->
    <view class="navbar_section">
      <view class="title">首页</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">
            <view class="left_box">
              <view class="date_box">
                <text>12</text>
                <text>/</text>
                <text>24</text>
              </view>
              <view class="ratio">
                到课率：80%
              </view>
            </view>
            <view class="center_box">
              <view>班级：少年班</view>
              <view>时间：2020-05-25 15:30 - 17:30</view>
              <view>课室：302室
              </view>
              <view>课程：篮球少儿课
              </view>
            </view>
            <view class="right_box">
              <view class="tag" style="background:#fad24e;">上课中</view>
              <!--            <view class="tag" style="background:#1cd188;">待上课</view>-->
            </view>
          </view>
          <view class="li">
            <view class="left_box">
              <view class="date_box">
                <text>12</text>
                <text>/</text>
                <text>24</text>
              </view>
              <view class="ratio">
                到课率：80%
              </view>
            </view>
            <view class="center_box">
              <view>班级：少年班</view>
              <view>时间：2020-05-25 15:30 - 17:30</view>
              <view>课室：302室
              </view>
              <view>课程：篮球少儿课
              </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 class="section_3">
        <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">
            <view class="left_box">
              <view class="date_box">
                <text>12</text>
                <text>/</text>
                <text>24</text>
              </view>
              <view class="ratio">
                完成率：80%
              </view>
            </view>
            <view class="center_box">
              <view>班级：少年班</view>
              <view>时间：2020-05-25 15:30 - 17:30</view>
              <view>课程：篮球少儿课
              </view>
            </view>
            <view class="right_box">
              <!--            <view class="tag" style="background:#fad24e;">上课中</view>-->
              <view class="tag" style="background:#1cd188;">待批改</view>
            </view>
          </view>
          <view class="li">
            <view class="left_box">
              <view class="date_box">
                <text>12</text>
                <text>/</text>
                <text>24</text>
              </view>
              <view class="ratio">
                完成率：80%
              </view>
            </view>
            <view class="center_box">
              <view>班级：少年班</view>
              <view>时间：2020-05-25 15:30 - 17:30</view>
              <view>课程：篮球少儿课
              </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 user from '@/api/user.js';
import AQTabber from "@/components/AQ/AQTabber.vue"


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      list: [],
      likes: 0,
      type: 1,
      type1: 1,
      activity_id: 0,
      um_id: 0,
      urls: 'http://medication.zeyan.wang/'
    }
  },
  onLoad() {
    const um_id = uni.getStorageSync('um_id');
    this.um_id = um_id
    if (um_id == '') {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
    this.fetchData(this.um_id)
  },
  methods: {

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

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

    fetchData(um_id) {
      user.activity_index({
        um_id: um_id
      }).then(res => {
        console.log(res)
        if (res.status == 200) {
          if (res.data == null) {
            this.list = []
          } else {
            this.list = res.data
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      });
    },
    onPullDownRefresh() {
      this.fetchData(this.um_id)
    },
    publishing() {
      uni.navigateTo({
        url: '/pages/index/publishing'
      })
    },
    like(id, um_id) {
      user.activity_like({um_id: um_id, activity_id: id, type: 1}).then(res => {
        if (res.status == 200) {
          user.activity_index({
            um_id: um_id
          }).then(res => {
            console.log(res)
            if (res.status == 200) {
              this.list = res.data
            }
          });
          this.type = res.data.type
          this.activity_id = res.data.activity_id
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      });
    },
    collection(id, um_id) {
      user.activity_like({um_id: um_id, activity_id: id, type: 2}).then(res => {
        if (res.status == 200) {
          console.log(res)
          this.fetchData(this.um_id)
          this.type1 = res.data.type
          this.activity_id = res.data.activity_id
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      });
    },
    coninfo(item) {
      // user.coninfo({id:id}).then(res => {
      // 	if(res.status == 200){
      uni.setStorageSync('coninfo', item);
      uni.navigateTo({
        url: '/pages/index/coninfo'
      })
      // }else{
      // 	uni.showToast({
      // 		title: res.msg,
      // 		icon: 'none'
      // 	})
      // }
      // });
    },
    Comment(id) {
      uni.setStorageSync('actid', id);
      uni.navigateTo({
        url: '/pages/index/Comment'
      })
    }
  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

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

.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{
        position: relative;
        border-radius: 22rpx;
        background: #434544 100%;
        padding: 14rpx 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>