<template>
  <div>
    <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 v-if="styleDataNew.imgUrl" :style="styleDataNew.imgUrlStyle">
          <img :style="styleDataNew.imgUrl" src="//img10.360buyimg.com/imgzone/jfs/t1/201355/19/13533/1639/626245f2Ec44d0d67/cba9b91dd2967c4d.png" />
        </div>
        <div :style="styleDataNew.promptStyle">
          已成功邀请
          <span :style="styleDataNew.successnum">{{ shareUser }}</span>
          位好友
        </div>
      </div>
      <!-- <div v-if="isWebClick" :style="styleDataNew[keyData.shareStyle]"></div>
      <div v-else-if="!isWebClick && !endTime"></div>
      -->
      <div :style="styleDataNew[keyData.shareStyle]" v-lz-click="'2'" @click="setShareButton"></div>
    </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, getMemberRanking, 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: {},
      endTime: true
      // submit:'',
    };
  },
  created() {
    this.publicData.$on('getEndTime', res => {
      this.endTime = res;
      console.log(this.endTime, 'kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk');
      if (new Date().getTime() > res) {
        this.endTime = false;
      } else {
        this.endTime = true;
      }
    });
    //深拷贝重置需要
    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 {
      getMemberRanking(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: {
    toastMess() {
      this.$toast('请查看排行榜！');
    },
    //点击可修改位置的方法
    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 (!this.endTime) {
        this.$toast('不可再邀请好友');
        return;
      }
      this.doFrontBuryPoint({code: 'yqq-yqhy',value: '',event: 'click'})
      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">
.play {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-4.5deg);
  display: block;
  position: absolute;
  top: 0.2rem;
  width: 100%;
  font-weight: bold;
  color: white;
  border-bottom-left-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

.van-popup {
  width: 5rem;
  height: 3rem;
  display: flex;
  justify-content: center;
}
.inputshare {
  width: 100%;
  height: 2rem;
  font-size: 0.3rem;
}
</style>
