<template>

  <!--
    日期范围选择器:
     type: 'dateRange'
     v-model:        绑定数据
     beginName:      开始时间绑定名称（默认beginTime）
     endName:        结束时间绑定名称（默认endTime）
   -->
  <el-date-picker
    v-model="data"
    end-placeholder="结束日期"
    start-placeholder="开始日期"
    type="daterange"
    value-format="yyyy-MM-dd"
    :clearable="clearable"
    :disabled="disabled"
    :style="{width}"
  />

</template>

<script>

import { notNull } from './common'

export default {
  name: 'ADateRange',
  props: {
    label: {
      type: String,
      default: '创建时间'
    },
    beginTime: {
      type: String,
      default: undefined
    },
    endTime: {
      type: String,
      default: undefined
    },
    width: {
      type: String,
      default: '100%'
    },
    disabled: {
      type: Boolean
    },
    clearable: {
      type: Boolean
    }
  },
  computed: {
    data: {
      get () {
        if (notNull(this.beginTime) || notNull(this.endTime)) {
          return [this.beginTime, this.endTime]
        }
        return []
      },
      set (value) {
        if (value) {
          this.$emit('update:beginTime', value[0])
          this.$emit('update:endTime', value[1])
        } else {
          this.$emit('update:beginTime', undefined)
          this.$emit('update:endTime', undefined)
        }
      }
    }
  }
}
</script>
