import { defineComponent, useModel, watch, openBlock, createElementBlock, withDirectives, createVNode, unref, vShow, Fragment, renderList, createCommentVNode, normalizeStyle, withCtx, createElementVNode, mergeProps, renderSlot, mergeModels } from 'vue';
import { ElInput } from 'element-plus';
import { useVideo } from './composables/useVideo.mjs';
import { uuid } from '../../utils/uuid.mjs';
import { MeSvgIcon } from '../../svg-icon/index.mjs';
import { MeFlexBox } from '../../flex-box/index.mjs';
import { MeUpload } from '../../upload/index.mjs';
import './upload-video-item.vue.mjs';
import script$1 from './upload-video-item.vue2.mjs';

"use strict";
const _hoisted_1 = { class: "me-upload-video" };
const _hoisted_2 = {
  key: 0,
  class: "video-wrapper-item"
};
const _hoisted_3 = ["index"];
const _hoisted_4 = { style: { "align-items": "center", "height": "24px" } };
const __default__ = defineComponent({
  name: "me-upload-video"
});
var script = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: /* @__PURE__ */ mergeModels({
    uploadRequest: { type: Function, required: false, default: () => Promise.resolve() },
    videoRequest: { type: Function, required: false, default: () => Promise.resolve() },
    url: { type: String, required: false, default: "" },
    title: { type: String, required: false, default: "\u4E0A\u4F20\u89C6\u9891" },
    width: { type: Number, required: false, default: 80 },
    height: { type: Number, required: false, default: 80 },
    videoWidth: { type: Number, required: false, default: 160 },
    videoHeight: { type: Number, required: false, default: 90 },
    maxCount: { type: Number, required: false, default: 1 },
    closeEvent: { type: Function, required: false, default: () => {
    } },
    uploadRules: { type: null, required: false, default: [{ name: "mp4", size: 1024 * 1024 * 50 }] },
    module: { type: String, required: false }
  }, {
    "modelValue": { type: String },
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props, { expose: __expose }) {
    const props = __props;
    const inputVal = useModel(__props, "modelValue");
    const videoStore = useVideo(props);
    watch(
      inputVal,
      (newValue) => {
        if (videoStore.allowWatch) {
          videoStore.importData(newValue || "");
        } else {
          setTimeout(() => {
            videoStore.allowWatch = true;
          }, 100);
        }
      },
      { immediate: true }
    );
    const uploadCompleteEventHandler = (uploadResultList) => {
      videoStore.fileList.value.push(uploadResultList[0]);
      videoStore.allowWatch = false;
      inputVal.value = videoStore.getValue();
    };
    const setFileList = (uploadResultList) => {
      uploadResultList.forEach((item) => {
        item.domuuid = uuid();
        videoStore.fileList.value.push(item);
      });
      videoStore.allowWatch = false;
      inputVal.value = videoStore.getValue();
    };
    __expose({
      setFileList,
      openUpload: videoStore.openUpload,
      closeUpload: videoStore.closeUpload
    });
    const removeItem = (index) => {
      console.log(index);
      videoStore.fileList.value.splice(index, 1);
      videoStore.allowWatch = false;
      inputVal.value = videoStore.getValue();
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        withDirectives(createVNode(unref(ElInput), {
          modelValue: inputVal.value,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputVal.value = $event)
        }, null, 8, ["modelValue"]), [
          [vShow, false]
        ]),
        unref(videoStore).fileList.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
          (openBlock(true), createElementBlock(
            Fragment,
            null,
            renderList(unref(videoStore).fileList.value, (item, index) => {
              return openBlock(), createElementBlock("div", {
                key: item.domuuid,
                index
              }, [
                createVNode(script$1, {
                  index,
                  url: item.url,
                  width: props.videoWidth,
                  height: props.videoHeight,
                  onCloseEvent: removeItem
                }, null, 8, ["index", "url", "width", "height"])
              ], 8, _hoisted_3);
            }),
            128
            /* KEYED_FRAGMENT */
          ))
        ])) : createCommentVNode("v-if", true),
        createCommentVNode(" \u6253\u5F00\u4E0A\u4F20\u5BF9\u8BDD\u6846 "),
        unref(videoStore).fileList.value.length < props.maxCount ? (openBlock(), createElementBlock(
          "div",
          {
            key: 1,
            style: normalizeStyle([{ "float": "left" }, { width: `${props.width}px`, height: `${props.height}px` }])
          },
          [
            createVNode(unref(MeFlexBox), {
              class: "video-container",
              onClick: unref(videoStore).openUpload
            }, {
              default: withCtx(() => [
                createElementVNode("div", _hoisted_4, [
                  createVNode(unref(MeSvgIcon), {
                    name: "ri-video-upload-fill",
                    size: 24,
                    style: { "color": "#767676" }
                  })
                ])
              ]),
              _: 1
              /* STABLE */
            }, 8, ["onClick"])
          ],
          4
          /* STYLE */
        )) : createCommentVNode("v-if", true),
        createCommentVNode(" \u901A\u7528\u4E0A\u4F20\u7EC4\u4EF6 "),
        createVNode(unref(MeUpload), mergeProps({
          modelValue: unref(videoStore).uploadVisible.value,
          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(videoStore).uploadVisible.value = $event),
          "upload-request": __props.uploadRequest,
          title: props.title,
          maxCount: 1,
          url: __props.url,
          rules: __props.uploadRules,
          uploadCompleteEvent: uploadCompleteEventHandler
        }, _ctx.$attrs), {
          footer: withCtx(() => [
            renderSlot(_ctx.$slots, "footer")
          ]),
          _: 3
          /* FORWARDED */
        }, 16, ["modelValue", "upload-request", "title", "url", "rules"])
      ]);
    };
  }
});

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