<template>
  <div>
    <xy-dialog ref="dialog" :width="35" :is-show.sync="isShow" :type="'form'" title="时间设置" :form="form" :rules='rules'>
      <template v-slot:range>
        <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>


      <template v-slot:footerContent>
        <el-button type="primary" style='margin-left:5px;margin-bottom:5px;' @click="submit">确认</el-button>
        <el-button plain type="primary" ghost style='margin-left:5px;margin-bottom:5px;'
          @click="isShow=false">取消</el-button>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        index: 0,
        range: [],
        form: {
          range: ''
        },
        rules: {}
      }
    },
    created() {},
    methods: {
      setIndex(index, time) {
        this.index = index
        this.range = time
      },
      changeHHmm(e) {
        if (e) {
          this.range = e
        }
      },
      submit() {
        if (!this.range || this.range.length<1) {
          this.$message({
            type: 'warning',
            message: '请选择上课时间'
          })
          return
        }
        this.$emit("refreshTime", {
          index: this.index,
          range: this.range
        })
        this.isShow = false
      }
    },
    watch: {
      isShow(newVal) {
        // if(!){}
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .menu,
  ::v-deep .settings {
    flex-basis: 100%;
  }
</style>
