<template>
  <div class="wrapper-box" @click.self="handleClose">
    <div :class="['transition-wrapper', {'bottomZ': classBottom, 'bottomT': !classBottom}]">
      <div class="income-des" v-if="showType === 0" :style="{'height': height}">
        <div class="income-title">收益说明</div>
        <div class="income-detailed">
          <p>
              <span v-if="boxType !='poster'">成为推广员后，</span>
              <span>每成功邀请一位好友购买</span>
          </p>
          <p v-html="incomeContent">
            <!-- 获得<span>支付金额的<b>40%</b></span>作为奖励 -->
          </p>
          <p class="income-poundage theme-customize-font" v-if="poundage">已扣除手续费￥{{poundage}}</p>
        </div>
        <div class="income-buttom theme-customize-bg theme-customize-font-black" @click="handleClick('myProfit')" v-if="boxType=='poster'">查看我的收益</div>
        <div class="income-info" v-if="boxType=='poster'">在店铺【我的】-【我的账户】查看</div>
        <div class="income-info" v-if="boxType !='poster'">查看更多说明，请进入【<span class="income-info__default theme-customize-font" @click="handleClick('promotion')">推广中心</span>】</div>
        <img src="~imgPath/icon_close.png" alt="关闭" class="close-btn" @click="handleClose">
      </div>
      <div class="invite-way" v-else-if="showType === 1">
        <div class="invite-title">邀请方式</div>
        <!--复制失败时，手动复制-->
        <div class="invite-ways" v-if="copyBoxShow">
            <div class="invite-way-two">
                <p class="invite-way-name">方式三</p>
                <div class="invite-way-des invite-way-three-des">
                  <p class="copy-url-info">长按复制链接，转发推广：</p>
                  <span class="copy-url">{{share_url || distribute_url_single}}</span>
                </div>
            </div>
        </div>
        <div class="invite-ways" v-show="!copyBoxShow">
          <div class="invite-way-one" v-show="isWeChat">
            <p class="invite-way-name">方式一</p>
            <div class="invite-way-one-des">
              <p class="wx-share">微信内直接分享</p>
              <span>
                点击微信右上角三个点“…”<br>
                通过【发送给朋友】【分享到朋友圈】推广
              </span>
            </div>
          </div>
          <div class="invite-way-two">
            <p class="invite-way-name" v-show="isWeChat">方式二</p>
            <div class="invite-way-des invite-way-two-des">
              <p class="copy-url-info">复制以下链接，转发推广：<span class="btn-copy theme-customize-font theme-customize-border" :data-clipboard-text="share_url || distribute_url_single">复制链接</span></p>
              <span class="copy-url">{{share_url}}</span>
            </div>
          </div>
          <!-- 分销收益 -->
          <div class="profitInfo" v-if="distributePrice">
            <div class="profit-share">邀请后预计最高<span v-html="incomeContent"></span></div>
            <div class="profit-hint">可在“个人中心”-“推广中心”里查看奖励</div>
          </div>
        </div>
        <!-- <div class="invite-button" @click="handleClick('promotion')">推广中心</div> -->
        <!-- <div class="invite-info">在店铺【我的】-【推广中心】查看</div> -->
        <!-- <div class="invite-info">可在【我的】-【<span class="invite-info__default" @click="handleClick('promotion')">推广中心</span>】查看推广效果</div> -->
        <img src="~imgPath/icon_close.png" alt="关闭" class="close-btn" @click="handleClose">
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable no-undef */
import Clipboard from 'clipboard'; // 复制插件
import EventBus from '../../libs/eventbus.js';

export default {
  name: 'cardAlertBox',
  props: {
    showType: {
      default: 0,
      type: Number
    },
    incomeContent: {
      default: '',
      type: String
    },
    poundage: {
      default: '',
      type: String
    },
    height: {
      default: '5.36rem',
      type: String
    },
    share_url: {
      default: '',
      type: String
    },
    boxType: {
      default: '',
      type: String
    },
    distributePrice:{
      default: 0,
      type: Number
    }

  },
  data () {
    return {
      classBottom: false,
      distribute_url_single: null,//单品
      copyBoxShow: false,
    };
  },
  created() {
    //单品
    if(document.getElementById('distribute_url')){
        let distribute = document.getElementById('distribute_url').value;
        if(distribute){
            this.distribute_url_single = distribute;
        }
    }
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      setTimeout(()=>{
        that.classBottom = true;
      }, 0);
    });

    // 设置复制按钮
    let clipboard = new Clipboard('.btn-copy');
    clipboard.on('success', function(e) {
      that.handleClose();
      EventBus.$emit('vueAlert', {
          type: 'toast',
          time: 1500,
          desc: '链接已复制',
      });
      e.clearSelection();
    });

    clipboard.on('error', function(e) {
        that.copyBoxShow = true;
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
  },
  computed: {
      // 是否是微信浏览器
      isWeChat(){
          const UA = window.navigator.userAgent.toLowerCase();
          return UA && UA.indexOf('micromessenger') > -1;
      }
  },
  methods: {
    handleClose () {
      this.classBottom = false;
      setTimeout(()=>{
        this.$emit("handleClose");
      }, 200);
    },
    handleClick (type) {
      if (type === 'promotion') {
        eJump('distribute_center?show_retrun_btn=1');
      } else if (type === 'myProfit') {
        // 以下代码为了解决生成裂变海报跳转到我的账户跨域问题
        let origin = window.location.origin;
        if (origin.indexOf("xeknow") != -1 ) {
          let location = origin.replace("xeknow", "xiaoeknow");
          window.location.href = `${location}/myProfit?show_retrun_btn=1`;
        } else {
          eJump('myProfit?show_retrun_btn=1');
        }
      }

      // 卡片优化逻辑： 显示返回按钮
      // sessionStorage.setItem('show_return_btn', true);
      this.handleClose();
    },
  },
};
</script>

