<template>
  <span v-if="mode === 'look'">
    {{ time || '-' }}
  </span>
  <el-date-picker
    v-else
    v-model="time"
    :type="dateType"
    placeholder="请选择"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :value-format="valueFormat"
    :disabled="disabled"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Date, Array],
    default: () => ''
  },
  mode: {
    type: String,
    default: 'add'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  // 日期值的格式
  dateFormat: {
    type: String,
    default: ''
  },
  formItem: {
    type: Object,
    default: () => {}
  }
})

const emits = defineEmits(['update:modelValue'])
const time = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  }
})
const dateType = computed(() => {
  return props.formItem.inputType === 10 ? 'datetime' : 'date'
})
const valueFormat = computed(() => {
  return props.dateFormat
    ? props.dateFormat
    : props.formItem.inputType === 10
      ? 'YYYY-MM-DD HH:mm:ss'
      : 'YYYY-MM-DD'
})
</script>
