import { defineComponent, computed, ref, createElementBlock, openBlock, Fragment, createElementVNode, createVNode, normalizeStyle, renderList, unref, mergeProps, withCtx, renderSlot } from 'vue';
import { GmFileComponent } from '../fileComponent/index.mjs';
import { GmPreviewFile } from '../previewFile/index.mjs';
import { fileProProps } from './fileList.mjs';

var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "GmFileList"
  },
  __name: "FileList",
  props: fileProProps,
  setup(__props) {
    const props = __props;
    const fileListStyle = computed(() => {
      return {
        gap: props.fileListGap,
        ...props.fileListStyle
      };
    });
    const fileStyle = computed(() => {
      return {
        width: props.fileWidth,
        height: props.fileHeight,
        border: "1px solid #ccc",
        overflow: "hidden",
        borderRadius: "5px",
        ...props.fileStyle
      };
    });
    const dialog = ref(false);
    const fileIndex = ref(0);
    const handleClick = (file, index) => {
      fileIndex.value = index;
      dialog.value = true;
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        Fragment,
        null,
        [
          createElementVNode(
            "div",
            {
              class: "gm-flex gm-flex-wrap gm-items-center",
              style: normalizeStyle(fileListStyle.value)
            },
            [
              (openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(_ctx.fileList, (file, index) => {
                  return openBlock(), createElementBlock("div", {
                    key: index,
                    class: "gm-cursor-pointer"
                  }, [
                    createVNode(unref(GmFileComponent), mergeProps(props, {
                      fileStyle: fileStyle.value,
                      file,
                      controls: false,
                      "on-click": (value) => handleClick(value, index)
                    }), {
                      default: withCtx(() => [
                        renderSlot(_ctx.$slots, "default", { file })
                      ]),
                      _: 2
                      /* DYNAMIC */
                    }, 1040, ["fileStyle", "file", "on-click"])
                  ]);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ],
            4
            /* STYLE */
          ),
          createVNode(unref(GmPreviewFile), mergeProps(props, {
            dialogVisible: dialog.value,
            "onUpdate:dialogVisible": _cache[0] || (_cache[0] = ($event) => dialog.value = $event),
            "file-index": fileIndex.value,
            "onUpdate:fileIndex": _cache[1] || (_cache[1] = ($event) => fileIndex.value = $event)
          }), null, 16, ["dialogVisible", "file-index"])
        ],
        64
        /* STABLE_FRAGMENT */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=FileList.vue2.mjs.map
