import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useProp } from './chunks/c26036df.js';
import { u as useEvent } from './chunks/d4058887.js';
import { a as useRef } from './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import './chunks/23e44913.js';
import './chunks/a02c5734.js';
import './chunks/d76d6172.js';
import './kun-icon.js';
import { C as CONST_SIX_CONFIG } from './chunks/cd857e99.js';
import './chunks/e5702756.js';
import './kun-image.js';
import { u as useHoverHook } from './chunks/1c3fc91c.js';
import { e as execWithSixLoad } from './chunks/cf049716.js';
import { r as requestUploadFile1 } from './chunks/ba37e29a.js';

var style = ":host {\n}\n\n.none {\n  display: none;\n}\n\n.image-width {\n  width: 100px;\n}\n\n.image {\n  width: 100px;\n  height: 100px;\n}";

const KunUploadFile = () => {
  const [hoverRef, isHovered] = useHoverHook();
  const [kunImageUrl, setKunImageUrl] = useProp("kunImageUrl");
  const refLabel = useRef();
  const updateImg = useEvent("MyChange", {
    composed: true,
    bubbles: true
  });

  const updateImageFile = async event => {
    await execWithSixLoad(async () => {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.set("file", file);
      const r = await requestUploadFile1(formData);
      const fileName = `${CONST_SIX_CONFIG.FILE_DOMAIN}${r.msg}`;
      updateImg({
        url: r.msg
      });
      setKunImageUrl(fileName);
    });
  };

  const clk = () => {
    refLabel.current.click();
  };

  return h("host", null, h("style", null, style), h("div", null, h("div", {
    class: "flex flex-row image relative"
  }, kunImageUrl != null && h("img", {
    src: kunImageUrl,
    onclick: clk,
    ref: hoverRef,
    class: "cursor-pointer"
  }), kunImageUrl == null && h("div", {
    class: "w-full w-full flex items-center hover:bg-orange-400 hover:text-white"
  }, h("div", {
    class: "cursor-pointer text-center mx-auto",
    onclick: clk
  }, "\u8BF7\u4E0A\u4F20\u56FE\u7247")), isHovered && h("div", {
    class: "cursor-pointer image-width text-center absolute bg-black-300 text-white bottom-0 mx-auto"
  }, "\u4E0A\u4F20\u56FE\u7247")), h("input", {
    type: "file",
    class: "none",
    ref: refLabel,
    id: "asd",
    onchange: evt => updateImageFile(evt),
    ignore: true
  })));
};

KunUploadFile.props = {
  kunImageUrl: {
    type: String,
    reflect: true
  }
};
var kunUploadFile = getComponentOrDefine("kun-upload-file", KunUploadFile);

export default kunUploadFile;
//# sourceMappingURL=kun-upload-file.js.map
