<template>
  <div class="previewAttach">
    <video ref="videoPlay" v-if="suffix=='mp4' || suffix=='MP4'" controls>
      <source :src="getFullUrl(commonUrl)" type="video/mp4" />
      <source :src="getFullUrl(commonUrl)" type="video/ogg" />
    </video>
    <audio ref="audioPlay" v-else-if="suffix=='mp3' || suffix=='MP3'" controls :src="getFullUrl(commonUrl)"></audio>
    <iframe v-else class="iframe" :src="getFullUrl(commonUrl)" width="100%" frameborder="0" scrolling="auto"></iframe>
  </div>
</template>

<script setup>
import { getFullUrl } from "~/utils/helper";
const props = defineProps({
  commonUrl: String,
  suffix: String,
})
</script>

<style lang="scss" scoped>
.previewAttach {
  height: 100%;
  video,
  audio,
  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>