import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, unref, toDisplayString, withDirectives, createVNode, withModifiers, vShow } from 'vue';
import { getFileThumbByFileName } from '../../utils/file.mjs';
import { MeSvgIcon } from '../../svg-icon/index.mjs';

"use strict";
const _hoisted_1 = ["src"];
const _hoisted_2 = { style: { "margin-left": "6px", "margin-right": "6px", "height": "100%" } };
const _hoisted_3 = {
  class: "flex-center",
  style: { "width": "18px" }
};
var script = /* @__PURE__ */ defineComponent({
  __name: "upload-file-item",
  props: {
    width: { type: Number, required: true, default: 18 },
    height: { type: Number, required: true, default: 18 },
    index: { type: Number, required: true },
    name: { type: String, required: true },
    url: { type: String, required: false, default: "" },
    closeEvent: { type: Function, required: false, default: () => {
    } }
  },
  emits: ["closeEvent"],
  setup(__props, { emit: __emit }) {
    const deleteIconVisible = ref(false);
    const background = computed(() => {
      return deleteIconVisible.value ? "#e6e6e6" : "";
    });
    const props = __props;
    const emit = __emit;
    const handleMouseOver = () => {
      deleteIconVisible.value = true;
    };
    const handleMouseOut = () => {
      deleteIconVisible.value = false;
    };
    const uninstall = () => {
      emit("closeEvent", props.index);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: "fileItem me-effect",
          onMouseover: handleMouseOver,
          onMouseout: handleMouseOut,
          style: normalizeStyle({ background: background.value })
        },
        [
          createElementVNode("img", {
            src: unref(getFileThumbByFileName)(__props.name),
            style: {
              width: "18px",
              height: "18px"
            }
          }, null, 8, _hoisted_1),
          createElementVNode(
            "div",
            _hoisted_2,
            toDisplayString(props.name),
            1
            /* TEXT */
          ),
          createElementVNode("div", _hoisted_3, [
            withDirectives(createVNode(
              unref(MeSvgIcon),
              {
                name: "ri-close-line",
                class: "delete-icon",
                size: 18,
                style: { "color": "#000" },
                onClick: withModifiers(uninstall, ["stop"])
              },
              null,
              512
              /* NEED_PATCH */
            ), [
              [vShow, deleteIconVisible.value]
            ])
          ])
        ],
        36
        /* STYLE, NEED_HYDRATION */
      );
    };
  }
});

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