<template>
  <div class="date-range-pick">
    <date-picker
      class="data-range-item"
      v-model="starttime"
      @change="changeHandle"
      :format="format"
      value-format="yyyy-MM-dd HH:mm:ss"
      type="datetime"
      :picker-options="pickerOptions1"
      :default-time="defaultStartTime"
    >
    </date-picker>
    <date-picker
      class="data-range-item"
      v-model="endtime"
      @change="changeHandle"
      :format="format"
      value-format="yyyy-MM-dd HH:mm:ss"
      type="datetime"
      :picker-options="pickerOptions2"
      :default-time="defaultEndTime"
    >
    </date-picker>
  </div>
</template>

<script>
export default {
  name: 'date-range-picker',
  props: {
    label: {
      type: String,
      default: '时间范围',
    },
    noLabel: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Array,
      default: () => [],
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd HH:mm',
    },
    defaultStartTime: {
      type: String,
      default: '00:00:00',
    },
    defaultEndTime: {
      type: String,
      default: '00:00:00',
    },
  },
  data() {
    let starttime = null,
      endtime = null;
    if (this.value.length) {
      [starttime, endtime] = this.value;
      starttime = new Date(starttime);
      endtime = new Date(endtime);
    }
    return {
      starttime: starttime,
      endtime: endtime,
      pickerOptions1: {
        disabledDate: time => {
          return this.endtime
            ? time.getTime() > new Date(this.endtime).getTime()
            : false;
        },
      },
      pickerOptions2: {
        disabledDate: time => {
          return this.starttime
            ? time.getTime() < new Date(this.starttime).getTime()
            : false;
        },
      },
    };
  },
  watch: {
    value(newVal) {
      let starttime = null,
        endtime = null;
      if (newVal && newVal instanceof Array && newVal.length) {
        [starttime, endtime] = this.value;
        starttime = starttime ? starttime : null;
        endtime = endtime ? endtime : null;
      }
      this.starttime = starttime;
      this.endtime = endtime;
    },
    // starttime(newVal) {
    //   this.$emit('input', [this.starttime, this.endtime]);
    // },
    // endtime(newVal) {
    //   this.$emit('input', [this.starttime, this.endtime]);
    // },
  },
  methods: {
    changeHandle(val) {
      this.$emit('input', [this.starttime, this.endtime]);
    },
  },
};
</script>

<style lang="scss">
@import '../../assets/styles/variables.scss';

.date-range-pick {
  display: flex;
  justify-content: space-between;
  min-width: 262px;
  .data-range-item.el-input {
    width: 126px;
  }
  .el-input__prefix {
    transform: translate(-13px);
  }
  .el-input__suffix {
    right: -5px;
  }
}
@media screen and (min-width: $bigScreenWidth) {
  .date-range-pick {
    min-width: 324px;
    .data-range-item.el-input {
      width: 157px;
    }
    .el-input__prefix {
      transform: translate(-24px);
    }
    .el-input__suffix {
      right: 2px;
    }
  }
}
</style>

