<template>
  <div
    class="questionShareDivAllC"
    :style="styleData.questionShareDiv"
    v-show="show"
    ref="questionShare"
    @click="styleClick('click', 'questionShare')"
    @mousemove="styleClick('mousemove', 'questionShare')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="cotentDivAll" :style="styleData.cotentDivAll">
      <div class="countDivAll" :style="styleData.countDivAll">
        <div v-if="shareData.dayNum > 0">
          每成功分享<span class="countSpan" :style="styleData.countSpan">{{ shareData.shareNum }}</span>次，有机会获邀请奖励。今日还剩<span class="countSpan" :style="styleData.countSpan">{{ shareData.dayNum }}</span>次领奖机会
        </div>
        <div v-else>今日奖励已经发完啦，欢迎明日再来~</div>
      </div>

      <div class="ownDivAll" :style="styleData.ownDivAll">
        <div class="ownLeftDiv" :style="styleData.ownLeftDiv">
          <div class="ownHeaderDiv" :style="styleData.ownHeaderDiv"><img class="headerImg" :src="userImg" /></div>

          <div>{{nickName}}</div>
        </div>

        <div class="shareBtn" v-if="shareData.shareStatus == 0" :style="styleData.shareBtn" @click="shareFriend(shareData.shareStatus)"></div>
        <div class="shareBtn" v-else :style="styleData.shareBtnGray" @click="shareFriend(shareData.shareStatus)"></div>
      </div>
      <div class="shareText" @click="sharePopUpClick()" :style="styleData.shareText">邀请好友>></div>
    </div>
  </div>
</template>

<script>
import apis1 from '../../../util/apis1.js';
let { questionnaireShare } = apis1;
import { allShare } from '../../../js/share.js';
import store from "../../../store/store.js"; //砍价客态
import { ShareFriendPopComService } from '../../../util/comCreate.js';

export default {
  props: ['datas', 'styleData', 'keyData', 'isTemplate', 'templateData', 'isWebClick', 'modifyContent'],
  data() {
    return {
      userImg:"//img10.360buyimg.com/imgzone/jfs/t1/140415/26/29735/8437/632c0adeE1fc04297/4890ff916911c45a.png",//头像
      nickName:"",//昵称
      shareData: {
        dayNum: 0,
        shareNum: 0,
        shareStatus: 0 //0--可以邀请 1--达到每日上限  2--达到领取上限
      },
      show:false,
      shopId:''
    };
  },
  created() {
    this.userImg = store.state.userImg ? store.state.userImg : "//img10.360buyimg.com/imgzone/jfs/t1/140415/26/29735/8437/632c0adeE1fc04297/4890ff916911c45a.png";
    this.nickName = store.state.nickName ? store.state.nickName : "测试模板";
    this.shopId = store.state.shopId ? store.state.shopId : "734259";
    this.initData();
  },
  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          styleDataOld: this.styleDataOld
        };
        this.$emit('opertaionCom', type, byValue);
      }
    },
    initData() {
      if (this.isTemplate) {
        if (this.templateData) {
          this.userImg = '//img10.360buyimg.com/imgzone/jfs/t1/140415/26/29735/8437/632c0adeE1fc04297/4890ff916911c45a.png';
          this.nickName = '爱喝奶茶的熊猫';
          let rules = this.templateData.shareCourtesy.rules;
          rules.shareStatus = 0;
          this.shareData = rules;
          this.show = this.templateData.shareCourtesy.rules.isOpen == '1'? true:false
          if(this.show){
            this.shareData.dayNum = this.templateData.shareCourtesy.draw.prizeList[0].winNumberDay
          }
          
        } else {
          this.show = true
          this.shareData = {
            dayNum: 1,
            shareNum: 1,
            shareStatus: 0 //0--可以邀请 1--达到每日上限  2--达到领取上限
          }
        }
      } else {
        questionnaireShare(callBackData => {
          console.log(callBackData, '分享组件数据');
          this.shareData = callBackData.data;
           this.show = this.shareData.shareStatus != '3'? true:false
        });
      }
    },
    //分享
    shareFriend(shareStatus) {
       if (this.isWebClick){
         return;
       }
      if (this.isTemplate == true) {
        this.$toast('活动预览，仅供查看');
        return;
      }
      let actStatus = sessionStorage.getItem('actStatus');
      if (actStatus == 1) {
        this.$toast('活动尚未开始');
        return;
      }
      if (actStatus == 2) {
        this.$toast('活动已结束');
        return;
      }
      if (shareStatus == 0) {
        allShare(this.isTemplate, this, callBackData => {
          console.log(callBackData, '邀请好友');
        });
      } else if (shareStatus == 1) {
        this.$toast('您的分享已达今日上限~');
        return;
      } else if (shareStatus == 2) {
        this.$toast('最大领奖次数已达上限~');
        return;
      }
    },
    sharePopUpClick(){
      if (this.isWebClick){
         return;
       }
      if (this.isTemplate == true) {
        this.$toast('活动预览，仅供查看');
        return;
      }
      let actStatus = sessionStorage.getItem('actStatus');
      if (actStatus == 1) {
        this.$toast('活动尚未开始');
        return;
      }
      if (actStatus == 2) {
        this.$toast('活动已结束');
        return;
      }
       ShareFriendPopComService.create(prizeRecordDetilClick => {
            ShareFriendPopComService.close();
          });
    }
  }
};
</script>

<style lang="scss">
.questionShareDivAllC {
  background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/25414/38/20025/12644/6327c6b7E5b0e434d/a3947890acd2a575.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 6.9rem;
  height: 3.98rem;
  margin-left: calc(50% - 6.9rem / 2);
  margin-bottom: 0.4rem;
  padding-top: 1.06rem;
  .cotentDivAll {
    width: 6.57rem;
    height: 2.67rem;
    background: #ffffff;
    border-radius: 0.1rem;
    margin-left: calc(50% - 6.57rem / 2);
    .countDivAll {
      width: 6rem;
      height: 0.69rem;
      background: #cef6f7;
      border-radius: 0 0 0.1rem 0.1rem;
      margin-left: calc(50% - 6rem / 2);
      font-size: 0.24rem;
      color: #666666;
      display: flex;
      justify-content: center;
      align-items: center;
      .countSpan {
        color: #1a44ed;
      }
    }
    .ownDivAll {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0.3rem 0.38rem 0 0.38rem;
      .ownLeftDiv {
        display: flex;
        align-items: center;
        font-size: 0.24rem;
        color: #333333;
      }
      .ownHeaderDiv {
        border-radius: 50%;
        width: 1.2rem;
        height: 1.2rem;
        border: 2px solid #1a44ed;
        margin-right: 0.1rem;
        .headerImg{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .shareBtn {
        background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/50942/28/21590/3605/632963beE5749a7d4/95c1f9a5ef7c07be.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 1.82rem;
        height: 0.7rem;
      }
    }
    .shareText{
      text-align: right;
      font-size: .24rem;
      color: #1a44ed;
      margin-right: .38rem;

    }
  }
}
</style>
