<template>
  <div class="previewAttach">
    <el-link type="primary" @click="lookDetail">{{filename}}</el-link>
    <!-- <video ref="videoPlay" v-if="suffix=='mp4' || suffix=='MP4'" controls>
      <source :src="showUrl" type="video/mp4" />
      <source :src="showUrl" type="video/ogg" />
    </video>
    <audio ref="audioPlay" v-else-if="suffix=='mp3' || suffix=='MP3'" controls :src="showUrl"></audio>
    <img v-else-if="suffix=='jpg' || suffix=='JPG' || suffix=='jpeg' || suffix=='JPEG' || suffix=='png' || suffix=='PNG'" :src="showUrl" alt="" style="width: 100%;max-height: 100%;">
    <iframe v-else class="iframe" :src="previewUrl+showUrl" width="100%" frameborder="0" scrolling="auto"></iframe> -->
  </div>
</template>

<script>
import { handleImageUrl } from '~/utils/index';
export default {
  data() {
    return {
      showUrl: "",
      suffix: "",
      previewUrl: "https://view.officeapps.live.com/op/view.aspx?src=",
    }
  },
  props: ["commonUrl", "filename"],
  watch: {
    commonUrl: {
      immediate: true,
      handler(val) {
        if (val != "") {
          this.initUrl();
        }
      }
    }
  },
  methods: {
    initUrl() {
      this.showUrl = handleImageUrl(this.commonUrl);
      this.suffix = this.showUrl.substr(this.showUrl.lastIndexOf(".") + 1);
    },
    lookDetail() {
      window.open(this.showUrl);
    }
  }
}
</script>

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