<template>
  <div class="dataPanelComponent">
    <datePanelComponent
      @pick="handlePick"
      :value="value"
      :disabledDateMethod="disabledDateMethod"
    ></datePanelComponent>
  </div>
</template>

<script>
import datePanelComponent from "element-ui/packages/date-picker/src/panel/dateCopy";
export default {
  name: "ElDatePickerPanel",
  components: { datePanelComponent },
  props: {
    startTime: {
      type: Number,
      default: 0,
    },
    endTime: {
      type: Number,
      default: 0,
    },
    defaultValue: {
      default: "",
    },
  },
  created() {
    if (this.defaultValue) {
      this.value = new Date(this.defaultValue);
    }
  },
  computed: {
    disabledDateMethod() {
      return (item) => {
        if (this.startTime && this.endTime) {
          return (
            new Date(item).getTime() > this.endTime ||
            this.startTime > new Date(item)
          );
        } else {
          return false;
        }
      };
    },
  },
  data() {
    return {
      value: new Date()
    };
  },
  watch:{
    defaultValue:{
      deep:true,
      handler(nv){
        if(nv){
          this.value = new Date(this.defaultValue);
        }
      }
    }
  },
  methods: {
    handlePick(time) {
      this.value = time;
      let daySart = new Date(
        new Date(new Date(time).toLocaleDateString()).getTime()
      );
      let dayEnd = new Date(
        new Date(new Date(time).toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1
      );
      this.$emit("selectDate", {
        value: this.value,
        valueStart: daySart,
        valueEnd: dayEnd,
      });
    },
  },
};
</script>

<style>
</style>