'use strict';

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

var vue = require('vue');
var index$2 = require('../../video-viewer/index.js');
var index = require('../../svg-icon/index.js');
var index$1 = require('../../flex-box/index.js');

"use strict";
const _hoisted_1 = { style: { "align-items": "center" } };
const _hoisted_2 = ["src"];
var script = /* @__PURE__ */ vue.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 = vue.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 vue.openBlock(), vue.createElementBlock(
        "div",
        {
          style: vue.normalizeStyle([{ "position": "relative", "background-color": "#000", "border-radius": "8px", "cursor": "pointer" }, {
            width: props.width + "px",
            height: props.height + "px"
          }]),
          onMouseover: handleMouseOver,
          onMouseout: handleMouseOut
        },
        [
          vue.withDirectives(vue.createVNode(
            vue.unref(index.MeSvgIcon),
            {
              name: "ri-close-circle-fill",
              class: "delete-icon",
              size: 24,
              onClick: vue.withModifiers(uninstall, ["stop"])
            },
            null,
            512
            /* NEED_PATCH */
          ), [
            [vue.vShow, closeVisible.value]
          ]),
          vue.createVNode(vue.unref(index$1.MeFlexBox), {
            class: "video-mask",
            onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => vue.unref(index$2.MeVideoViewer)(props.url), ["stop"])),
            style: vue.normalizeStyle({
              width: props.width + "px",
              height: props.height + "px"
            })
          }, {
            default: vue.withCtx(() => [
              vue.createElementVNode("div", _hoisted_1, [
                vue.createVNode(vue.unref(index.MeSvgIcon), {
                  name: "ri-play-circle-line",
                  size: 48,
                  style: { "color": "#ffffff", "opacity": "1" }
                })
              ])
            ]),
            _: 1
            /* STABLE */
          }, 8, ["style"]),
          vue.createElementVNode("video", {
            src: props.url,
            class: "video",
            style: vue.normalizeStyle({
              width: props.width + "px",
              height: props.height + "px"
            })
          }, null, 12, _hoisted_2)
        ],
        36
        /* STYLE, NEED_HYDRATION */
      );
    };
  }
});

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