<template>
  <div
    :style="styleDataNew[keyData.setShareDiv]"
    ref="setShare"
    @click.stop="styleClick('click', 'setShare')"
    @mousemove.stop="styleClick('mousemove', 'setShare')"
    @mouseout.stop="styleClick('mouseout')"
    sty
  >
    <!-- <van-popup v-model="show" class="van-popup">
      <div id="copy-content" class="inputshare">{{ url }}</div>
      <button @click="copyShare" class="sharebutton">复制邀请链接</button>
    </van-popup> -->

    <div
      v-if="isWebClick"
      :style="styleDataNew[keyData.shareStyle]"
    ></div>
    <div
      v-else
      :style="styleDataNew[keyData.shareStyle]"
      v-lz-click="'2'"
      @click="setShareButton"
    ></div>

    <div :style="styleDataNew[keyData.peopleStyle]" v-if="xianshi || xianshi1">
      <span
        v-show="xianshi"
        class="people play"
        :style="styleDataNew[keyData.people]"
      >
        已邀请
        <span :style="styleDataNew[keyData.peopleNum]">{{ shareUser }}</span>
        位好友
      </span>

      <p v-show="xianshi1" class="people" :style="styleDataNew[keyData.people]">
        <b v-if="!shangxian">
          已邀请
          <span :style="styleDataNew[keyData.peopleNum]">{{ shareUser }}</span>
          位好友
          <b v-if="needCumSignDay > 0">
            ,再邀请
            <span>{{ needCumSignDay }}</span>
            位好友可以抽奖
          </b>
        </b>
        <b v-if="shangxian">已邀请{{ shareUser }}位好友,抽奖次数已达活动上限</b>
      </p>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import join from "../../basisComponent/joinMemeber/join.vue";
import {
  JoinMembershipPopComService,
  joinMemberPopCom1Service,
} from "../../../util/comCreate.js";
import store from "../../../store/store.js"; //砍价客态
let { setShare, getMember, guest } = apis1;
import Vue from "vue";
import { Popup, Toast } from "vant";
Vue.use(Popup);
import { getUrlQueryValueByKey, changeStates } from "../../../util/tools.js";
import customInstructionUtil from "../../../util/directive/customInstruction.js";
import { memberShare } from "../../../js/share.js";

