<template>
    <popup v-if="show">
      <div class="ui-message ui-message-confirm" style="width: 960px">
        <div class="ui-message-header">
          <span>{{item.name}}</span>
          <span @click="$emit('close')">
            <i class="iconfont icon_close"></i>
          </span>
        </div>
        <div class="ui-message-main">
          <template v-if="item.type=='image'">
             <img @click.stop class="v-image"  v-viewer :src="item[typeStr[item.type]]"/>
             <span class="scale" @click="viewImg">
               <img :src="require('@/assets/images/icons/tool_full@2x.png')" alt="">
             </span>
          </template>
          <template v-else-if="item.type=='pano'">
            <iframe ref="pifr" :src="'./vr.html?vr='+item.sceneCode" frameborder="0"></iframe>
            <span class="scale" @click="onFullScreen">
               <img :src="require('@/assets/images/icons/tool_full@2x.png')" alt="">
             </span>
          </template>
          <video v-else controls autoplay :src="item.ossPath"></video>
        </div>
      </div>
    </popup>
</template>

<script>
import Popup from "@/components/shared/popup";

export default {
  props:['show','item'],
  components:{
    Popup
  },
  data(){
    let typeStr={
      image:'icon',
      pano:'previewIcon'
      // image:'icon',
      // image:'icon',
    }
    return {
      typeStr,
      isFullscreen:false
    }
  },
  methods:{
    viewImg(){
      const viewer = this.$el.querySelector('.v-image').$viewer
      viewer.show()
    },
    onFullScreen() {
      this.$refs.pifr.contentWindow.postMessage({event:'onfull'},'*')
    }
  }
}
</script>

<style lang="less" scoped>
.ui-message-confirm{
  border-radius: 0;
  top: unset;
  left: unset;
  transform: none;
  .icon_close{
    color: #909090;
  }
  .ui-message-header{
    border-bottom: 1px solid #EBEBEB;
  }
  .ui-message-main{
    width: 100%;
    font-size: 0;
    position: relative;
    >video,>iframe{
      width: 100%;
      height: 540px;
    }
    >img{
      width: auto;
      max-height: 80vh;
      height: auto;
    }
    >.scale{
      font-size: 0;
      bottom: 10px;
      right: 10px;
      z-index: 99;
      cursor: pointer;
      position: absolute;
      color: #fff;
      width: 36px;
      height: 36px;
      background: rgba(0, 0, 0, 0.5);
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 18px;
      >img{
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
  }
  .ui-message-footer{
    width: 100%;
    .btn{
      width: 80%;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      .ui-button{
        max-width: 104px
      }
    }

  }
}
</style>

<style lang="less" scoped>
@import '../style.less';
</style>