import { defineComponent, ref, openBlock, createElementBlock, Fragment, createElementVNode, withModifiers, normalizeClass, createVNode, unref, renderSlot, createTextVNode, renderList, toDisplayString, createBlock, createCommentVNode } from 'vue';
import { ElMessage, ElProgress } from 'element-plus';
import { MeSvgIcon } from '../../svg-icon/index.mjs';
import FileUploadRule from '../../utils/upload/FileUploadRule.mjs';

"use strict";
const _hoisted_1 = { class: "me-upload-file__text" };
const _hoisted_2 = ["accept"];
const _hoisted_3 = { class: "me-upload-file__tip" };
const __default__ = defineComponent({
  name: "me-upload-file-drag"
});
var script = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    rules: { type: Array, required: true },
    uploadRequest: { type: Function, required: true },
    icon: { type: String, required: false, default: "ri-arrow-up-circle-line" },
    url: { type: String, required: true }
  },
  emits: ["uploadSuccess"],
  setup(__props, { emit: __emit }) {
    const emits = __emit;
    const props = __props;
    const dragover = ref(false);
    const inputRef = ref();
    const progress = ref(0);
    const tips = ref();
    const accept = ref();
    const fileUploadRule = new FileUploadRule();
    fileUploadRule.setChangeHandler(() => {
      tips.value = fileUploadRule.getUploadTips();
      accept.value = fileUploadRule.getAccept();
    });
    props.rules.forEach((item) => {
      fileUploadRule.add(item.name, item.size);
    });
    const handleUpload = (file) => {
      if (!fileUploadRule.check(file)) {
        ElMessage.error(fileUploadRule.getErrorMessage());
        return;
      }
      const formData = new FormData();
      formData.append("file", file);
      props.uploadRequest({
        url: props.url,
        method: "POST",
        data: formData,
        onUploadProgress: function(progressEvent) {
          progress.value = Math.round(progressEvent.loaded / progressEvent.total * 100);
        }
      }).then((res) => {
        emits("uploadSuccess", res);
      });
    };
    const inputClick = () => {
      inputRef.value?.click();
    };
    const handleInputChange = (e) => {
      const target = e.target;
      const selectedFile = target.files?.[0];
      console.log("\u{1F680} ~ handleInputChange ~ selectedFile:", selectedFile);
      selectedFile && handleUpload(selectedFile);
    };
    const onDrop = async (e) => {
      dragover.value = false;
      e.stopPropagation();
      const files = Array.from(e.dataTransfer.files);
      if (files.length > 1) {
        ElMessage.error("\u53EA\u80FD\u9009\u62E9\u4E00\u4E2A\u6587\u4EF6");
        return;
      }
      const uploadFile = files[0];
      handleUpload(uploadFile);
    };
    const onDragover = () => {
      dragover.value = true;
    };
    const onDragleave = (e) => {
      console.log("\u{1F680} ~ onDragleave ~ e:", e);
      if (!e.currentTarget.contains(e.relatedTarget)) dragover.value = false;
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        Fragment,
        null,
        [
          createElementVNode(
            "div",
            {
              class: normalizeClass(["me-upload-file-dragger is-drag", { "is-dragover": dragover.value }]),
              onClick: inputClick,
              onDrop: withModifiers(onDrop, ["prevent"]),
              onDragover: withModifiers(onDragover, ["prevent"]),
              onDragleave: withModifiers(onDragleave, ["prevent"])
            },
            [
              createVNode(unref(MeSvgIcon), {
                size: 24,
                name: __props.icon
              }, null, 8, ["name"]),
              createElementVNode("div", _hoisted_1, [
                renderSlot(_ctx.$slots, "tip", {}, () => [
                  _cache[0] || (_cache[0] = createTextVNode(
                    "\u62D6\u62FD\u6587\u4EF6\u4E0A\u4F20 \u6216 ",
                    -1
                    /* CACHED */
                  )),
                  _cache[1] || (_cache[1] = createElementVNode(
                    "em",
                    null,
                    "\u70B9\u51FB\u4E0A\u4F20",
                    -1
                    /* CACHED */
                  ))
                ])
              ]),
              createElementVNode("input", {
                ref_key: "inputRef",
                ref: inputRef,
                onChange: handleInputChange,
                accept: accept.value,
                type: "file",
                style: { "display": "none" }
              }, null, 40, _hoisted_2)
            ],
            34
            /* CLASS, NEED_HYDRATION */
          ),
          createElementVNode("div", _hoisted_3, [
            (openBlock(true), createElementBlock(
              Fragment,
              null,
              renderList(tips.value, (item) => {
                return openBlock(), createElementBlock(
                  "span",
                  {
                    key: item.name
                  },
                  " \u4E0A\u4F20\u6587\u4EF6\u652F\u6301 " + toDisplayString(item.name) + " \u683C\u5F0F\uFF0C \u5E76\u4E14\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u5927\u4E8E " + toDisplayString(item.size),
                  1
                  /* TEXT */
                );
              }),
              128
              /* KEYED_FRAGMENT */
            ))
          ]),
          progress.value > 0 && progress.value < 100 ? (openBlock(), createBlock(unref(ElProgress), {
            key: 0,
            percentage: progress.value,
            "stroke-width": 4,
            striped: "",
            "striped-flow": ""
          }, null, 8, ["percentage"])) : createCommentVNode("v-if", true)
        ],
        64
        /* STABLE_FRAGMENT */
      );
    };
  }
});

export { script as default };
//# sourceMappingURL=upload-file-drag.vue2.mjs.map
