<template>
  <div>
    <el-upload
      :class="{ hide: disabled || fileList.length == limit }"
      :id="uploaderId"
      drag
      multiple
      :action="actionUrl"
      list-type="picture-card"
      :on-preview="preview"
      :before-remove="deleteComfirm"
      :on-remove="remove"
      :data="params"
      :on-success="uploadSuccess"
      :file-list="fileList"
      :disabled="disabled"
      :on-exceed="onExceed"
      :limit="limit"
    >
      <div :class="['upload-plus-icon']">+</div>
      <div :class="['upload-text']">{{ uploadText }}</div>
    </el-upload>
    <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
      <el-image
        :src="dialogImageUrl"
        style="height: 100%; width: 100%"
      ></el-image>
    </el-dialog>
  </div>
</template>
<script setup>
import { defineComponent, computed, ref, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import store from "../store/index";

const emit = defineEmits(["onPreview", "onUploadFileList", "onRemoveFileList"]);
const props = defineProps({
  uploaderId: {
    type: String,
    default: "uploader",
  },
  limit: {
    type: Number,
    default: 100,
  },
  params: Object,
  actionUrl: String,
  disabled: {
    type: Boolean,
    default: false,
  },
  fileList: Array,
  uploadText: {
    type: String,
    default: "拖拽或点击上传",
  },
});
let dialogVisible = ref(false);
let dialogImageUrl = ref("");
function preview(file) {
  dialogVisible.value = true;
  dialogImageUrl.value = file.url;
}

function deleteComfirm() {
  return new Promise((resolve, reject) => {
    ElMessageBox.confirm("确认删除?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        resolve(true);
      })
      .catch(() => {
        reject;
      });
  });
}

function remove(file, list) {
  emit("onRemoveFileList", { file, list });
}
function uploadSuccess(res, file, list) {
  emit("onUploadFileList", list);
}
function onExceed(files, fileList) {
  ElMessage({
    message: `超出文件数量限制 (最大数量:${props.limit})`,
    type: "warning",
  });
}
onMounted(() => {});
</script>
<style scoped>
.upload-plus-icon {
  height: 15%;
  color: rgb(139, 147, 156);
  line-height: 100px;
  font-size: 40px;
  font-weight: 200;
}
.upload-text {
  height: 25%;
  color: rgb(139, 147, 156);
}

.dn {
  display: none;
}
:deep().el-upload-dragger {
  width: 148px !important;
  height: 148px !important;
}

.hide:deep() .el-upload--picture-card {
  display: none !important;
}
</style>
