<template>
  <view :class="uploadPreviewClass" :style="uploadPreviewStyle">
    <image
      v-if="isImage"
      mode="aspectFill"
      :src="mediaUrl"
      @click="onImageClick"
    />
    <view v-else-if="isVideo" :class="bem.e('video-wrapper')">
      <video
        :class="bem.e('video')"
        :id="videoId"
        :src="mediaUrl"
        :controls="controlsVisible"
        :show-center-play-btn="false"
        @fullscreenchange="onFullscreenchange"
      />

      <view :class="bem.e('video-play')" @click="onPlayClick">
        <sar-icon name="play" size="80rpx" />
      </view>
    </view>
    <view v-else :class="bem.e('file')">
      <view :class="bem.e('file-icon')">
        <sar-icon name="file" />
      </view>
      <view :class="bem.e('file-name')">
        {{ name }}
      </view>
    </view>
    <view
      v-if="status === 'uploading' || status === 'failed'"
      :class="bem.e('status')"
    >
      <view :class="bem.e('status-icon')">
        <sar-loading v-if="status === 'uploading'" />
        <sar-icon v-else-if="status === 'failed'" name="x-circle" />
      </view>

      <view v-if="message" :class="bem.e('status-message')">{{ message }}</view>
    </view>
    <view
      v-if="removable && !disabled && !readonly && status !== 'uploading'"
      :class="bem.e('remove')"
      @click="onRemove"
    >
      <view :class="bem.e('close')">
        <sar-icon name="close" />
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { computed, ref, getCurrentInstance } from "vue";
import {
  classNames,
  stringifyStyle,
  createBem,
  isImageUrl,
  isVideoUrl,
  uniqid
} from "../utils";
import SarIcon from "../icon/icon.vue";
import SarLoading from "../loading/loading.vue";
import { uploadPreviewProps } from "../upload/common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "upload-preview",
  props: uploadPreviewProps,
  emits: ["image-click", "remove"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose();
    const props = __props;
    const emit = __emit;
    const bem = createBem("upload");
    const isImage = computed(() => {
      return props.isImage || props.file?.type === "image" || props.url && isImageUrl(props.url);
    });
    const isVideo = computed(() => {
      return props.isVideo || props.file?.type === "video" || props.url && isVideoUrl(props.url);
    });
    const mediaUrl = computed(() => {
      return props.url || props.file?.path || "";
    });
    const onImageClick = () => {
      emit("image-click", props.index);
    };
    const videoId = uniqid();
    const instance = getCurrentInstance();
    const controlsVisible = ref(false);
    const videoContext = uni.createVideoContext(videoId, instance);
    const onFullscreenchange = (event) => {
      if (event.detail.fullScreen) {
        videoContext.play();
        controlsVisible.value = true;
      } else {
        videoContext.pause();
        controlsVisible.value = false;
      }
    };
    const onPlayClick = () => {
      videoContext.requestFullScreen({
        direction: 0
      });
    };
    const onRemove = () => {
      if (!props.removable || props.disabled || props.readonly)
        return;
      function remove() {
        emit("remove", props.index);
      }
      if (props.beforeRemove) {
        const ret = props.beforeRemove(props.index);
        if (!ret) {
          return;
        }
        if (ret instanceof Promise) {
          ret.then(() => {
            remove();
          }).catch(() => {
            null;
          });
          return;
        }
      }
      remove();
    };
    const uploadPreviewClass = computed(() => {
      return classNames(
        bem.e("preview"),
        bem.em("preview", "is-video", isVideo.value),
        props.rootClass
      );
    });
    const uploadPreviewStyle = computed(() => {
      return stringifyStyle(props.rootStyle);
    });
    const __returned__ = { props, emit, bem, isImage, isVideo, mediaUrl, onImageClick, videoId, instance, controlsVisible, videoContext, onFullscreenchange, onPlayClick, onRemove, uploadPreviewClass, uploadPreviewStyle, SarIcon, SarLoading };
    return __returned__;
  }
});
</script>

<style lang="scss">
@use './index.scss';
</style>