<!--课程-详情-->
<template>
  <view class="main_box">
    <view class="main_section">
      <view class="section_1">
        <view class="title_box">{{infoData.courseScheduleHasOne.course.course_name}}</view>
        <view class="ul">
          <view class="li">
            <view class="title">课程名称</view>
            <view class="content">{{infoData.courseScheduleHasOne.course.course_name}}</view>
          </view>

<!--          <view class="li">-->
<!--            <view class="title">班级</view>-->
<!--            <view class="content">{{infoData.classes_name}}</view>-->
<!--          </view>-->

          <view class="li">
            <view class="title">上课时间</view>
            <view class="content">{{infoData.courseScheduleHasOne.course_date}} {{infoData.courseScheduleHasOne.time_slot}}</view>
          </view>

          <view class="li">
            <view class="title">上课地址</view>
            <view class="content">{{infoData.courseScheduleHasOne.campus_name}} {{infoData.courseScheduleHasOne.venue.venue_name}}</view>
          </view>



          <view class="li">
            <view class="title">教练</view>
            <view class="content">{{infoData.courseScheduleHasOne.coach.name}}</view>
          </view>

          <view class="li">
            <view class="title">教练号码</view>
            <view class="content">{{infoData.courseScheduleHasOne.coach.phone}}</view>
          </view>

          <view class="li">
            <view class="title">扣除课时</view>
            <view class="content">{{infoData.courseScheduleHasOne.course.single_session_count}}个课时</view>
          </view>

          <!--状态0待上课1已上课2请假-->
          <view class="state_box" v-if="infoData.status == 1">
            <view>已上</view>
          </view>

          <view class="state_box_btn" v-if="infoData.status != 1">
      <!--状态0待上课1已上课2请假-->
            <view v-if="['2'].includes(String(infoData.status))"  @click="askForLeave(2)">取消请假</view>

            <view v-else @click="askForLeave(1)">请假</view>
          </view>

        </view>
      </view>
    </view>

    <!--  请假模态框-->
    <fui-modal class="leave_section" :buttons="[{text: '取消',plain: true}, {text: '保存'}]" width="600" :show="leaveShow" @cancel="closeLeaveModal" @click="closeLeaveModal">
      <text class="fui-title" style="font-size: 30rpx;padding: 15rpx">请假申请</text>
<!--      <view class="form_box" style="width: 100%;padding: 20rpx">-->
<!--        <view class="input_box" style="border: 1px solid #888888;font-size: 28rpx;">-->
<!--          <fui-input style="font-size: 28rpx;height: 60rpx;line-height: 60rpx;padding-left: 15rpx" :borderBottom="false"  placeholder="请输入请假原因" v-model="leaveFormData.reason"></fui-input>-->
<!--        </view>-->
<!--      </view>-->
    </fui-modal>

<!--取消请假-->
    <fui-dialog :show="cancelLeaveShow" content="确定取消吗?" maskClosable @click="submitCancelLeave" @close="cancelLeaveShow=false"></fui-dialog>
  </view>
</template>

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


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      memberInfo:{id:''},//当前登录用户的学生详情
      infoData:{id:''},//详情数据
      //筛选条件
      filteredData: {
        person_course_schedule_id: '',//人员与课程安排关系表id
      },

      leaveShow:false,//请假模态框显示状态

      //请假表单
      leaveFormData:{
        person_course_schedule_id: '',//人员与课程安排关系表id
        status: '',//状态0待上课1已上课2请假
        reason: '',//请假原因
        file_url: '',//附件
      },

      //取消请相关
      cancelLeaveShow:false,//取消请假模态框显示状态
    }
  },
  onLoad(options) {

    this.filteredData.person_course_schedule_id = options.person_course_schedule_id//人员与课程安排关系表id

    this.leaveFormData.person_course_schedule_id = options.person_course_schedule_id//人员与课程安排关系表id
  },
  onShow(){
    this.init()
  },
  methods: {
    //初始化
    async init(){
      await this.getMemberInit()
      await this.getInfo()
    },

    //获取学生登录人的学生资源详情
    async getMemberInit(){
      let res = await apiRoute.xy_memberInfo({})
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      this.memberInfo = res.data
    },

    //获取课程详情
    async getInfo(){
      let res = await apiRoute.xy_personCourseScheduleInfo({
        person_course_schedule_id: this.filteredData.person_course_schedule_id,
      })
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      this.infoData = res.data
    },


    //打开课时详情页
    openViewCourseInfo(item){
      this.$navigateTo({
        url: '/pages/coach/course/info'
      })
    },

    //请假/取消请假 type|1=请求,2=取消请假
    askForLeave(type){
      if(type == 1){
        //打开请假模态框
        this.leaveShow = true
      }else{
        //取消请假
        this.cancelLeaveShow = true
      }
    },
    //打开请假模态框
    openLeaveModal(){
      this.leaveShow = true
    },
    //关闭请假模态框
    closeLeaveModal(e){
      if(e.index == 0){
        //点击了取消
        this.leaveFormData.reason = ''
      }else{
        //点击了确定
        // if (!this.leaveFormData.reason){
        //   uni.showToast({
        //     title: '请输入请假原因',
        //     icon: 'none'
        //   })
        //   return
        // }
        this.submitLeave()//发送请假请求
      }
      this.leaveShow = false
    },
    //发送请假申请
    async submitLeave(){
      let data = {...this.leaveFormData}
      data.status = 2
      let res = await apiRoute.xy_personCourseScheduleEditStatus(data)
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      uni.showToast({
        title: res.msg,
        icon: 'success'
      })
      //延迟1s执行
      setTimeout(() => {
        this.init()
      }, 1000)
    },
    //发送取消请假申请
    async submitCancelLeave(e){
      if(e.index == 0){
        //点击了取消按钮
        return
      }

      //取消请假
      this.leaveFormData.reason = ''//请假原因
      let data = {...this.leaveFormData}
      data.status = 0
      let res = await apiRoute.xy_personCourseScheduleEditStatus(data)
      this.cancelLeaveShow = false
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      uni.showToast({
        title: res.msg,
        icon: 'success'
      })
      //延迟1s执行
      setTimeout(() => {
        this.init()
      }, 1000)
    },

  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

//自定义导航栏
.navbar_section{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #292929;
  .title{
    padding: 40rpx 0rpx;

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

    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: #fff;
    color: #333333;
    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); /* 旋转 */
        }
      }

      .state_box_btn{
        position: absolute;
        bottom: 50rpx;
        right: 10rpx;
        view{
          width: 160rpx;
          height: 60rpx;
          line-height: 60rpx;
          background-color: #00BE8C;
          border-radius: 8rpx;
          color: #fff;
          font-size: 28rpx;
          text-align: center;
        }
      }
    }
  }

  //请假模态框
  .leave_section {

  }

}


</style>