<template>
  <div class="date-range-pick">
    <date-picker
      ref="startTime"
      class="data-range-item"
      v-model="starttime"
      @change="changeHandle"
      :format="format"
      :value-format="valueFormat"
      :type="type"
      @input="startPickHandle"
      :picker-options="defaultStartOptions"
      :default-time="defaultStartTime"
      :clearable="clearable"
    >
    </date-picker>
    <date-picker
      ref="endTime"
      class="data-range-item"
      v-model="endtime"
      @change="changeHandle"
      :format="format"
      :value-format="valueFormat"
      :type="type"
      @input="endPickHandle"
      :picker-options="defaultEndOptions"
      :default-time="defaultEndTime"
      :clearable="clearable"
    >
    </date-picker>
  </div>
</template>

<script>
export default {
  name: 'date-range-picker',
  props: {
    type: {
      type: String,
      default: 'datetime',
    },
    label: {
      type: String,
      default: '时间范围',
    },
    noLabel: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Array,
      default: () => [],
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss',
    },
    defaultStartTime: {
      type: String,
      default: '00:00:00',
    },

    defaultEndTime: {
      type: String,
      default: '00:00:00',
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss',
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    startPickerOptions: {
      type: Object,
    },
    endPickerOptions: {
      type: Object,
    },
  },
  data() {
    let starttime = null,
      endtime = null;
    if (this.value.length) {
      [starttime, endtime] = this.value;
      starttime = starttime ? new Date(starttime) : starttime;
      endtime = endtime ? new Date(endtime) : endtime;
    }
    return {
      starttime: starttime,
      endtime: endtime,
      defaultStartOptions: this.startPickerOptions
        ? this.startPickerOptions
        : {
            disabledDate: time => {
              return this.endtime
                ? time.getTime() > new Date(this.endtime).getTime()
                : false;
            },
          },
      defaultEndOptions: this.endPickerOptions
        ? this.endPickerOptions
        : {
            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 ? new Date(starttime) : null;
        endtime = endtime ? new Date(endtime) : null;
      }
      this.starttime = starttime;
      this.endtime = endtime;
    },
  },
  methods: {
    changeHandle(val) {
      let starttime = this.$refs.startTime.formatToValue(this.starttime);
      let endtime = this.$refs.endTime.formatToValue(this.endtime);
      this.$emit('input', [starttime, endtime]);
      this.$emit('change', [starttime, endtime]);
    },
    startPickHandle(val) {
      this.$emit('pick:start', val);
    },
    endPickHandle(val) {
      this.$emit('pick:end', val);
    },
  },
};
</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>

