<script setup lang="ts">
defineOptions({ name: 'MjFormImage' })

const props = withDefaults(
  defineProps<{
    modelValue: any
  }>(),
  {},
)

const emit = defineEmits(['update:modelValue'])
const fileObj = ref([] as any)

watch(
  () => props.modelValue,
  (val) => {
    fileObj.value = val ? [val] : []
  },
  { immediate: true },
)

watch(
  () => fileObj.value,
  () => {
    emit('update:modelValue', fileObj.value[0])
  },
)

const uploadMethod = async (params: any) => {
  // 保留文件属性
  params.option.file = params.file
}
</script>

<template>
  <vxe-upload
    v-model="fileObj"
    :limit-count="1"
    mode="image"
    :image-types="['png', 'jpg', 'jpeg']"
    :upload-method="uploadMethod"
  />
</template>

<style lang="scss" scoped></style>
