<template>
    <popup v-if="show">
      <div class="ui-message ui-message-confirm" style="width: 430px">
        <div class="ui-message-header">
          <span>全景图封面设置</span>
          <span @click="$emit('close')">
            <i class="iconfont icon_close"></i>
          </span>
        </div>
        <div class="ui-message-main re-name">
          <div>
            <span class="remark">从全景截图作为封面</span>
            <iframe id="ifrcover" :src="'./vr.html?vr='+item.sceneCode" frameborder="0"></iframe>
            <button @click="onClick" class="ui-button ui-button-rect submit" >
              截图
            </button>
          </div>
          <div>
            <span class="remark">封面预览</span>
            <img :src="img||$thumb" alt="" />
          </div>
        </div>
        <div class="ma-line"></div>
        <div class="ui-message-footer">
          <div class="btn">
            <button @click="$emit('close')" class="ui-button ui-button-rect cancel" >
              取消
            </button>
            <button @click="save" class="ui-button ui-button-rect submit" >
              确定
            </button>
          </div>
        </div>
      </div>
    </popup>
</template>

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

export default {
  props:['show','item'],
  components:{
    Popup
  },
  data(){
    return {
      img: this.item.icon||''
    }
  },
  watch:{
    item:{
      deep:true,
      handler:function (newVal) {
        this.img = newVal.icon
      }
    }
  },
  methods:{
    onClick() {
      let ifr = document.getElementById('ifrcover')
      let data = ifr.contentWindow.screenshot()
      this.img = data.url
    },
    save(){
      if (!this.img) {
        return this.$alert({ content: "请点击“截图”按钮截取封面" });
      }
      
      this.$emit('panocover',this.img)
    }
  }
}
</script>

<style lang="less" scoped>
.ui-message-confirm{
  border-radius: 0;
  .icon_close{
    color: #909090;
  }
  .ui-message-header{
    border-bottom: 1px solid #EBEBEB;
    >span{
     margin-left: 30px;
    }
  }
  .ui-message-main{
    display: flex;
    margin: 20px 30px;
    justify-content: space-between;
    background: #fff;
    >div{
      width: calc(50% - 10px);
      text-align: left;
      >span{
        display: inline-block;
      }
      >iframe,>img{
        margin: 10px 0;
        width: 175px;
        border: 1px solid #000;
        height: 175px;
      }
    }
  }
  .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>