<template>
    <popup v-if="show">
      <div class="ui-message ui-message-confirm" style="width: 544px">
        <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>
            <div>作品二维码</div>
            <div>
              <img :src="(item.qrCode+`?${Math.random()}`)||$thumb" alt="">
              <button @click="downloadImg(item.qrCode)" :class="`ui-button ui-button-rect submit`">下载</button>
            </div>
            <div>作品链接</div>
            <div>
              <input
                :title="item.share"
                class="ui-input"
                disabled
                type="text"
                maxlength="15"
                placeholder="输入名字"
                v-model="item.share"
              />
              <button @click="copy(item.share)" :class="`ui-button ui-button-rect submit`">复制</button>
            </div>
          </div>
        </div>
      </div>
    </popup>
</template>

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

export default {
  props:['show','item'],
  components:{
    Popup
  },
  data(){
    return {
      key:''
    }
  },
  methods:{
     downloadImg(url){
        var a = document.createElement('a');          
        var event = new MouseEvent('click')         
        a.download = 'qrcode' 
        a.href = url;
        a.dispatchEvent(event)
     },
    copy(text){
       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 = text

      document.body.appendChild(textArea)

      textArea.select()

      try {
                

        document.execCommand('copy') ? this.$tips({ content: "复制成功",icon:'ok' }) :  this.$tips({ content: "复制失败",icon:'ok' })
      } catch (err) {
         this.$tips({ content: "复制失败",icon:'ok' })
      }

      document.body.removeChild(textArea)

    }
  }
}
</script>

<style lang="less" scoped>
.ui-message-confirm{
  border-radius: 0;
  .icon_close{
    color: #909090;
  }
  .ui-message-header{
    border-bottom: 1px solid #EBEBEB;
  }
  .ui-message-main{
    width: 444px;
    margin: 20px auto;
    padding-bottom: 20px;
    background: #fff;
    >div{
      text-align: left;
      >div{
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
        >img{
          width: 150px;
        }
        .ui-button{
          min-width: 104px;
          margin-left: 10px;
        }
      }
    }
  }
  .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>