<template>
    <popup v-if="show" :zIdx="1100">
      <div class="ui-message ui-message-confirm">
        <div class="ui-message-header">
          <span>全景作品预览</span>
          <span @click="$emit('close')">
            <i class="iconfont icon_close"></i>
          </span>
        </div>
        <div class="ui-message-main">
          <iframe :src="ifr" frameborder="0"></iframe>
        </div>
        <div class="ui-message-footer">
          <button class="ui-button ui-button-rect" @click="copy">复制链接</button>
          <button class="ui-button submit ui-button-rect" @click="openBlank">新窗口打开</button>
        </div>
      </div>
    </popup>
</template>

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

export default {
  // TODO: name不需要了？
  props:['show','ifr','name'],
  components:{
    Popup
  },
  data(){
    return {}
  },
  methods:{
    copy() {
      var textArea = document.createElement("textarea");

      textArea.style.position = "fixed";
      textArea.style.top = 0;
      textArea.style.left = 0;
      textArea.style.width = "2em";
      textArea.style.height = "2em";
      textArea.style.padding = 0;
      textArea.style.border = "none";
      textArea.style.outline = "none";
      textArea.style.boxShadow = "none";
      textArea.style.background = "transparent";
      textArea.value = new URL(this.ifr, location.href);

      document.body.appendChild(textArea);

      textArea.select();

      try {
        document.execCommand("copy")
          ? this.$msg.success("复制成功")
          : this.$msg.error("复制失败")
      } catch (err) {
        this.$msg.error("复制失败")
      }

      document.body.removeChild(textArea);
    },
    openBlank(){
      window.open(this.ifr,'_blank')
    }
  }
}
</script>

<style lang="less" scoped>
.ui-message-confirm{
  width: 1200px;
  height: 838px;
  border-radius: 4px;
  .icon_close{
    color: #969799;
  }
  .ui-message-header{
    font-size: 18px;
    margin-bottom: 40px;
  }
  .ui-message-main{
    width: 100%;
    height: 646px;
    margin-bottom: 40px;
    iframe{
      width: 100%;
      height: 100%;
    }
  }
  .ui-message-footer{
    display: flex;
    justify-content: center;

  }
}
</style>
