<!--课程-详情-->
<template>
  <view class="main_box">
    <view class="main_section">
      <view class="section_1">
        <view class="title_box">青少儿篮球课</view>
        <view class="ul">
          <view class="li">
            <view class="title">课程名称</view>
            <view class="content">青少年篮球课</view>
          </view>

          <view class="li">
            <view class="title">班级</view>
            <view class="content">班级名称</view>
          </view>

          <view class="li">
            <view class="title">上课时间</view>
            <view class="content">2020.03.25 15:30-17:00</view>
          </view>

          <view class="li">
            <view class="title">上课地址</view>
            <view class="content">xxxx体育馆302室</view>
          </view>

          <view class="li">
            <view class="title">课程名称</view>
            <view class="content">青少年篮球课</view>
          </view>

          <view class="li">
            <view class="title">教练</view>
            <view class="content">包子皮</view>
          </view>

          <view class="li">
            <view class="title">教练号码</view>
            <view class="content">18888888888</view>
          </view>

          <view class="li">
            <view class="title">扣除课时</view>
            <view class="content">2个课时</view>
          </view>

          <view class="state_box">
            <view>已上</view>
          </view>
          </view>
        </view>
      </view>
  </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: 30rpx 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 24rpx;
  color: #FFFFFF;

  .section_1{
    border-radius: 22rpx;
    padding: 20rpx 40rpx;
    background: #333333 100%;
    width: 100%;
    .title_box{
      padding: 10rpx;
      padding-left: 30rpx;
      font-size: 32rpx;
    }
    .ul{
      padding: 40rpx 10rpx;
      padding-bottom: 350rpx;
      margin-top: 10rpx;
      border-top: 1px solid #555555;
      display: flex;
      flex-direction: column;
      gap: 40rpx;

      position: relative;

      .li{
        display: flex;
        gap: 72rpx;
        .title{
          width: 120rpx;
          text-align: right;
        }
        .content{}
      }
      .state_box{
        position: absolute;
        bottom: 50rpx;
        right: 10rpx;
        view{
          width: 154rpx;
          height: 154rpx;
          border-radius: 50%;
          background-color: rgba(41,211,180,0.17);
          color: rgba(41,211,180,1);
          font-size: 26rpx;
          text-align: center;
          line-height: 150rpx;
          transform: rotate(-35deg); /* 旋转 */
        }
      }
    }
  }
}


</style>