<template>

  <!--
   日期选择器:
    type: 'datePicker'
    v-model:       绑定数据
    itemType:      element原生type,默认date（date,week，month，year）
    format:        自定义显示与返回的日期格式
    pickerOptions: elementUi原生picker-options
    placeholder:   日期选择框占位文本
-->
  <el-date-picker
    v-model="data"
    :type="itemType"
    :format="format"
    :value-format="format"
    :picker-options="pickerOptions"
    :placeholder="placeholder || `请选择${label}`"
    :style="{width}"
    :clearable="clearable"
    :disabled="disabled"
  />

</template>

<script>

export default {
  name: 'ADatePicker',
  props: {
    prop: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    value: {
      type: [String, Number],
      default: undefined
    },
    itemType: {
      type: String,
      default: 'date'
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd'
    },
    pickerOptions: {
      type: Object,
      default: undefined
    },
    placeholder: {
      type: String,
      default: undefined
    },
    width: {
      type: String,
      default: '100%'
    },
    disabled: {
      type: Boolean
    },
    clearable: {
      type: Boolean
    }
  },
  data () {
    return {
      data: this.value
    }
  },
  watch: {
    data (newVal) {
      this.$emit('update:value', newVal)
    },
    value (newVal) {
      this.data = newVal
    }
  }
}
</script>
