<!--课程-列表-->
<template>
  <view class="main_box">
    <!--自定义导航栏-->
    <view class="navbar_section">
      <view class="title">课表</view>
    </view>

    <view class="main_section">
      <view class="section_1">
        <view class="ul">
          <view class="li">
            <text>周日</text>
            <text>14</text>
            <text></text>
          </view>
          <view class="li">
            <text>周一</text>
            <text>14</text>
            <text></text>
          </view>
          <view class="li">
            <text>周二</text>
            <text>14</text>
            <text></text>
          </view>
          <view class="li">
            <text>周日</text>
            <text class="today">今</text>
            <text class=""></text>
          </view>
          <view class="li">
            <text>周一</text>
            <text>14</text>
            <text class="select_plan"></text>
          </view>
          <view class="li">
            <text>周二</text>
            <text>14</text>
            <text></text>
          </view>
          <view class="li">
            <text>周二</text>
            <text>14</text>
            <text></text>
          </view>
        </view>
      </view>

      <view class="section_2">
        <view class="item_box">
          <fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options_course" @click="clickCourse" @close="show_course=false" ref="ref_course">
            <view class="fui-filter__item" @tap="filterTapCourse">
              <text>{{course_name}}</text>
              <view class="fui-filter__icon" :class="{'fui-icon__ani':show_course}">
                <fui-icon name="turningdown" :size="32" color="#FFF"></fui-icon>
              </view>
            </view>
          </fui-dropdown-menu>
        </view>
        <view class="item_box">
          <fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options_classroom" @click="clickClassroom" @close="show_classroom=false" ref="ref_classroom">
            <view class="fui-filter__item" @tap="filterTapClassroom">
              <text>{{classroom_name}}</text>
              <view class="fui-filter__icon" :class="{'fui-icon__ani':show_classroom}">
                <fui-icon name="turningdown" :size="32" color="#FFF"></fui-icon>
              </view>
            </view>
          </fui-dropdown-menu>
        </view>

      </view>

      <view class="section_3">
        <view class="ul">
          <view class="li" @click="openViewCourseInfo({id:1})">
            <view class="top_box">
              <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="bottom_box">
              <view class="hint">
                已签到学生 (15/34)
              </view>
              <view class="list_box">
                <view class="list">
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                </view>
                <view class="btn">
                  详情
                </view>
              </view>
            </view>
          </view>
          <view class="li" @click="openViewCourseInfo({id:2})">
            <view class="top_box">
              <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="bottom_box">
              <view class="hint">
                已签到学生 (15/34)
              </view>
              <view class="list_box">
                <view class="list">
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                </view>
                <view class="btn">
                  详情
                </view>
              </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:{},

      //课程下拉菜单相关
      show_course:false,//是否显示下拉菜单
      //课程下拉菜单
      course_name:'课程',//选中的下拉菜单名称
      options_course: [
        {
          text: '请选择课程',
          value: '',
          checked: true
        }, {
          text: '羽毛球课程1',
          value: '1'
        }, {
          text: '篮球课程2',
          value: '2'
        }
      ],

      //课室下拉菜单相关
      show_classroom:false,//是否显示下拉菜单
      //课程下拉菜单
      classroom_name:'课室',//选中的下拉菜单名称
      options_classroom: [
        {
          text: '请选择课室',
          value: '',
          checked: true
        }, {
          text: '羽毛球201',
          value: '1'
        }, {
          text: '篮球室101',
          value: '2'
        }
      ],
    }
  },
  onLoad() {
  },
  methods: {
    //选中课程下拉菜单点击事件
    clickCourse(e){
      console.log(e)
      this.course_name = e.text
      this.show_course = true
    },
    //显示下拉菜单
    filterTapCourse() {
      //显示下拉框
      this.$refs.ref_course.show()
      this.show_course = true;
    },



    //选中课室
    clickClassroom(e){
      console.log(e)
      this.classroom_name = e.text
      this.show_classroom = true
    },
    //显示课室下拉菜单
    filterTapClassroom() {
      //显示下拉框
      this.$refs.ref_classroom.show()
      this.show_classroom = true;
    },

    //打开课时详情页
    openViewCourseInfo(item){
      uni.navigateTo({
        url: '/pages/coach/course/info'
      })
    },
  }
}
</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-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 24rpx;
  color: #FFFFFF;

  .section_1{
    background: #333333 100%;
    width: 100%;
    padding: 30rpx 28rpx;
    .ul{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10rpx;
        text{
          font-size: 24rpx;
          color: #FFFFFF;
          text-align: center;
        }
        text:nth-child(2){
          width: 44rpx;
          height: 44rpx;
        }
        text:nth-child(3){
          width: 8rpx;
          height: 8rpx;
        }
        .today{
          border-radius: 50%;
          background: #29D3B4;
          text-align: center;
          line-height: 42rpx;
        }
        .select_plan{
          background: #F59A23;
          border-radius: 50%;
        }
      }
    }
  }

  .section_2{
    margin-top: 30rpx;
    padding: 0 20rpx ;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20rpx;
    .item_box {
      width: 45%;
      .fui-filter__item {
        display: flex;
      }
    }
  }

  .section_3{
    margin-top: 36rpx;
    color: #fff;
    font-size: 24rpx;
    .ul{
      padding:  0 26rpx;
      display: flex;
      flex-direction: column;
      gap: 30rpx;
      .li{
        position: relative;
        border-radius: 22rpx;
        background: #434544 100%;
        padding: 14rpx 0;
        display: flex;
        flex-direction: column;
        .top_box{
          padding: 20rpx 30rpx;
          .center_box{
            display: flex;
            flex-direction: column;
            gap: 10rpx;
            view{}
          }
          .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;
            }
          }
        }
        .bottom_box{
          border-top: 1px dashed #F2F2F2;
          padding: 26rpx 16rpx 0 26rpx;
          .hint{
            color:#D7D7D7;
          }
          .list_box{
            margin-top: 22rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .list{
              display: flex;
              align-items: center;
              gap: 14rpx;
              .itme{
                image{
                  width: 48rpx;
                  height: 48rpx;
                  border-radius: 50%;
                }
              }
            }
            .btn{
              border: 1px solid #FAD04D;
              border-radius: 10rpx;
              background: #434544;
              color: #FAD04D;
              width: 110rpx;
              height: 60rpx;
              line-height: 55rpx;
              text-align: center;
              font-size: 24rpx;
            }
          }
        }
      }

    }
  }

}


</style>