'use strict';

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

var vue = require('vue');
var file = require('../../utils/file.js');
var index = require('../../svg-icon/index.js');

"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__ */ vue.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 = vue.ref(false);
    const background = vue.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 vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: "fileItem me-effect",
          onMouseover: handleMouseOver,
          onMouseout: handleMouseOut,
          style: vue.normalizeStyle({ background: background.value })
        },
        [
          vue.createElementVNode("img", {
            src: vue.unref(file.getFileThumbByFileName)(__props.name),
            style: {
              width: "18px",
              height: "18px"
            }
          }, null, 8, _hoisted_1),
          vue.createElementVNode(
            "div",
            _hoisted_2,
            vue.toDisplayString(props.name),
            1
            /* TEXT */
          ),
          vue.createElementVNode("div", _hoisted_3, [
            vue.withDirectives(vue.createVNode(
              vue.unref(index.MeSvgIcon),
              {
                name: "ri-close-line",
                class: "delete-icon",
                size: 18,
                style: { "color": "#000" },
                onClick: vue.withModifiers(uninstall, ["stop"])
              },
              null,
              512
              /* NEED_PATCH */
            ), [
              [vue.vShow, deleteIconVisible.value]
            ])
          ])
        ],
        36
        /* STYLE, NEED_HYDRATION */
      );
    };
  }
});

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