export default {
  components: {
    join,
  },
  props: [
    "datas",
    "styleData",
    "keyData",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      dataAll: {
        shopName: "",
      },
      memberUrl: "",
      name: "",
      img: "",
      shopNmae: "",
      xianshi: false,
      xianshi1: false,
      xianshi2: false,
      shareUser: 0, //已邀请人数
      shareNum: 0, //邀请几人送分
      hasCumSignDay: 0,
      needCumSignDay: 0,
      url: "",
      maxNum: "",
      shangxian: false,
      astrict: 0,
      styleDataNew: {},
      styleDataOld:{}
      // 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;

    if (this.isTemplate == true) {
    } else {
      getMember((data) => {
        this.shareUser = data.data.shareUser;
        this.memberUrl = data.data.memberUrl;
        this.name = data.data.name;
        this.img = data.data.img;
        this.shopNmae = data.data.shopNmae;
        this.shareNum = data.data.shareNum;
        this.shareUser = data.data.shareUser;
        this.hasCumSignDay = data.data.shareUser;
        this.maxNum = data.data.maxNum;
        this.astrict = data.data.astrict;

        this.needCumSignDay =
          this.shareNum - (this.hasCumSignDay % this.shareNum);

        var aa =
          parseInt(data.data.shareUser / data.data.shareNum) >=
          data.data.maxNum;
        if (this.astrict == 1 && aa) {
          this.shangxian = true;
        }
        //1 加入会员弹窗样式 2 加入会员页面样式
        if (data.data.status == 0 && store.state.shareUserId) {
          //客态非会员
          if (this.isShowJoinType == 1) {
            JoinMembershipPopComService.create(
              this.memberUrl,
              this.name,
              this.img,
              this.shopNmae,
              (submit) => {
                JoinMembershipPopComService.close();
              }
            );
          } else if (this.isShowJoinType == 2) {
            var activityType = sessionStorage.getItem("activityType");

            this.$router.replace({
              path: "/joinMemeber",
              query: {
                activityType: activityType,
                templateId: store.state.templateId,
                activityId: store.state.activityId,
                shareUserId: store.state.shareUserId,
                memberData: encodeURIComponent(JSON.stringify(data)),
              },
            });
          }
        } else if (data.data.status != 0 && store.state.shareUserId) {
          //客态 客变主
          console.log("客态 客变主");
          customInstructionUtil.changeStates();
        }
      });
    }
    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;
      let activityType = sessionStorage.getItem("activityType");
      if (activityType == 1 || activityType == 10001) {
        this.shopNameStyle = {
          width: "100%",
          display: "flex",
          "justify-content": "center",
          position: "absolute",
          top: "1.34rem",
          "text-align": "center",
          "font-size": "0.25rem",
          color: "#fff",
          "font-size": "0.28rem",
        };
      } else if (activityType == 2 || activityType == 10002) {
        this.shopNameStyle = {
          width: "100%",
          display: "flex",
          "justify-content": "center",
          position: "absolute",
          top: "1.34rem",
          "text-align": "center",
          "font-size": "0.25rem",
          color: "#d8271c",
          "font-size": "0.28rem",
        };
      } else if (activityType == 3 || activityType == 10003) {
        this.shopNameStyle = {
          width: "100%",
          display: "flex",
          "justify-content": "center",
          position: "absolute",
          top: "1.34rem",
          "text-align": "center",
          "font-size": "0.25rem",
          color: "#fff",
          "font-size": "0.28rem",
        };
      } else if (activityType == 5 || activityType == 10005) {
        this.componentsData = {
          basicCom: {
            isShow: true,
            styleData: {},
            datas: {},
            keyData: {},
          },
        };
      }
      this.dataAll = data;
    },

    setShareButton() {
      // if(sessionStorage.getItem('activityType') == 1){
      //   let path = process.env.wxPath;
      //   // let a = encodeURIComponent(`${process.env.wxPath}/#/myapp/pages/firstLoading/firstLoading?a=1&invitedId=${this.invitedId}&invitedTaskId=${this.invitedTaskId}`);
      //   let a = encodeURIComponent(location.href)
      //   // jdshare.callSharePane({
      //   //   title: '欢迎到访我的小窝,惊喜好礼等你拿',
      //   //   content: '欢迎到访我的小窝,惊喜好礼等你拿',
      //   //   url: 'https://m.jd.com',
      //   //   img: 'https://img10.360buyimg.com/imgzone/jfs/t1/130497/18/12144/112006/5f868727E840fbaf7/4840edf09006aa74.png',
      //   //   channel: 'Wxfriends',
      //   //   mpId: 'gh_3f27179ed84f',//gh_84ada2489c1e
      //   //   mpType: process.env.MPTYPE,

      //   //   // mpPath: `/pages/index/index?redirectUrl=${encodeURIComponent(`/taro/pages/frame/index?returnUrl=${a}&appId=${process.env.APPID}`)}`,
      //   //   mpPath:`/pages/index/index?encode_url=${encodeURIComponent(location.href)}`, // 仅 H5 落地页需要encodeURIComponent

      //   //   mpIconUrl: 'https://img10.360buyimg.com/imgzone/jfs/t1/130497/18/12144/112006/5f868727E840fbaf7/4840edf09006aa74.png'
      //   // });
      //   return;
      // }

      memberShare(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">
// .setShareDiv {
//   // position: absolute;
//   // position: absolute;
// //   background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/158013/1/2235/39780/5ff7cc59Ee7832f1e/09bb261679ab4fa2.png);
// }
// .setShareDiv{
//       width: 6rem;
//     height: 7rem;
//     top: 3rem;
//     position: absolute;
//     left: calc(50% - 3rem);
// }
.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: 5rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  // align-items: center;
}
.inputshare {
  width: 100%;
  height: 2rem;
  font-size: 0.3rem;
}
// .sharebutton {
//   position: absolute;
//   background: skyblue;
//   top: 1.5rem;
//   left: 0rem;
//   font-size: 0.5rem;
// }
</style>
