<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <a-date-picker
        :placeholder="placeholder"
        :format="format"
        :show-time="isDateTime"
        disabled
        style="width: 220px"
      />
    </div>
    <div v-else>
      <a-date-picker
        v-if="!readerMode"
        v-model="internalValue"
        :format="format"
        :show-time="isDateTime"
        :placeholder="placeholder"
        allow-clear
        style="width: 220px"
      />
      <div v-else>{{ value }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DateTime',
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    mode: {
      type: String,
      default: 'DESIGN'
    },
    placeholder: {
      type: String,
      default: '请选择日期时间'
    },
    readerMode: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD HH:mm:ss'
    },
    type: {
      type: String,
      default: 'datetime'
    }
  },
  computed: {
    internalValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('update:value', val);
      }
    },
    isDateTime() {
      return this.type === 'datetime';
    }
  }
};
</script>

<style scoped>
/* 样式宽度保持一致 */
.a-date-picker {
  width: 220px;
}
</style>
