<template>
  <transition name="move-bottom">
     <div class="shop-mask" v-transfer-dom v-if="isShow">
       <div class="mask" @click="_close"></div>
       <div class="box" @click.stop>
         <iframe
           :src="marketSrc ? `${origin}/shop${marketSrc}` : `${origin}/shop/showcase?uin=${channelInfo.uin}&caseId=${caseInfo.caseId}`"
           width="100%"
           height="100%"
         />
       </div>
     </div>
  </transition>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  props: {
    value: {},
    marketSrc: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      show: false,
      origin: process.env.DEF_SITE
    };
  },
  computed: {
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        if (!nVal) {
          console.log('关闭商城')
          window.removeEventListener('message', this.switchPostMessage.bind(this), false)
        }
        this.$emit('input', nVal);
      }
    },
    ...mapGetters({
      caseInfo: 'caseInfo',
      channelInfo: 'channelInfo',
    }),
    DEF_SITE() {
      return process.env.DEF_SITE
    }
  },
  mounted() {
    this.origin = window.location.origin
  },
  methods: {
    _close() {
      this.isShow = false;
    },
    switchPostMessage(e) {
      const message = e.data
      if (!message.cmd) return
      if (!this[message.cmd]) return
      this[message.cmd](message.data)
    },
    parentLogin() {
      this.$Bus.$emit('bus-showLogin', true);
    },
    sourceLinkShop(sourceContent) {
      this.$Bus.$emit('market-buyShop', {
        type: 2,
        source: 1,
        sourceContent
      });
    },
    sourceCommandShop(sourceContent) {
      this.$Bus.$emit('market-buyShop', {
        type: 2,
        source: 2,
        sourceContent
      });
    },
    payShop(res) {
        const { tradeType, prepayInfo } = res.data;
        const { uin } = this.channelInfo;
        const DEF_SITE = process.client
          ? process.env.DEF_SITE + (window.location.protocol.split(':')[0] === 'https' ? process.env.HTTPS_PORT : process.env.HTTP_PORT)
          : `http:${process.env.DEF_SITE + process.env.HTTP_PORT}`;
        if (res.data.url) {
          window.location.href = res.data.url;
        } else if (tradeType === 'MWEB') {
          const wxh5pay = `https:${process.env.DEF_SITE + process.env.HTTPS_PORT}/pay/wxh5pay?uin=${uin}`;
          const backUrl = encodeURIComponent(window.location.href);
          const transferUrl = encodeURIComponent(`${wxh5pay}&url=${backUrl}`);
          const payUrl = encodeURIComponent(`${prepayInfo.mweb_url}&redirect_url=${transferUrl}`);
          const url = `${wxh5pay}&url=${payUrl}`;
          window.location.href = url;
        } else if (tradeType === 'JSAPI') {
          const data = encodeURIComponent(JSON.stringify(res.data));
          const url = `${DEF_SITE}/pay/wxpay?uin=${uin}&payconfig=${data}`;
          window.location.href = url;
        } else {
          this.$layer.msg('网络错误，请稍后重试！');
        }
    },
    goMarket() {
      window.location.href = `${origin}/shop/home?uin=${this.channelInfo.uin}`
    }
  },
  watch: {
    value(newVal) {
      if (newVal){
         console.log('开启商城')
         window.addEventListener('message', this.switchPostMessage.bind(this), false)
      }
    }
  }
};
</script>

<style lang="less" scoped>
.shop-mask {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1000;
   .mask {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }
   .box {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 100;
     height: 70%;
     min-height: 3rem;
     border-radius: 0.1rem 0.1rem 0px 0px;
     overflow: hidden;
     background: #fff;
   }
}
</style>
