<template>
  <div
    v-if="isShow"
    :timer="timer"
    :style="styleData.backgroundImg"
    ref="bargainShareServion2"
    @click.stop="styleClick('click', 'bargainShareServion2')"
    @mousemove.stop="styleClick('mousemove', 'bargainShareServion2')"
    @mouseout.stop="styleClick('mouseout')"
  >
    <!-- <div v-if="unpackingStatus == 0 || unpackingStatus == 1"> -->

    <div v-if="!isHelpShare">
      <div>
        <div class="shareBack">
          <div
            v-for="(item, i) in fudaiData.helpNum"
            :key="i"
            :style="styleData.fxylxhb"
          >
            <img
              v-for="(list, j) in fudaiData.shareUserList"
              :key="j"
              v-if="i == j"
              :src="list.userImg"
              :style="styleData.fxylxhbimg"
            />
          </div>
        </div>
        <div
          :style="styleData.helpNumStyle"
          v-if="fudaiData.shareUserList.length >= fudaiData.helpNum"
        >
          已邀请{{ fudaiData.shareUserList.length }}人，任务完成！
        </div>
        <div :style="styleData.helpNumStyle" v-else>
          已助力{{ fudaiData.shareUserList.length }}人，还需邀请{{
            fudaiData.helpNum - fudaiData.shareUserList.length
          }}位好友哦~
        </div>
        <div
          v-if="unpackingStatus == 2 || unpackingStatus == 3"
          :style="styleData[keyData.shareStyle1]"
        ></div>
        <div
          v-else
          :style="styleData[keyData.shareStyle]"
          v-lz-click="'2'"
          @click="setShareButton"
        ></div>
      </div>
    </div>

    <div v-else-if="isHelpShare">
      <div v-if="isHelpStatus == 1">
        <div v-if="isWebClick">
          <div
            v-if="isFollowShop == 1"
            :style="styleData[keyData.helpShareStyle]"
          ></div>
          <div v-else :style="styleData[keyData.helpNoFollowShareStyle]"></div>
        </div>
        <div v-else>
          <div class="yaoQing">
            <img :src="initiatorImage" alt="" class="yaoQingImg" />
            <span class="yaoQingColor">{{ initiatorName | twostar }}：</span>
          </div>
          <div class="helpNoFollowShareStyle">
            小伙伴们，快来帮我打开福袋吧~
          </div>
          <div
            v-if="isFollowShop == 1"
            :style="styleData[keyData.helpShareStyle]"
            v-lz-click="'3'"
            @click="goHelpClick"
          ></div>
          <div
            v-else
            :style="styleData[keyData.helpNoFollowShareStyle]"
            v-lz-click="'3'"
            @click="goHelpClick"
          ></div>
        </div>
      </div>

      <div v-else :style="styleData[keyData.helpSuccessStyle]">
        <div class="yaoQing">
            <img :src="initiatorImage" alt="" class="yaoQingImg" />
            <span class="yaoQingColor">{{ initiatorName | twostar }}：</span>
          </div>
        <span v-if="isHelpStatus == 2">太热情了，已经帮我助力过了呦~</span>
        <span v-if="isHelpStatus == 3"
          >没有助力机会啦，活动期间只能助力一次呦~</span
        >
        <span v-if="isHelpStatus == 4">助力成功~</span>
        <div :style="styleData.helpJoinStyle" @click="joinAcClick">
        </div>
      </div>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
import Vue from "vue";
import { allShare, focusShopShare } from "../../../js/share.js";
import { helpOpenBagF } from "../../../js/task.js";

