<template>
  <el-date-picker
    v-model="currenValue"
    type="datetimerange"
    unlink-panels
    range-separator="至"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    :picker-options="pickerOptions"
    :default-time="['00:00:00', '23:59:59']"
    :value-format="valueFormat"
    @change="onChange"
  />
</template>

<script>
import Constant from '../../utils/constant'

export default {
  name: 'DateScopePicker',
  props: {
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    startPlaceholder: {
      type: String,
      default: '开始时间'
    },
    endPlaceholder: {
      type: String,
      default: '结束时间'
    },
    startTimeKey: {
      type: String,
      required: true
    },
    endTimeKey: {
      type: String,
      required: true
    },
    mode: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      currenValue: [],
      pickerOptions: {
        // 日期范围快捷选择
        shortcuts: Constant.shortcuts
      }
    }
  },
  methods: {
    onChange(val) {
      if (val == null || val.length !== 2) {
        this.mode[this.startTimeKey] = null
        this.mode[this.endTimeKey] = null
      } else {
        this.mode[this.startTimeKey] = val[0]
        this.mode[this.endTimeKey] = val[1]
      }
    }
  }
}
</script>

<style scoped>

</style>
