<script setup>
import { getFullUrl } from '~/utils/helper'
import close from '/images/close.png'
import upload1 from '/images/upload1.png'
import upload2 from '/images/upload2.png'
import { getFileType } from "~/utils/helper"

const props = defineProps({
  modelValue: String,
  tip: String,
  type: String,
  accept: String,
  aliyun: String
})
const emits = defineEmits(['update:modelValue'])

const tips = ref(props.tip || '上传比例限制1:1')
const type = ref('')
const uploadType = ref(props.type || 'img')
const accept = ref(props.accept || '.jpg,.jpeg,.webp,.png')
const fileUrl = ref('')

watch(
  () => props.modelValue, (val) => {
    if (val) {
      fileUrl.value = val
      type.value = getFileType(fileUrl.value.split("?")[0] || fileUrl.value)
    }
    else {
      type.value = 'other'
    }
  },
  { immediate: true },
)

watch(
  () => fileUrl.value,
  () => {
    emits('update:modelValue', fileUrl.value)
  },
)

const handleCompile = (fileList) => {
  let data = fileList[0];
  if (data && data.response.data.oss_url) {
    fileUrl.value = data.response.data.oss_url;
    type.value = getFileType(fileUrl.value);
  }
}
</script>

<template>
  <div v-if="fileUrl !== ''">
    <div class="preview relative h-75px rounded-4px" style="min-width: 75px;">
      <template v-if="type === 'office'">
        <iframe :src="`https://view.officeapps.live.com/op/view.aspx?src=${getFullUrl(fileUrl)}`" class="h-full w-full" frameborder="0" />
      </template>
      <template v-else-if="type === 'pdf'">
        <object type="application/pdf" :data="getFullUrl(fileUrl)" style="width: 100%; height: 100%;" />
      </template>
      <template v-else-if="type === 'video'">
        <video class="h-full w-full" :src="getFullUrl(fileUrl)" controls />
      </template>
      <template v-else-if="type === 'audio'">
        <audio class="h-40px w-260px" :src="getFullUrl(fileUrl)" controls />
      </template>
      <template v-else-if="type === 'image'">
        <div class="h-full">
          <img class="h-full object-contain" :src="getFullUrl(fileUrl)">
        </div>
      </template>
      <el-result v-else-if="type === 'other'" icon="error" title="" sub-title="错误提示：文件格式不支持" />

      <div class="close" @click="fileUrl = ''">
        <img :src="close" alt="">
      </div>
    </div>
  </div>
  <file-upload-progress v-else v-model:part="fileUrl" class="hideList" :limit="1" :aliyun="aliyun" :accept="accept" @compile="handleCompile">
    <template #default>
      <div class="upload-img flex items-center pl-20px">
        <div class="h-56px w-56px mr-12px flex items-center justify-center rounded-50px bg-white">
          <img v-if="uploadType === 'img'" :src="upload1" alt="">
          <img v-else :src="upload2" alt="">
        </div>
        <div v-html="tips"></div>
      </div>
    </template>
  </file-upload-progress>
</template>

<style lang="scss" scoped>
.close {
  position: absolute;
  top: -8px;
  right: -20px;
  cursor: pointer;
}
.preview {
  * {
    border-radius: inherit;
  }
}
::v-deep .el-result {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-align: center;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  & .icon-error {
    margin-right: 20px;
  }
}
</style>