import { Popup } from "vant";
Vue.use(Popup);
import store from "../../../store/store.js";
import { getUrlQueryValueByKey } from "../../../util/tools.js";
export default {
  components: {},
  props: [
    "datas",
    "styleData",
    "keyData",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      timer: new Date().getTime(),
      dataAll: {
        shopName: "",
      },

      url: "",
      stime: "",
      etime: "",
      initiatorName: "",
      initiatorImage: "",
      dtimestamp: "", //当前时间
      isFocusShopShare: false, //是否是关注店铺分享
      isFollowShop: null, //是否需要关注店铺后参加活动
      isHelpShare: false, //是否是助力人进入
      isHelpStatus: null, //助力状态 1未助力 2已经给当前人助力助力 3已经给其他人助力 4 助力接口的助力成功
      unpackingStatus: 0, //拆包状态 0未拆包 1已拆包
      styleDataOld: {},
      fudaiData: {
        shareUserList: [],
        helpNum: 1,
      },
      isCustomSwitching: "1", //有tab切换时
      isShow: true,
    };
  },
  filters: {
    twostar: function (value) {
      if (!value) {
        return "";
      }
      return value.substr(0, 1) + "**" + value.substr(-1, 1);
    },
  },
  mounted() {
    this.initiatorName = store.state.nickName;
    this.initiatorImage = store.state.userImg;
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.isShow = true;
    var timestamp = new Date().getTime();
    this.dtimestamp = timestamp;
    this.publicData.$on("bargainTime", (startTime, endTime) => {
      this.stime = startTime;
      this.etime = endTime;
    });

    this.publicData.$on("isHelpStatus", (isHelpStatus) => {
      this.isHelpStatus = isHelpStatus;
    });

    this.isFocusShopShare = this.datas.isFocusShopShare == true ? true : false;
    this.publicData.$on("isFollowShop", (isFollowShop) => {
      console.log(isFollowShop, "isFollowShop");
      this.isFollowShop = isFollowShop; // 0 不需要关注店铺 1需要关注店铺
    });

    this.publicData.$on("unpackingStatus", (unpackingStatus) => {
      this.unpackingStatus = unpackingStatus; // 0 不需要关注店铺 1需要关注店铺
    });
    this.publicData.$on("fudaiData", (fudaiData) => {
      this.fudaiData = fudaiData; // 0 不需要关注店铺 1需要关注店铺
    });

    this.isHelpShare = store.state.shareUserId ? true : false;
    this.timer = new Date().getTime();

    this.publicData.$on(
      "clickPointsHelpFriend",
      (isCustomSwitching, refName) => {
        this.isCustomSwitching = isCustomSwitching;
        if (isCustomSwitching == "1") {
          this.isShow = true;
          this.isHelpShare = false;
          this.unpackingStatus = 1;
          this.isFollowShop = 0;
        } else if (isCustomSwitching == "2") {
          this.isShow = true;
          this.isHelpShare = false;
          this.isFollowShop = 1;
        } else if (isCustomSwitching == "3") {
          this.isShow = false;
        }
      }
    );

    console.log(this.isHelpShare, "this.isHelpShare");
  },
  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          styleDataOld: this.styleDataOld,
          isCustomSwitching: this.isCustomSwitching,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData(data) {
      this.dataAll = data;
    },
    //分享
    setShareButton() {
      if (this.isFocusShopShare == true) {
        let paramsData = {
          isFollowShop: this.isFollowShop,
        };
        focusShopShare(this, this.isTemplate, paramsData, () => {});
      } else {
        allShare(this.isTemplate, this, (callBackData) => {
          console.log(callBackData, "callBackData");
        });
      }
    },

    //助力
    goHelpClick() {
      helpOpenBagF(this, {}, (callBackData) => {
        if (callBackData == "success") {
          this.isHelpStatus = 4;
        }
      });
    },
    //我也要参与活动 清除shareUserId 重新加载页面
    joinAcClick() {
      store.commit("setShareUserId", null);
      let cur_url = location.href;
      console.log(cur_url, "cur_url");
      let shareUserIdIndex = cur_url.indexOf("shareUserId");
      let url1 = cur_url.substr(0, shareUserIdIndex - 1);
      let endUrl = url1 + "&shareUserId=";
      location.href = endUrl;
    },

    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"); // 执行浏览器复制命令
      this.$toast("已复制好，可粘贴");
      // console.log('已复制好，可贴粘');
    },
  },
};
</script>

<style lang="scss" scoped>
.yaoQing {
  display: flex;
  align-items: center;
  margin: 0 0 0.3rem 0.4rem;
}
.yaoQingImg {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.21rem;
}
.yaoQingColor {
  font-size: 0.24rem;
  color: #FFFFFF;
}
.helpNoFollowShareStyle {
  font-size: 0.3rem;
  color: #fff;
}
.shareBack {
  display: -webkit-box;
  // justify-content: center;
  overflow-x: auto;
  margin: 0 0.62rem 0.3rem;
}
.shareBack div:first-child {
  margin-left: 0 !important;
}
.play {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-4.5deg);
  display: block;
  position: absolute;
  top: 0.2rem;
  width: 100%;
  font-weight: bold;
  color: white;
}
.people span {
  color: #fbdd7d;
}
.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>
