<template>
  <div>
    <div @click="handelClose"  class='selft-preview-close' id="preview-close">
      <span>X</span>
    </div>
  </div>
</template>

<script>
export default{
  name: 'preview',
  created(){
    let fileUrl = this.$route.query.fileUrl;
    let fileId = this.$route.query.fileId;
    let fileName = this.$route.query.fileName;
    let extension = fileName.substring(fileName.lastIndexOf('.')+1);
    if(extension == 'pdf'){
      let a = document.createElement('a');
      a.id = Date.parse(new Date());
      a.href = fileUrl;
      a.click();
      return;
    }
    this.$preview({
      url: fileUrl,
      fid: fileId,
    })
  },
  mounted(){
    let el = document.querySelector('#preview-close');
    setTimeout(()=>{
      el.style.opacity = 1;
    }, 1000)
  },
  methods:{
    handelClose(){
      window.close();
    },
  },
  data(){
    return {
      showClose: false,
    }
  }
}
</script>

<style   lang="scss">
.pdf-preview__content {
  width: 66%!important;
  max-width: 1200px;
}
.pdf-preview .btn,
.img-preview .btn,
.office-preview .btn {
  display: none;
}
.pdf-preview__title-close .fileIconfont,
.img-preview-close  .fileIconfont,
.office-preview-close .fileIconfont {
  display: none;
}

#app{
  position: relative;
}
.selft-preview-close {
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    line-height: 30px;
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    i {
        color: #fff;
        font-size: 30px;
        font-weight: 400;
    }
    span{
      display: inline-block;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background-color: #333;
      text-align: center;
      line-height: 25px;
    }
}

</style>
