<template>
  <el-date-picker style="width: 180px"
                  type="daterange"
                  @change="change"
                  :shortcuts="short"
                  :value-format="format.valueFormat"
                  v-model="value"/>
</template>

<script setup name='XcDatePicker'>
import {shortcuts} from "@/data/shortcuts";


const props = defineProps({
  modelValue: {
    type: [String, Array],
    default: ''
  },
  type: {
    type: [String],
    default: 'daterange'
  }
})
const emits = defineEmits(['update:modelValue'])
const value = ref('')
const format = ref({
  valueFormat: 'YYYY-MM-DD'
})
const short = ref()

const change = (val) => {
  emits('update:modelValue', val)
}

watch(() => props.modelValue, () => {
  value.value = props.modelValue
}, {immediate: true})

onMounted(() => {
  if (props.type === 'daterange') {
    short.value = shortcuts
  }
})

</script>

<style scoped lang="scss">

</style>
