<template>
  <div v-loading="loading" class="addteacherCourse">
    <div class="head-title">
      <span @click="CommonJump('teacherCourseList')" class="blue point">排课管理</span> / 编辑排课管理
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:50%">
        <el-form-item label="课程名称" prop="CourseName" class="is-required" size="small">
          <el-input v-model="addMsg.CourseName" placeholder="请输入课程名称" class="w400" />
        </el-form-item>
        <el-form-item label="课程分类" prop="CourseClassId" class="is-required">
          <el-select class="w400" style="margin-right: 10px;" v-model="addMsg.CourseClassId" size="small" @change="getCoursedata(addMsg.CourseClassId)"
                     placeholder="请选择" >
            <el-option v-for="item in CourseClassList" :key="item.ID" :label="item.ClassName+' '+'/'+' '+item.Title" :value="item.ID" >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="老师" prop="TeacherId" class="is-required">
          <el-select class="w400" style="margin-right: 10px;" v-model="addMsg.TeacherId" size="small"
                     placeholder="请选择" >
            <el-option v-for="item in teacherList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直播房间" >
          <el-select class="w400" style="margin-right: 10px;" v-model="addMsg.RoomId" size="small"
                     placeholder="请选择" >
            <el-option v-for="item in LiveList" :key="item.roomid" :label="item.name" :value="item.roomid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排课日期" prop="StudyDate" class="is-required">
          <el-date-picker
            v-model="addMsg.StudyDate"
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间" prop="StudyStartDate" class="is-required" >
          <el-time-picker
            v-model="addMsg.StudyStartDate"
            size="small"
            format="HH:mm"
            value-format="HH:mm"
            @change="getTime()"
            :picker-options="{
      selectableRange: '00:00:00 - 23:59:00'
    }"

            placeholder="选择开始时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="StudyEndDate" class="is-required">
          <el-time-picker
            :disabled="jiesushow"
            v-model="addMsg.StudyEndDate"
            size="small"
            format="HH:mm"
            value-format="HH:mm"
            :picker-options="{
            selectableRange: '00:00:00 - 23:59:00',
               minTime: addMsg.StudyStartDate
              }"
            placeholder="选择结束时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="点数" prop="PointNum" class="is-required" size="small">
          <el-input v-model="addMsg.PointNum" placeholder="请输入点数" class="w400" type="number" :min="0" :disabled='dianshushow'/>
        </el-form-item>
        <el-form-item label="最少约课时长" prop="MinDuration" class="is-required" size="small">
          <el-input v-model="addMsg.MinDuration" placeholder="请输入时长" class="w400" type="number" :min="0" :disabled="jiesushow"/>
        </el-form-item>
        <el-form-item label="每课时长" prop="StudyDuration" class="is-required" size="small" >
          <el-input v-model="addMsg.StudyDuration" placeholder="请输入时长" class="w400" type="number" :min="0" @blur="getTime()">
            <template slot="append">
              <el-radio v-model="addMsg.DurationUnit" v-for="(item,index) in DurationList" :label="item.Id" :key="index">{{item.Name}}</el-radio>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>

  </div>

