<template>
  <el-upload
    ref="simpleImgUpload"
    :file-list="fileList"
    class="mr-2 mb-2"
    action="#"
    list-type="picture-card"
    :accept="props.type == 'image' ? 'image/*' : ''"
    :show-file-list="true"
    :http-request="httpUpload"
    :before-upload="beforeUpload"
    v-bind="$attrs"
  >
    <Plus class="w-8"></Plus>
    <template #file="{ file }">
      <div class="el-upload-list__item-thumbnail">
        <el-image
          v-if="props.type == 'image' || isImage(file.name)"
          :src="file.url"
          class="h-full w-full"
          fit="cover"
        ></el-image>
        <div v-else class="flex justify-center items-center">
          <span>{{ file.name }}</span>
        </div>
      </div>

      <span class="el-upload-list__item-actions" v-if="!isPreview">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <el-icon><zoom-in /></el-icon>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <el-icon><Delete /></el-icon>
        </span>
      </span>
    </template>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img
      v-if="props.type == 'image' || isImage(dialogFileName)"
      w-full
      :src="dialogImageUrl"
      alt="Preview Image"
    />
    <span v-else>{{ dialogFileName }}</span>
  </el-dialog>
</template>
<script setup>
import { onMounted, ref, computed, watch, nextTick } from "vue";
import { uploadToOSS } from "@/utils";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  url: Array,
  name: String,
  type: String,
  sizeLimit: {
    type: Number,
    default: 0
  },
  isSimple: {
    type: Boolean,
    default: false
  },
  isPreview: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["update:url", "update:name"]);

const fileList = computed({
  get() {
    return props.url || [];
  },
  set(v) {
    emits("update:url", v);
  }
});

const disabled = false;
const isImage = url => /\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif)$/i.test(url);
const simpleImgUpload = ref();
const httpUpload = async options => {
  const url = await uploadToOSS(options.file, options.file.name);
  if (props.isSimple) {
    simpleImgUpload.value.clearFiles();
    fileList.value = [
      {
        name: options.file.name,
        url
      }
    ];
    simpleImgUpload.value.handleStart(options.file);
  } else {
    fileList.value.push({
      name: options.file.name,
      url
    });
  }
};
const beforeUpload = rawFile => {
  if (props.sizeLimit > 0 && rawFile.size / 1024 / 1024 > props.sizeLimit) {
    ElMessage.error(`文件大小不能超过${props.sizeLimit}Mb`);
    return false;
  }
  return true;
};

const dialogFileName = ref("");
const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove = file => {
  console.log(file);
  simpleImgUpload.value?.handleRemove(file);

  console.log("fileList", fileList.value);
};

const handlePictureCardPreview = file => {
  dialogFileName.value = file.name;
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};
</script>
<style lang="scss" scoped>
// ::v-deep .el-upload--picture-card {
//   min-width: 148px;
//   width: unset !important;
// }
</style>
