import { createElementVNode, defineComponent, useModel, computed, resolveComponent, createBlock, openBlock, withCtx, createElementBlock, createCommentVNode, createVNode, unref, normalizeProps, guardReactiveProps, createTextVNode, mergeModels } from 'vue';
import { ElMessage } from 'element-plus';
import { useDownload } from '../../../../hooks/base/useDownload/index.mjs';
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
import { GmFileComponent } from '../fileComponent/index.mjs';
import { previewFileProps } from './previewFile.mjs';

const _hoisted_1 = { class: "gm-flex gm-items-center gm-justify-between" };
const _hoisted_2 = /* @__PURE__ */ createElementVNode(
  "span",
  null,
  "\u9884\u89C8",
  -1
  /* HOISTED */
);
const _hoisted_3 = { class: "gm-flex gm-select-none gm-items-center gm-justify-center gm-gap-4" };
const _hoisted_4 = {
  class: "gm-flex gm-flex-1 gm-items-center gm-justify-center",
  style: { "height": "calc(80vh - 72px)" }
};
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "GmPreviewFile"
  },
  __name: "PreviewFile",
  props: /* @__PURE__ */ mergeModels(previewFileProps, {
    "dialogVisible": { type: Boolean, ...{ default: false } },
    "dialogVisibleModifiers": {},
    "fileIndex": { default: 0 },
    "fileIndexModifiers": {}
  }),
  emits: ["update:dialogVisible", "update:fileIndex"],
  setup(__props) {
    const props = __props;
    const dialogVisible = useModel(__props, "dialogVisible");
    const fileIndex = useModel(__props, "fileIndex");
    const downloadMethod = useDownload();
    const files = computed(() => {
      let result = props.fileList;
      if (props.fileList && !props.fileList.length && props.file) {
        result = [props.file];
      }
      return result;
    });
    const fileProps = computed(() => {
      const file = files.value[fileIndex.value];
      return {
        file,
        controls: props.controls,
        oncontextmenu: props.oncontextmenu,
        controlslist: props.controlslist,
        field: props.field,
        url: props.url,
        size: props.size
      };
    });
    const prev = () => {
      if (fileIndex.value > 0) {
        fileIndex.value--;
        return;
      }
      ElMessage.warning("\u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\u4E86");
    };
    const next = () => {
      if (fileIndex.value < props.fileList.length - 1) {
        fileIndex.value++;
        return;
      }
      ElMessage.warning("\u6CA1\u6709\u66F4\u591A\u4E86\uFF01");
    };
    const download = () => {
      const file = files.value[fileIndex.value];
      const url = file[props.url] || file.url || "";
      downloadMethod.downloadByUrl(url, { filename: file.name });
    };
    return (_ctx, _cache) => {
      const _component_el_button = resolveComponent("el-button");
      const _component_el_icon = resolveComponent("el-icon");
      const _component_el_dialog = resolveComponent("el-dialog");
      return openBlock(), createBlock(_component_el_dialog, {
        modelValue: dialogVisible.value,
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => dialogVisible.value = $event),
        title: "\u9884\u89C8",
        width: _ctx.previewWidth,
        top: "10vh",
        "append-to-body": "",
        "destroy-on-close": ""
      }, {
        header: withCtx(() => [
          createElementVNode("div", _hoisted_1, [
            _hoisted_2,
            _ctx.openPreviewDownload ? (openBlock(), createBlock(_component_el_button, {
              key: 0,
              type: "primary",
              size: "default",
              link: "",
              onClick: download
            }, {
              default: withCtx(() => [
                createTextVNode("\u4E0B\u8F7D")
              ]),
              _: 1
              /* STABLE */
            })) : createCommentVNode("v-if", true)
          ])
        ]),
        default: withCtx(() => [
          createElementVNode("div", _hoisted_3, [
            files.value.length > 1 ? (openBlock(), createElementBlock("div", {
              key: 0,
              class: "gm-cursor-pointer",
              onClick: prev
            }, [
              createVNode(_component_el_icon, { size: 40 }, {
                default: withCtx(() => [
                  createVNode(unref(ArrowLeftBold))
                ]),
                _: 1
                /* STABLE */
              })
            ])) : createCommentVNode("v-if", true),
            createElementVNode("div", _hoisted_4, [
              createVNode(
                unref(GmFileComponent),
                normalizeProps(guardReactiveProps(fileProps.value)),
                null,
                16
                /* FULL_PROPS */
              )
            ]),
            files.value.length > 1 ? (openBlock(), createElementBlock("div", {
              key: 1,
              class: "gm-cursor-pointer",
              onClick: next
            }, [
              createVNode(_component_el_icon, { size: 40 }, {
                default: withCtx(() => [
                  createVNode(unref(ArrowRightBold))
                ]),
                _: 1
                /* STABLE */
              })
            ])) : createCommentVNode("v-if", true)
          ])
        ]),
        _: 1
        /* STABLE */
      }, 8, ["modelValue", "width"]);
    };
  }
});

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