<script lang="ts" setup name="FileView">
import { ElMessage } from 'element-plus'
import { getFileUrl, uploadFile } from '@/api/common'
const props = defineProps({
// 数据绑定
  modelValue: {
    type: String || Array,
    default: '',
  },
  // 是否允许上传多个文件(多个为String[], 单个为string)
  isMulti: {
    type: Boolean,
    default: false,
  },
  // 类型
  type: {
    type: String,
    default: 'create', // create update detail
  },
  // 支持上传的文件
  accept: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['update:modelValue'])
const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})
const isPhoto = (name: string) => {
  return name.split('.')[1] === 'png' || name.split('.')[1] === 'jpg' || name.split('.')[1] === 'jpeg'
}

const url = ref('')
const urlList = ref<any[]>([])
const getPhoto = () => {
  if (!props.isMulti) {
    if (props.modelValue) {
      getFileUrl(props.modelValue).then((res) => {
        url.value = res.data
      })
    }
  }
  else {
    const data = props.modelValue.split(',').map((item: string) => {
      return {
        name: item,
        url: '',
      }
    })
    data.forEach((item: any) => {
      getFileUrl(item.name).then((res) => {
        item.url = res.data
      })
    })
    urlList.value = data
  }
}
onMounted(() => {
  getPhoto()
})
onUpdated(() => {
  getPhoto()
})
// 上传
const importRef = ref() // 上传组件
const onFileChange = (event: any) => {
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('file', event.target.files[0])
    uploadFile(fd).then((res) => {
      if (res.code === 200) {
        console.log(res.data, '上传的文件')
        value.value = event.target.files[0].name
        ElMessage.success('上传成功')
      }
      // 清空上传缓存
      importRef.value.value = ''
    }).catch(() => {
      // 清空上传缓存
      importRef.value.value = ''
    })
  }
}
// 单一文件 上传更换
const handler = () => {
  importRef.value.click()
}
</script>

<template>
  <div class="container">
    <!-- 上传组件 -->
    <input ref="importRef" style="display: none;" type="file" :accept="props.accept" @change="onFileChange">
    <div v-if="!props.isMulti">
      <el-image
        v-if="props.modelValue && isPhoto(props.modelValue)"
        :style="{ width: '50px', height: '50px' }"
        :src="url"
        :preview-src-list="[url]"
        fit="cover"
      />
      <el-link
        v-else :href="url" type="primary"
        style="margin-right: 10px;"
        target="_blank"
      >
        {{ props.modelValue }}
      </el-link>
      <el-button v-if="props.type !== 'detail'" type="primary" @click="handler">
        {{ props.modelValue ? '更换' : '上传' }}
      </el-button>
    </div>
  </div>
</template>