<template>
    <popup>
      <div class="ui-message ui-message-confirm message-material">
        <div class="ui-message-header header-material">
          <div>全景图封面设置</div>
          <div @click="$emit('close')">
            <i class="iconfont icon_close"></i>
          </div>
        </div>
        <div class="ui-message-main re-name">
          <div>
            <iframe id="ifrcover" :src="'./vr.html?hideScale=1&vr='+item.sceneCode" frameborder="0"></iframe>
            <div>
              <span class="remark">拖动画面截取封面</span>
              <div @click="onClick" :class="canPrintScreen ? 'print-screen-btn' : 'print-screen-btn--disabled'" >
                <i class="iconfont icon-pop-ups_crop"></i>
                截图
              </div>
            </div>
          </div>
          <div>
            <img :src="img||$thumb" alt="" />
            <div>
              <div class="remark">封面预览</div>
            </div>
          </div>
        </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:['item'],
  components:{
    Popup
  },
  data(){
    return {
      img: this.item.icon || '',
      canPrintScreen: false,
    }
  },
  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)
    }
  },
  mounted() {
    setTimeout(() => {
      this.canPrintScreen = true
    }, 2500);
  }
}
</script>

<style lang="less" scoped>
.ui-message-confirm{
  width: 472px;
  height: 421px;
  overflow: visible;
  
  .icon_close{
    color: #909090;
  }

  .ui-message-main {
    display: flex;
    margin: 40px 0;
    justify-content: space-between;
    > div{
      > iframe,> img {
        margin-bottom: 10px;
        width: 200px;
        height: 200px;
        border-radius: 4px;
      }
      > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .remark {
          font-size: 14px;
          color: #646566;
        }
        .print-screen-btn {
          font-size: 14px;
          color: #0076F6;
          cursor: pointer;
          .iconfont {
            font-size: 12px;
          }
        }
        .print-screen-btn--disabled {
          font-size: 14px;
          pointer-events: none;
          color: #646566;
          .iconfont {
            font-size: 12px;
          }
        }
      }
    }
  }
  .ui-message-footer{
    width: 100%;
    .btn{
      display: flex;
      justify-content: flex-end;
      .ui-button{
        max-width: 104px;
      }
    }

  }
}
</style>

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