<template>
  <div class="one-date-time-range">
    <el-date-picker
      v-model="curDate"
      value-format="timestamp"
      format="yyyy-MM-dd"
      :placeholder="placeholder"
      :clearable="false"
      :default-value="defaultData.curDate"
      :disabled="disabled"
      @change="timeChange"
    >
    </el-date-picker>
    <span style="margin-right: 5px"></span>
    <el-time-picker
      v-model="startTime"
      value-format="timestamp"
      format="HH:mm"
      placeholder="开始时间"
      :clearable="false"
      :default-value="defaultData.startTime"
      :disabled="disabled"
      @change="timeChange"
    >
    </el-time-picker>
    <span style="margin: 0 3px">-</span>
    <el-time-picker
      v-model="endTime"
      value-format="timestamp"
      format="HH:mm"
      placeholder="结束时间"
      :clearable="false"
      :default-value="defaultData.endTime"
      :disabled="disabled"
      @change="timeChange"
    >
    </el-time-picker>
  </div>
</template>

<script>
import { getTimeDatestamp } from "@/plugins/utils";

export default {
  name: "one-date-time-range",
  props: {
    startDateTime: Number,
    endDateTime: Number,
    disabled: Boolean,
    placeholder: {
      type: String,
      default: "考试日期",
    },
  },
  data() {
    return {
      curDate: null,
      startTime: null,
      endTime: null,
      defaultData: {
        curDate: null,
        startTime: null,
        endTime: null,
      },
    };
  },
  created() {
    this.$watch(
      function () {
        return [this.startDateTime, this.endDateTime];
      },
      function () {
        this.updateData();
      },
      {
        immediate: true,
      }
    );
    this.initDefaultTime();
  },
  methods: {
    updateData() {
      if (this.startDateTime && this.endDateTime) {
        this.curDate = getTimeDatestamp(this.startDateTime);
        this.startTime = this.startDateTime;
        this.endTime = this.endDateTime;
      } else {
        this.startTime = null;
        this.endTime = null;
      }
    },
    initDefaultTime() {
      const curDate = getTimeDatestamp(Date.now());
      const hour = 60 * 60 * 1000;
      const startTime = curDate + 8 * hour;
      const endTime = curDate + 10 * hour;
      this.defaultData = {
        curDate,
        startTime,
        endTime,
      };
    },
    timeChange() {
      if (!this.curDate || !this.startTime || !this.endTime) {
        this.$emit("update:startDateTime", null);
        this.$emit("update:endDateTime", null);
        this.$emit("change", null);
        return;
      }

      // console.log(this.curDate, this.startTime, this.endTime);

      const curDate = getTimeDatestamp(this.curDate);
      const startDate = getTimeDatestamp(this.startTime);
      const startTime = curDate + this.startTime - startDate;
      const endDate = getTimeDatestamp(this.endTime);
      const endTime = curDate + this.endTime - endDate;

      this.$emit("update:startDateTime", startTime);
      this.$emit("update:endDateTime", endTime);
      this.$emit("change", [startTime, endTime]);
    },
  },
};
</script>
