'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var elementPlus = require('element-plus');
var index = require('../../svg-icon/index.js');

"use strict";
var script = /* @__PURE__ */ vue.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 = vue.ref(false);
    const handleMouseOver = () => {
      delIconVisible.value = true;
    };
    const handleMouseOut = () => {
      delIconVisible.value = false;
    };
    const uninstall = () => {
      emit("closeEvent", props.index);
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          style: { "cursor": "pointer", "position": "relative" },
          onMouseover: handleMouseOver,
          onMouseout: handleMouseOut
        },
        [
          vue.createVNode(vue.unref(elementPlus.ElImage), {
            style: { "width": "100%", "height": "100%", "border-radius": "8px" },
            src: props.imgUrl,
            fit: "cover"
          }, null, 8, ["src"]),
          vue.withDirectives(vue.createVNode(
            vue.unref(index.MeSvgIcon),
            {
              onClick: uninstall,
              class: "delete-icon",
              name: "ri-close-circle-fill",
              size: 20
            },
            null,
            512
            /* NEED_PATCH */
          ), [
            [vue.vShow, delIconVisible.value]
          ])
        ],
        32
        /* NEED_HYDRATION */
      );
    };
  }
});

exports.default = script;
//# sourceMappingURL=upload-image-item.vue2.js.map