</template>
<script>


  export default {
    components: {

    },
    data() {
      return {
        addMsg: {
          ID: 0,
          CourseClassId:'',
          TeacherId:'',
          StudyDate:'',
          StudyStartDate:'08:00',
          StudyEndDate:'08:00',
          PointNum:0,
          CourseName:'',
          MinDuration:0,
          StudyDuration:0,
          DurationUnit:1,
          IsPublic:0,
          RoomId:'',
        },
        rules: {
          CourseName:[{
            required: true,
            message: '请选择课程名称',
            trigger: 'blur'
          }],
          CourseClassId: [{
            required: true,
            message: '请选择课程分类',
            trigger: 'blur'
          }],
          StudyDuration: [{
            required: true,
            message: '请输入最少每课时长',
            trigger: 'blur'
          }],
          MinDuration: [{
            required: true,
            message: '请输入最少约课时长',
            trigger: 'blur'
          }],
          StudyDate:[{
            required: true,
            message: '请选择课排课日期',
            trigger: 'blur'
          }],
          PointNum: [{
            required: true,
            message: '请输入点数',
            trigger: 'blur'
          }],
          TeacherId: [{
            required: true,
            message: '请选择老师',
            trigger: 'blur'
          }],
          Duration: [{
            required: true,
            message: '时长不能为空',
            trigger: 'blur'
          }],
          StudyStartDate: [{
            required: true,
            message: '请选择开始时间',
            trigger: 'blur'
          }],
          StudyEndDate: [{
            required: true,
            message: '请选择结束时间',
            trigger: 'blur'
          }],
        },
        loading: false,
        CourseClassList:[],
        DurationList:[],
        teacherList:[],
        LiveList:[],
        dianshushow:false,
        jiesushow:false,
        selectdata:{},
      };
    },
    created() {

      if(this.$route.query.ID){
        this.getData(this.$route.query.ID)
      }
      this.getCourseClassList()//课程分类枚举
      this.getDurationList()//课程时长单位枚举
      this.getTeacherList()
      this.getLiveList()
    },
    methods: {
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            this.addMsg.PointNum = Number(this.addMsg.PointNum)
            this.addMsg.MinDuration = Number(this.addMsg.MinDuration)
            this.addMsg.StudyDuration = Number(this.addMsg.StudyDuration)
            this.apipost("/api/Point/GetSetTeacherCourse", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.CommonJump('teacherCourseList');
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            })
          } else {
            return false;
          }
        });
      },
      getTeacherList() {
        this.apipost("/api/Education/GetTeacherList", {}, res => {
          if (res.data.resultCode == 1) {
            this.teacherList = res.data.data
          } else {
            this.Error(res.data.message);
          }
        })
      },
      getLiveList(){
        this.apipost("/api/LiveHouse/GetLiveListByLiveStatus", {pageIndex: 1,
          pageSize: 9999999,}, res => {
          if (res.data.resultCode == 1) {
            this.LiveList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        })
      },
      getCourseClassList(){
        this.apipost("/api/Point/GetPointCourseClassList", {}, res => {
          if(res.data.resultCode==1){
            this.CourseClassList = res.data.data;
          }else {
            this.Info(res.data.message);
          }

        })
      },
      getDurationList(){
        this.apipost("/api/Point/GetDurationUnitEnumList", {}, res => {
          if(res.data.resultCode==1){
            this.DurationList = res.data.data;
          }else {
            this.Info(res.data.message);
          }

        })
      },

      getCoursedata(item){
        this.CourseClassList.forEach(x=>{
          if(x.ID == item){
              this.selectdata = x
              this.addMsg.PointNum = x.PointNum;
              this.addMsg.StudyDuration = x.Duration;
              this.addMsg.DurationUnit = x.DurationUnit;
              this.addMsg.IsPublic = x.IsPublic;
              if(x.IsPublic==1 ){//免费课程和公开课 不要点数
                this.addMsg.PointNum = 0;
                this.dianshushow = true
              }else {
                this.dianshushow = false
              }
              if(x.StudentNumType==2){//一对多的处理
                  this.jiesushow = true;
                this.addMsg.MinDuration = x.Duration;
                this.getTime()
              }else {
                this.jiesushow = false
              }
          }
        })
      },
      getTime(){
        let select = this.selectdata
        if(select.StudentNumType && select.StudentNumType==2){//判断是否存在并且等于2
          let start1=this.addMsg.StudyStartDate.split(":");
          let startAll=parseInt(start1[0]*60)+parseInt(start1[1]);

          let end =0
          if(this.addMsg.DurationUnit ==1){//分钟的时候
             end = startAll+ Number(this.addMsg.StudyDuration)

          }else {//小时的时候
             end = startAll + Number(this.addMsg.StudyDuration*60)
          }
          this.addMsg.StudyEndDate = ((Math.floor(end / 60)).toString().length < 2 ? "0" + (Math.floor(end / 60)).toString() :
            (Math.floor(end / 60)).toString()) + ":" + ((end % 60).toString().length < 2 ? "0" + (end % 60).toString() : (end % 60).toString());
        }
      },
      getData(ID) {
        this.loading = true;
        this.apipost("/api/Point/GetTeacherCourseModel", {
          ID: ID
        }, res => {
          this.loading = false;
          if(res.data.resultCode==1){
            let tempData = res.data.data;
            this.addMsg.ID = tempData.ID;
            this.addMsg.CourseClassId = tempData.CourseClassId;
            this.addMsg.TeacherId = tempData.TeacherId;
            this.addMsg.StudyDate = tempData.StudyDate;
            this.addMsg.StudyStartDate = tempData.StudyStartDate;
            this.addMsg.StudyEndDate = tempData.StudyEndDate;
            this.addMsg.PointNum = tempData.PointNum;
            this.addMsg.CourseName = tempData.CourseName;
            this.addMsg.MinDuration = tempData.MinDuration;
            this.addMsg.StudyDuration = tempData.StudyDuration;
            this.addMsg.DurationUnit = tempData.DurationUnit;
            this.addMsg.IsPublic = tempData.IsPublic;
            this.addMsg.RoomId = tempData.RoomId;
          }
        })
      }
    },
    mounted() {
    }
  };
</script>
<style>
  .app-add-cat .el-checkbox-group {
    font-size: 14px !important;
  }

  .app-add-cat .el-checkbox {
    margin-right: 0;
  }

  .app-add-cat .el-dialog__body {
    padding: 10px 20px !important;
  }

  .app-add-cat .tag-box .tag-item {
    margin-right: 5px;
  }

  .app-add-cat .tag-box {
    margin: 20px 0;
  }

  .app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
  }

  .app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
  }

  .app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
  }



  .addteacherCourse .blue {
    color: #409EFF;

  }

  .addteacherCourse .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
  .addteacherCourse .gez_list{
    /*width: 650px;*/
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;

  }
  .addteacherCourse .quyu{
    background-color: #f4f4f5;
    color: #909399;
    padding: 10px;
    line-height: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 5px;
  }
  .addteacherCourse .el-tag + .el-tag {
    margin-left: 10px;
  }
  .addteacherCourse .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .addteacherCourse .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

</style>
