import { defineComponent, ref, openBlock, createElementBlock, normalizeStyle, withDirectives, createVNode, unref, withModifiers, vShow, withCtx, createElementVNode } from 'vue';
import { MeVideoViewer } from '../../video-viewer/index.mjs';
import { MeSvgIcon } from '../../svg-icon/index.mjs';
import { MeFlexBox } from '../../flex-box/index.mjs';

"use strict";
const _hoisted_1 = { style: { "align-items": "center" } };
const _hoisted_2 = ["src"];
var script = /* @__PURE__ */ defineComponent({
  __name: "upload-video-item",
  props: {
    width: { type: Number, required: false, default: 160 },
    height: { type: Number, required: false, default: 90 },
    index: { type: Number, required: false },
    url: { type: String, required: false, default: "" },
    closeEvent: { type: Function, required: false, default: () => {
    } }
  },
  emits: ["closeEvent"],
  setup(__props, { emit: __emit }) {
    const closeVisible = ref(false);
    const props = __props;
    const handleMouseOver = () => {
      closeVisible.value = true;
    };
    const handleMouseOut = () => {
      closeVisible.value = false;
    };
    const uninstall = () => {
      emit("closeEvent", props.index || 0);
    };
    const emit = __emit;
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          style: normalizeStyle([{ "position": "relative", "background-color": "#000", "border-radius": "8px", "cursor": "pointer" }, {
            width: props.width + "px",
            height: props.height + "px"
          }]),
          onMouseover: handleMouseOver,
          onMouseout: handleMouseOut
        },
        [
          withDirectives(createVNode(
            unref(MeSvgIcon),
            {
              name: "ri-close-circle-fill",
              class: "delete-icon",
              size: 24,
              onClick: withModifiers(uninstall, ["stop"])
            },
            null,
            512
            /* NEED_PATCH */
          ), [
            [vShow, closeVisible.value]
          ]),
          createVNode(unref(MeFlexBox), {
            class: "video-mask",
            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(MeVideoViewer)(props.url), ["stop"])),
            style: normalizeStyle({
              width: props.width + "px",
              height: props.height + "px"
            })
          }, {
            default: withCtx(() => [
              createElementVNode("div", _hoisted_1, [
                createVNode(unref(MeSvgIcon), {
                  name: "ri-play-circle-line",
                  size: 48,
                  style: { "color": "#ffffff", "opacity": "1" }
                })
              ])
            ]),
            _: 1
            /* STABLE */
          }, 8, ["style"]),
          createElementVNode("video", {
            src: props.url,
            class: "video",
            style: normalizeStyle({
              width: props.width + "px",
              height: props.height + "px"
            })
          }, null, 12, _hoisted_2)
        ],
        36
        /* STYLE, NEED_HYDRATION */
      );
    };
  }
});

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