<template>
  <div
    :style="styleDataNew[keyData.setShareDiv]"
    ref="setShare"
    @click.stop="styleClick('click', 'setShare')"
    @mousemove.stop="styleClick('mousemove', 'setShare')"
    @mouseout.stop="styleClick('mouseout')"
    sty
  >
    <div :style="styleDataNew.successfriend">
      <div class="icon"></div>
      已成功邀请
      <span :style="styleDataNew.successnum"> {{ shareNum }} </span>
      位好友
    </div>
    <div v-if="isWebClick" :style="styleDataNew[keyData.shareStyle]"></div>
    <div
      v-else
      :style="styleDataNew[keyData.shareStyle]"
      v-lz-click="'2'"
      @click="setShareButton"
    ></div>

    <div v-if="toastShow" class="toastDiv">
      {{toastMessage}}
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import { ShareFollowShopPopComService } from "../../../util/comCreate.js";
import store from "../../../store/store.js"; //砍价客态
let { getInviteInfo } = apis1;
import Vue from "vue";
import { Popup, Toast } from "vant";
Vue.use(Popup);
import { allShare,memberShare } from "../../../js/share.js";

export default {
  props: [
    "datas",
    "styleData",
    "keyData",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      dataAll: {
        shopName: "",
      },
      shareNum: 0,
      xianshi: false,
      xianshi1: false,
      xianshi2: false,
      styleDataNew: {},
      styleDataOld: {},
      toastMessage:"",
      toastShow:false
      // submit:'',
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.styleDataNew = this.styleData;
    //初始化分享
    // title, content, url, logoUrl, callback, isHeader, mpIconUrl, shopid, userpin, jdactivityid
    this.isShowJoinType = this.datas.isShowJoinType
      ? this.datas.isShowJoinType
      : 1;
    this.activityType = sessionStorage.getItem("activityType");

    this.xianshi = this.datas.isShowInviteDrawNum;
    this.xianshi1 = this.datas.isShowInviteNum;

    this.initData();
  },
  mounted() {},

  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleDataNew,
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      var data = this.templateData;
      this.dataAll = data;
      if (this.isTemplate == true) {

      }else{
        getInviteInfo((data) => {
        this.shareNum = data.data.shareNum;
        if (data.data.sharesStatus == 2) {
          this.toastShow = true
          this.toastMessage = "您已经助力过该活动！"
          this.toastFun()
        } else if (data.data.sharesStatus == 1) {
          this.toastShow = true
          this.toastMessage = "您已成功完成助力！"
          this.toastFun()
        } else if (data.data.sharesStatus == 3) {
          //   this.toastShow = true
          // this.toastMessage = "您已经助力过该活动！"
          // this.toastFun()
        } else if (data.data.sharesStatus == 0) {
          ShareFollowShopPopComService.create((prizeRecordDetilClick) => {
            ShareFollowShopPopComService.close();
          });
        }
      });
      }
      
    },
    toastFun(){
        setTimeout(()=> {
          this.toastShow = false
        }, 2000);
    },
    setShareButton() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return
      }
      allShare(this.isTemplate, this, (callBackData) => { 
        console.log(callBackData, "callBackData");
      });
    },

    copyShare() {
      let div = document.getElementById("copy-content");
      let range = "";
      if (document.body.createTextRange) {
        //兼容ie
        range = document.body.createTextRange();
        range.moveToElementText(div);
        range.select();
      } else if (window.getSelection) {
        // 兼容非IE，比如Firefox/chrome
        let selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(div);
        selection.removeAllRanges();
        selection.addRange(range);
      }
      document.execCommand("Copy"); // 执行浏览器复制命令
      console.log("已复制好，可贴粘");
    },
  },
};
</script>

<style lang="scss">
.play {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-4.5deg);
  display: block;
  position: absolute;
  top: 0.2rem;
  width: 100%;
  font-weight: bold;
  color: white;
}

.van-popup {
  width: 100%;
  height: .8rem;
  display: flex;
  justify-content: center;
}
.inputshare {
  width: 100%;
  height: 2rem;
  font-size: 0.3rem;
}
.icon{
  width: .35rem;
  height: .3rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/6736/6/21437/633/61f0bb24Ef688f3a9/21a5b2ec7ed4f9dc.png);
  background-size: 100%;
  margin-right:.2rem
}
.toastDiv{
 position: fixed;
    z-index: 10000;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    height: .8rem;
    line-height: .8rem;
    opacity: 0.63;
    background: #000000;
    text-align: center;
    color: #FFFFFF;
    border-radius: .4rem;
    padding-left: .15rem;
    padding-right: .15rem;
    font-size: .3rem;
}
</style>
