<template>
    <template v-if="mode === 'DESIGN'" >
      <el-date-picker size="medium" disabled :type="type" :placeholder="placeholder"></el-date-picker>
    </template>
    <template v-else>
      <template v-if="perm === 'E'">
        <el-date-picker v-model="_value" :value-format="format" size="medium" clearable :type="type" :placeholder="placeholder"></el-date-picker>
      </template>
      <template v-else-if="perm === 'R'">
        {{_value}}
      </template>
    </template>
</template>


<script setup>
import {defineProps,defineEmits} from 'vue'
const emit = defineEmits()
const props = defineProps({
  mode:{
    type: String,
    default: 'DESIGN'
  },
  required:{
    type: Boolean,
    default: false
  },
  value: {
    default: null
  },
  perm: {
    type: String,
    default: 'E'
  },
  format:{
    type: String,
    default: 'YYYY-MM-DD HH:mm'
  },
  placeholder:{
    type: String,
    default: '请选择日期时间'
  }
})
const _value = computed({
  get() {
    return props.value;
  },
  set(value) {
    emit('update:value', value)
  }
})
watch(()=>props.value,(value)=>{
  _value.value = value
})

const type = computed(()=>{
  switch (props.format){
    case 'YYYY': return 'year';
    case 'YYYY-MM': return 'month';
    case 'YYYY-MM-DD': return 'date';
    case 'YYYY-MM-DD HH:mm': return 'datetime';
    default: return 'datetime';
  }
})
</script>

<style scoped>

</style>