<style scoped lang="scss">
  .wrapper-box {
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    .transition-wrapper {
      position: absolute;
      bottom: -10rem;
      transition: all .2s linear;
      width: 100%;
    }
    
    .income-des, .invite-way {
      width: 100%;
      background:rgba(255,255,255,1);
      color:rgba(53,53,53,1);
      text-align: center;
      border-radius:0.16rem 0.16rem 0 0;
      position: absolute;
      bottom: 0;
    }

    .close-btn {
      position: absolute;
      top: 0.32rem;
      right: 0.32rem;
      width: 0.24rem;
      height: 0.24rem;
      cursor: pointer;
    }

    .income-des {
      height: 5.36rem;

      .income-detailed {
        margin-top: 0.56rem;
        font-size: 0.3rem;
        span {
          color: #E64340;
          b {
            font-size: 0.48rem;
            margin: 0 0.08rem;
          }
        }
        .income-poundage {
          margin-top: 0.16rem;
          color: #09BB07;
          font-size: 0.24rem;
        }
      }
      
      .income-buttom {
        margin: 0.48rem auto 0.24rem;
        width: 4.52rem;
        height: 0.88rem;
        background:#09BB07;
        border-radius: 0.44rem;
        font-size: 0.3rem;
        color: #fff;
        line-height: 0.88rem;
        text-align: center;
        cursor: pointer;
      }

      .income-info {
        color: #888;
        font-size: 0.24rem;
        margin-top: 1.08rem;
        .income-info__default {
          color: #2A75ED;
          cursor: pointer;
        }
      }
    }

    .invite-way {
      max-height: 5.78rem;

      .invite-ways {
        margin-top: 0.48rem;
        margin-left: 0.48rem;
        color: #353535;
        font-size: 0.48rem;
        .invite-way-one {
          display: flex;
          font-size: 0.28rem;
          margin-bottom: 0.52rem;
          .invite-way-name {
            margin-right: 0.42rem;
          }
          .invite-way-one-des {
            text-align: left;
            .wx-share {
              margin-bottom: 0.16rem;
            }
            span {
              font-size: 0.24rem;
              color: #888;
            }
          }
        }

        .invite-way-two {
          display: flex;
          font-size: 0.28rem;
          .invite-way-name {
            margin-right: 0.42rem;
          }
          .invite-way-des {
            text-align: left;
            .copy-url-info {
              margin-bottom: 0.18rem;
              position: relative;
              span {
                display: inline-block;
                width: 1.28rem;
                height: 0.48rem;
                line-height: 0.48rem;
                text-align: center;
                border-radius: 0.24rem;
                border: 0.02rem solid rgba(9,187,7,1);
                cursor: pointer;
                position: absolute;
                right: -0.8rem;
                top: -0.06rem;
                color: rgba(9,187,7,1);
              }
            }
            .copy-url {
              width: 100%;
              font-size: 0.24rem;
              color: #888;
            }
          }
          .invite-way-two-des {
            width: 4.5rem;
            .copy-url {
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .invite-way-three-des {
            width: 5rem;
            .copy-url {
              word-break: break-all;
              display: inline-block;
            }
          }
        }
      }

      .invite-button {
        margin: 0.48rem auto 0.24rem;
        width: 4.52rem;
        height: 0.88rem;
        line-height: 0.88rem;
        text-align: center;
        color: #fff;
        font-size: 0.3rem;
        background:rgba(9,187,7,1);
        border-radius: 0.44rem; 
      }

      .invite-info {
        margin-top: 0.48rem;
        font-size: 0.24rem;
        color: #888;
        .invite-info__default {
          color: #2A75ED;
        }
      }
    }

    .profitInfo{
      border-top:1px solid #eee;
      margin: 0.2rem 0 0.3rem;
      .profit-share {
              font-size: 0.28rem;
        }
       .profit-hint{
          font-size: 0.24rem;
          color: #888;
        }
    }

    .income-title, .invite-title {
      margin-top: 0.32rem;
      font-size: 0.34rem;
      font-weight: 600;
    }

    .bottomZ {
      bottom: 0;
    }

    .bottomT {
      bottom: -10rem;
    }
  }
</style>

