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

<script>
export default {
  name: 'DateTimeRange',
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    mode: {
      type: String,
      default: 'DESIGN'
    },
    placeholder: {
      type: Array,
      default() {
        return ['开始时间', '结束时间'];
      }
    },
    readerMode: {
      type: Boolean,
      default: false
    },
    value: {
      type: [Array, String], // 兼容字符串或数组
      default: ''
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD HH:mm:ss'
    },
    type: {
      type: String,
      default: 'datetimerange'
    },
    showLength: {
      type: Boolean,
      default: false
    },
    timeLength: {
      type: String,
      default: ''
    }
  },
  computed: {
    internalValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('update:value', val);
      }
    },
    isDateTime() {
      return this.type === 'datetimerange';
    }
  }
};
</script>

<style scoped>
/* 可按需补充样式 */
</style>
