import { defineComponent, ref, openBlock, createElementBlock, createVNode, unref, withDirectives, vShow } from 'vue';
import { ElImage } from 'element-plus';
import { MeSvgIcon } from '../../svg-icon/index.mjs';

"use strict";
var script = /* @__PURE__ */ defineComponent({
  __name: "upload-image-item",
  props: {
    imgUrl: { type: String, required: false },
    imgId: { type: String, required: false },
    index: { type: Number, required: true }
  },
  emits: ["closeEvent"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const delIconVisible = ref(false);
    const handleMouseOver = () => {
      delIconVisible.value = true;
    };
    const handleMouseOut = () => {
      delIconVisible.value = false;
    };
    const uninstall = () => {
      emit("closeEvent", props.index);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          style: { "cursor": "pointer", "position": "relative" },
          onMouseover: handleMouseOver,
          onMouseout: handleMouseOut
        },
        [
          createVNode(unref(ElImage), {
            style: { "width": "100%", "height": "100%", "border-radius": "8px" },
            src: props.imgUrl,
            fit: "cover"
          }, null, 8, ["src"]),
          withDirectives(createVNode(
            unref(MeSvgIcon),
            {
              onClick: uninstall,
              class: "delete-icon",
              name: "ri-close-circle-fill",
              size: 20
            },
            null,
            512
            /* NEED_PATCH */
          ), [
            [vShow, delIconVisible.value]
          ])
        ],
        32
        /* NEED_HYDRATION */
      );
    };
  }
});

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