<template>
  <div>
    <xy-dialog ref="dialog" :width="35" :is-show.sync="isShow" :type="'form'" title="时间设置" :form="form"
    :rules='rules' @submit="submit">
      <template v-slot:start_time>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>上课时间：
          </div>
          <div class="xy-table-item-content">
            <el-time-picker @change="changeHHmm" is-range v-model="range" value-format="HH:mm" format="HH:mm"
              range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
            </el-time-picker>
          </div>
        </div>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {show,save} from "@/api/course/coursePeriod.js"
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        id:'',
        type:'add',
        index: 0,
        range: [],
        form: {
          start_time: '',
          end_time:''
        },
        rules: {
          start_time:[{
            required:true,
            message:'请选择上课时间'
          }]
        }
      }
    },
    created() {},
    methods: {
      setIndex(index, time ,course_id) {
        console.log("time",time)
        this.index = index
        this.form.id = time.course_period_id
        this.range = time.range
        if(time.length>0){
          this.form.start_time = time.range[0]
          this.form.end_time = time.range[1]
        }
        this.form.course_id = course_id
      },
      changeHHmm(e) {
        if (e) {
          this.form.start_time = e[0]
          this.form.end_time = e[1]
        }else{
          this.form.start_time = ''
          this.form.end_time = ''
        }
      },
      submit() {
        if(this.id){
          this.form.id = this.id
        }
        console.log("form",this.form)
        // return
        save(this.form).then(res=>{
          this.$emit("refreshTime", {
            index: this.index,
            time:{
              range: this.range,
              course_period_id:res.id
            }
          })
          this.isShow = false
        })

      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {

        } else {
          this.id = ''
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">

</style>
