<!--
 * @Author: liangxl 1316613426@qq.com
 * @Date: 2022-09-22 10:38:32
 * @LastEditors: liangxl 1316613426@qq.com
 * @LastEditTime: 2022-09-22 15:40:27
 * @FilePath: \homework-system-pc\packages\multi-file-preview\multiFilePreview.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEam
-->
<template>
  <div class="multiFilePreview_shade" v-if="visible">
    <div :class="visible ? 'multiFilePreview_modal multiFilePreview_modal_visible' : 'multiFilePreview_modal '">
      <div class="multiFilePreview_modal_title">{{fileData.name}}</div>
      <div class="multiFilePreview_modal_close" @click="close">
        <svg t="1663830109205" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2550" width="20" height="20"><path d="M899.499963 262.219143 759.090073 121.815393 513.401418 367.506095 267.714809 121.815393 127.310036 262.22426 373.000737 507.910868 127.314129 753.5985 267.712763 893.996111 513.401418 648.307456 759.095189 893.998157 899.488707 753.5985 653.804145 507.910868Z" p-id="2551"></path></svg>
      </div>
      <div class="multiFilePreview_modal_body">      
      <template v-if="fileData.contentType=='mp4'">
        <VueXgplayer ref="childPlayer"  style="width:100%; height:100%;" :config="videoConfig"></VueXgplayer>
      </template>
      <template v-else>
        <iframe width="100%" height="100%"  :src=" searchUrl + $fileServer + fileData.path"></iframe>
      </template>
      </div>
    </div>
  </div>
</template>

<script>
  import  VueXgplayer  from'./DN_player.vue'
export default {
  name:'multiFilePreview',
  components:{
    VueXgplayer
  },
  props:{
    fileData:{
      type:Object,
      default(){
        return {
          url:'',
          contentType:''
        }
      }
    },
    searchUrl:{
      type:String,
      default(){
        return 'https://onlineview.teachertc.com/onlinePreview?url='
      }
    },
    visible:{
      type:Boolean,
      default(){
        return false
      }
    },
  },
  model: {
    prop: 'visible', // 默认是false
    event: 'setVisible', 
  },
  watch:{
    //监听选项内容
    fileData:{
      handler: function(val, oldVal){
        if(val.contentType=='mp4'){
          let url = this.$fileServer + val.path
          this.videoConfig.url = url
          console.log(url)
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  data() {
    return{
      videoConfig:{
          id: 'mse',
          url: '',
          height: '100%',
          poster: "",
        }
    }
  },
  methods:{
    close(){
        let tmp = !this.visible
				//双向绑定显示与否
				this.$emit('setVisible',tmp)
    }
  }
}
</script>
<style>
/* 过度效果 */
@keyframes modalVisible {
  from {
    opacity: 0;
    top: 80px;
    width:0px;
  }

  to {
    opacity: 1;
    top: 0;
    width:100vw;
  }
}
.multiFilePreview_shade{
  width:100vw;
  height:100vh;
  min-width:300px;
  position: fixed;
  top:0;
  left:0;
  z-index:9998;
  background-color:rgba(0,0,0,0.6);
}
.multiFilePreview_modal{
  width:90%;
  height:90%;
  position: absolute;
  top:5%;
  left:5%;
  z-index:9999;
  background-color: #fff;
  padding:10px;
  border-radius:8px;
  overflow: hidden;
  opacity: 0;
}
.multiFilePreview_modal_visible{
    opacity: 1;
  animation: modalVisible 0.2s;
}
.multiFilePreview_modal_title{
  width:100%;
  position: absolute;
  top:0;
  left:0;
  padding:10px 40px 10px 20px;
  font-size:16px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
}
.multiFilePreview_modal_close{    
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 10px 0 0 10px;
}
.multiFilePreview_modal_close:hover svg{
  fill:#ba2c1a;
}
.multiFilePreview_modal_body{
  height:100%;
  padding: 35px 0 0 0;
  box-sizing: border-box;
}
</style>