<template>
  <div>
    <!-- <div><button @click="changeChild">点击改变子组件参数</button></div> -->
    <iframe ref="child" :src="url" width="100%" height="100%" scrolling="no" frameborder="0">
    </iframe>
    <van-popup
      closeIconPos="bottom-right"
      v-model="showShare"
      position="center"
      bgColor="transparent"
      style="background: transparent"
      @close="close"
    >
      <div class="mySharepopup" ref="downDiv">
        <img :src="img" class="showImgbase64" alt="">
        <div class="close" @click="close">
          <img width="42px" height="42px" src="/static/img/icon_cancel@2x.png"></img>
        </div>
        <div style="margin:20px;">
          <div class="mytext">
          <img width="295px" class="bejst" height="450px" src="/static/img/img_cover@2x.jpg"></img>
          <div class="flex justify-between shareImg">
            <div class="code">
              <img
               style="width: 66px;height: 66px"
                src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_scan_active@2x.png"
              ></img>
            </div>
            <div class="zz">
              <img style="width: 122px;height: 113px" src="https://4dscene.4dage.com/new4dkk/deng/static/img/insignia@2x.png"></img>
            </div>
          </div>
          <div class="bottom">
            <div class="mytext">
              <div mt-10>第<span>{{ number + 1 }}</span>位游客完成打卡</div>
            </div>
          </div>
          <div class="pl-10px mr-auto text-center" v-if="img">长按保存图片</div>
        </div>
        </div>
        <div class="butList flex justify-around my-10">
          <!-- <div class="share">
              <u-button :customStyle="{opacity: 0,width: '50px', height: '50px',}" type="primary" icon="share" plain text=" " open-type="share"></u-button>
              <u-icon name="share" color="#2979ff" size="28"></u-icon>
            </div> -->
          <u-icon name="download" color="#2979ff" size="28"></u-icon>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      url: 'https://sit-nanhuacs.4dage.com/show/index.html?m=SG-w51bY2f2Ojj&lang=zh',
      number: 0,
      showShare: true
    }
  },
  computed: {
    ...mapState('home', ['img'])
  },
  mounted() {
    this.getRequest('/api/show/pray/count').then(res => {
      this.number = res.data.total
    })
    window.addEventListener(
      'message',
      ev => {
        console.log(ev, 'message')
        if (ev && ev.data && ev.data == 'share') {
          this.base64()
        } else {
        }
      },
      false
    )
  },
  methods: {
    changeB(n) {
      this.b = n
    },
    base64() {
      let that = this
      console.log('base64', this.$refs.downDiv)
      this.showShare = true
      if(!this.$refs.downDiv) return
      this.$store.commit('home/setImg', null)
      this.$nextTick(() => {
        console.log('DOM updated!')
        // 在 DOM 更新后执行的回调函数
        setTimeout(() => {
          that.$store.dispatch('home/saveImage', that.$refs.downDiv)
        }, 1000)
        // this.$store.dispatch('home/saveImage', this.$refs.downDiv)
      })
    },
    close() {
      this.showShare = false
    },
    changeChild() {
      this.$refs.child.contentWindow.postMessage({ a: '宝塔镇河妖' }, '*')
    }
  }
}
</script>
<style lang="scss" scoped>
.mySharepopup {
  cursor: pointer;
  // width: 330px;
  // height: 537px;
  width: calc(100vw - 30px);
  overflow-y: hidden;
  // padding: 19px 50px 0px 50px;
  .close {
    position: absolute;
    right: 0;
    z-index: 20;
    top: 0;
    // top: -20px;
    // width: 42px;
    // height: 42px;
  }
  .butList {
    position: absolute;
    // bottom: -80px;
    left: calc(50% - 14px);
    .share {
      position: relative;
      .u-icon {
        position: absolute;
        left: calc(50% - 14px);
        top: calc(50% - 14px);
      }
    }
  }
  .mytext {
    padding: 20px;
    margin: 0 10px;
    position: relative;
    background: #fff;
    .bejst {
      width: 100%;
      height: 450px;
      object-fit: cover;
    }
    .shareImg {
      width: calc(100% - 33px);
      position: absolute;
      bottom: 40px;
      z-index: 2;
    }
  }
  .bottom {
    font-weight: 400;
    // height: 50px;
    font-size: 16px;
    color: #000000;
    line-height: 19px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    // position: relative;
    // bottom: -30px;
    span {
      font-size: 20px;
      color: #b1967b;
    }
  }
}
</style>
