<template>
  <div>
    <el-form :model="taskForm" ref="form" label-width="100px">
      <el-form-item
        label="日期"
        :rules="[{ required: true, message: '请选择日期' }]"
        prop="date"
      >
        <el-date-picker
          style="width: 410px"
          v-model="taskForm.date"
          value-format="yyyy-MM-dd"
          type="date"
          :picker-options="rangeDate(rangeStart, rangeEnd)"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="开始时间"
        :rules="[{ required: true, message: '请选择开始时间' }]"
        prop="startTimer"
      >
        <el-time-picker
          style="width: 410px"
          @change="changeStartTime"
          v-model="taskForm.startTimer"
          format="HH:mm"
          value-format="HH:mm"
          placeholder="选择时间范围"
          :picker-options="{
            selectableRange: `07:00:00-22:00:00`,
          }"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item
        label="结束时间"
        :rules="[{ required: true, message: '请选择结束时间' }]"
        prop="endTimer"
      >
        <el-time-picker
          style="width: 410px"
          v-model="taskForm.endTimer"
          format="HH:mm"
          value-format="HH:mm"
          placeholder="选择时间范围"
          :disabled='!taskForm.startTimer'
          :picker-options="{
            selectableRange: `${taskForm.startTimer}:00-22:00:00`,
          }"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item
        label="乐团"
        :rules="[{ required: true, message: '请选择乐团' }]"
        prop="musicGroupId"
      >
        <el-select
          v-model="taskForm.musicGroupId"
          clearable
          filterable
          style="width: 410px !important"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in MusicGroupList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
           <p style="color:red">注意:请确认当天该乐团有课，否则将无法提交乐团巡查表</p>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import { addInspectionItemPlan, resetInspectionItemPlan } from "../../api";
import dayjs from "dayjs";
export default {
  props: ["taskInfo", "rangeStart", "rangeEnd", "MusicGroupList", "itemId"],
  data() {
    return {
      taskForm: {
        date: "",
        endTimer:'',
        startTimer: '',
        musicGroupId: "",
        userId:''
      },
      timerStr:''
    };
  },
  mounted() {
    this.checkTimes()
        this.userId = this.$route.query.teacher;
    if (this.taskInfo) {
      this.taskForm.date = this.taskInfo.planStart;
      this.taskForm.startTimer = dayjs(this.taskInfo.planStart).format('HH:mm:ss')
      this.taskForm.endTimer = dayjs(this.taskInfo.planEnd).format('HH:mm:ss');
      this.taskForm.musicGroupId = this.taskInfo.musicGroupId;

    }
  },
  methods: {
    rangeDate(start, end) {
      let that = this
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (end && start) {
            // 判断时间 当前时间在时间段之前 之中 之后
            if(that.timerStr == 'before'){
               return (
              new Date(end).getTime() <= time.getTime() ||
              new Date(start).getTime() - 86400000 >= time.getTime()
            )
            }else if(that.timerStr == 'middle'){
              return (
              new Date(end).getTime() <= time.getTime() ||
              new Date().getTime() - 86400000 >= time.getTime()
            )
            }else{
               return true
            }

          }
        },
      };
    },
    submitInfo(val) {
      this.$refs.form.validate(async (res) => {
        if (res) {
          let planStart =
            dayjs(this.taskForm.date).format("YYYY-MM-DD") +
            " " +
           this.taskForm.startTimer;
          let planEnd =
            dayjs(this.taskForm.date).format("YYYY-MM-DD") +
            " " +
           this.taskForm.endTimer;
          if (val) {
            console.log("提交修改");
            try {
              const result = await resetInspectionItemPlan({
                musicGroupId: this.taskForm.musicGroupId,
                planStart,
                planEnd,
                itemId: this.itemId,
                id: this.taskInfo.id,
                userId:this.userId
              });
                this.$message.success("提交成功");
              this.$emit("refreshList", this.taskForm.date);
            } catch (e) {
              console.log(e);
            }
            // 修改
          } else {
            // 新增
            try {
              const result = await addInspectionItemPlan({
                musicGroupId: this.taskForm.musicGroupId,
                planStart,
                planEnd,
                itemId: this.itemId,
                userId:this.userId
              });
              this.$message.success("提交成功");
              this.$emit("refreshList", this.taskForm.date);
            } catch (e) {}
          }
        }
      });
    },
    changeStartTime(val) {
      this.taskForm.endTimer = "";
    },
     checkTimes(){

    // rangeStart, rangeEnd,now
    let startTime = dayjs(this.rangeStart).valueOf()
    let entTime = dayjs(this.rangeEnd).valueOf()
    let now = dayjs(new Date()).valueOf()
    if(now<startTime){
      this.timerStr = 'before'
    }else if(startTime<now&&now<entTime){
       this.timerStr = 'middle'
    }else if(now>entTime){
      this.timerStr = 'after'
    }
  }
  },

};
</script>
<style lang="scss" scoped>
</style>
