<template>
  <div
    :style="styleData.opportunityBigBox"
    class="moveOpportunityNew"
   
  >
    <div class="opportunityNumberText" :class="{'reset-opportunityNumberText' : activityType == '10054' && actStatus == '1'}" :style="styleData.opportunityNumberText">可抽签: {{ restDrawCount }}次</div>
    <div v-if="task.length > 0" class="opportunityNumberImg" :class="{'reset-opportunityNumberImg' : activityType == '10054' && actStatus == '1'}" @click="dialogMoreNew" :style="styleData.opportunityNumberImg" >更多抽签机会 >></div>
    <div v-if="!isWebClick"
      :class="teskShadowShow ? 'teskShadow' : 'teskShadowhide'"
      :style="styleData.teskShadowShow"
    >
      <div
        :class="teskShadowShow ? 'teskPopStyleShow' : 'teskPopStyleShowhide'"
      >
        <div
          class="teskShadowButton"
          @click="teskClose"
          :style="styleData.teskShadowButton"
        ></div>
        <div class="teskShadowTesk" :style="styleData.teskShadowTesk">
          <div
            v-for="(item, index) in help"
            :key="index"
            v-if="taskShow(item) == '邀请助力' && helperList.length != 1"
          >
            <div class="helptext">
              <div class="invitationtext">
                每邀请 {{ item.completeCount }} 位好友，获得
                {{ item.sendNum }} 次机会
              </div>
              <img
                @click="helpClick(item)"
                class="invitationimg"
                src="https://img10.360buyimg.com/imgzone/jfs/t1/154019/35/16423/1767/601291d6Ec06a8cfd/381ea93f5ccaa824.png"
                alt
              />
            </div>
            <div class="swiper-container assist">
              <div class="swiper-wrapper assistcontent" :class="'helpBlock'">
                <div
                  class="swiper-slide"
                  v-for="(data, index) in helperList"
                  :key="index"
                  :class="helperList.length > 8 ? '' : 'helpImg'"
                  @click="helpClick(item)"
                >
                  <img :src="data.userImg" alt :class="'helpImg'" />
                </div>
              </div>
            </div>
          </div>
          <div
            v-for="(item, index) in taskList"
            :key="item.taksId"
            class="playTesk"
            :style="styleData.playTesk"
            v-if="taskShow(item) != '邀请助力'"
          >
            <div class="playdiv">
              <div
                class="playbox"
                :class="`playTeskIcon${item.taskType}`"
              ></div>
              <div class="keyeediv" :key="keyee">
                <p class="teskname">{{ taskShow(item) }}</p>
                <span class="teskNowTesk" v-if="taskOpportunityProgressText(item, index)">
                  ({{ taskOpportunityProgressText(item, index) }})
                </span>
                <p class="teskNowp">
                  {{ item.description }}{{ item.finishNum }}次,获得{{
                    item.sendNum
                  }}次机会
                </p>
              </div>
            </div>
            <div
              class="teskButton"
              :class="taskOpportunityDisabled(item, index) ? 'btnGray' : ''"
              @click="
                taskOpportunityDisabled(item, index)
                  ? noneClick(item, index)
                  : teskButtonChange(item.taskType, index, item)
              "
              v-lz-click="item.type"
              :key="restDrawCount"
            >
              {{
                item.status == 1 ||
                taskOpportunityDisabled(item, index)
                  ? btnText[index]
                  : taskShow(item)
              }}
            </div>
          </div>
          <div
            v-if="taskList.length == 0 && helperList.length == 0"
            class="metadatadiv"
          >
            <img
              class="metadataspan"
              src="https://img01.yzcdn.cn/vant/empty-image-default.png"
              alt
            />
            <p class="metadatatext">暂无数据</p>
          </div>
        </div>
      </div>
    </div>
    <show-tesk-pop
      @teskFinsin="teskFinsin"
      @teskShow="teskShow"
      @nowKeydata="nowKeydata"
      :restDrawCount="sendNum"
      :chlidGray="childBtnGray"
      :nowindex="nowClickBtn"
      :isWebClick="isWebClick"
    ></show-tesk-pop>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
import bus from "../../../util/bus.js";
import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";
import showTeskPop from "../popCom/showTeskPop.vue";
// import dialogMoreNew from "../button/dialogMoreNew.vue";
import { allShare } from "../../../js/share.js";
import { goToShopPage,removeUrlShareUserId } from "../../../util/tools";
import { Toast } from "vant";
import store from "../../../store/store.js";
let {
  upperSign,
  lotteryCenter,
  followShop,
  signMainRequest,
  shareTask,
  drawPrize,
  cardFriendHelpList,
  bargainFriends,
  storeGoodsPoint
} = apis1;
import {
  TaskPopComServiceNew,
  FollowSkuPopNewComService,
} from "../../../util/comCreate.js";
import {ShopPopComNewService} from '../../../util/hdzxtcomCreate.js';

export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  components: {
    showTeskPop,
  },
  data() {
    return {
      restDrawCount: 0, //剩余次数
      teskShadowShow: false,
      teskButton: true,
      btnGray: [], //控制按钮是否变灰
      teskButtonText: "",
      taskList: [], // 任务列表
      task: [], // 任务列表
      help: [],
      teskList: [], //当前活动商品列表
      helperList: [
        //好友助力列表
        {
          id: 0,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/169633/2/4710/1792/6012932cE356a2c9a/3446b6abe26a05ce.png",
        },
        {
          id: 1,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/169633/2/4710/1792/6012932cE356a2c9a/3446b6abe26a05ce.png",
        },
        {
          id: 2,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/169633/2/4710/1792/6012932cE356a2c9a/3446b6abe26a05ce.png",
        },
        {
          id: 3,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/169633/2/4710/1792/6012932cE356a2c9a/3446b6abe26a05ce.png",
        },
        {
          id: 4,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/169633/2/4710/1792/6012932cE356a2c9a/3446b6abe26a05ce.png",
        },
        {
          id: 5,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/169633/2/4710/1792/6012932cE356a2c9a/3446b6abe26a05ce.png",
        },
        {
          id: 6,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/169633/2/4710/1792/6012932cE356a2c9a/3446b6abe26a05ce.png",
        },
        {
          id: 7,
          userImg:
            "https://img10.360buyimg.com/imgzone/jfs/t1/169633/2/4710/1792/6012932cE356a2c9a/3446b6abe26a05ce.png",
        },
      ],
      keyee: 0, //控制key值
      btnText: [], //控制按钮置灰后文字
      teskPop: false, //控制二级遮罩层显示隐藏
      nowClickBtn: 0, //当前点击的按钮
      sendNum: [], //当前点击活动的数据
      status: 0, //当前活动状态
      childBtnGray: [], //控制二级遮罩层按钮置灰
      completeCount: [], //当前完成次数
      lastClick: null,
      styleDataOld: {},
      dataListLength: 0,
      isShowDrawCount: false, //是否显示抽次数
      isStartPlay: false, //是否可以点击抽奖
      hideCircle: false, //是否隐藏圆点图片
      showShare: false, // pop页显示分享任务
      showFoll: false, // pop页显示关注任务
      showBuy: false, // pop页显示购买商品任务
      pointFoll: 1, // pop页显示分享任务
      pointShare: 3, // pop页显示关注任务
      pointBuy: 2, // pop页显示购买商品任务
      activityType:'',
      actStatus:''
    };
  },
  computed: {
    contractFile() {
      return store.state.fenxiang;
    },
  },
  watch: {
    contractFile: {
      immediate: true,
      handler: function (newval) {
        if (newval) {
          let taskShareData = JSON.parse(
            sessionStorage.getItem("taskShareData")
          );
          let skuid = "";
          if (taskShareData.taskType == 9) {
            let shareSku = this.shareSku(taskShareData);
            if (!shareSku || !shareSku.skuId) {
              this.$toast("商品信息异常，请稍后再试");
              return;
            }
            skuid = shareSku.skuId;
          }
          shareTask(taskShareData.taskId, skuid, (data) => {
            store.commit("setFenXiang", false);
            this.initData();
          });
        }
      },
    },
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initdata();
    if (this.isWebClick) {
      this.dataListLength = 1;
    }
    this.publicData.$on("xhyFollowSkuTask", (xhyFollowSkuTask) => {
      if (xhyFollowSkuTask) {
        this.initdata();
      }
    });
    this.activityType = sessionStorage.getItem('activityType')
    this.publicData.$on('activityLoaded', (data) => {
      this.actStatus = data.actStatus
    });
  },
  mounted() {},
  updated() {
    if (this.helperList.length > 8 && this.helperList.length != 1) {
      //如果助力人数大于8则启用Swiper
      var swiper = new Swiper(".swiper-container", {
        slidesPerView: 8,
        freeMode: true,
        spaceBetween: 0,
      });
    }
    bus.$on("restDrawCount", (content) => {
      //接收剩余抽奖次数
      this.restDrawCount = content;
      //将剩余抽奖次数数据赋值
    });
    bus.$on("nowStatus", (content, index, nowindex) => {
      if (this.taskList[nowindex].skuInfoVO[index].status == 0) {
        this.taskList[nowindex].skuInfoVO[index].status = 1;
      }
    });
    this.taskList.map((item) => {
      item.type = this.lzNum(item);
    });
  },
  methods: {
    shareSku(taskShareData) {
      if (!taskShareData || !taskShareData.skuInfoVO || taskShareData.skuInfoVO.length <= 0) {
        return null;
      }
      let finishNum = Number(taskShareData.finishNum) || 1;
      let rawCount = taskShareData.completeCount !== undefined ? taskShareData.completeCount : taskShareData.shareCount;
      let completeTimes = Math.floor((Number(rawCount) || 0) / finishNum);
      if (taskShareData.dayCompleteCount != null) {
        completeTimes = Number(taskShareData.dayCompleteCount) || 0;
      } else if (taskShareData.activeCompleteCount != null) {
        completeTimes = Number(taskShareData.activeCompleteCount) || 0;
      }
      return taskShareData.skuInfoVO[completeTimes % taskShareData.skuInfoVO.length] || taskShareData.skuInfoVO[0];
    },
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initdata() {
      if (this.isTemplate) {
        if (!this.isWebClick) {
          Toast("活动预览，仅供查看");
        }
        this.dataList = [1];
        var datasAll = this.templateData;
        if (datasAll) {
          this.dataListLength = datasAll.basicTask.taskList.length - 1;
          console.log(datasAll, "datasAll");
          if (datasAll.basicTask.taskList) {
            datasAll.basicTask.taskList.forEach((v, i) => {
              if (v.taskType == 20) {
                this.restDrawCount = v.rule.freeChargeRule.sendNum;
              }
            });
          }
        }else{
          this.dataListLength = 1
          console.log(datasAll, "datasAll");
          if (datasAll.basicTask.taskList) {
            datasAll.basicTask.taskList.forEach((v, i) => {
              if (v.taskType == 20) {
                this.restDrawCount = v.rule.freeChargeRule.sendNum;
              }
            });
          }
        }
        return;
      }
      // drawPrize((initdatas) => {
      //   //调用礼品接口
      //   let prizelist = initdatas.data.prizeInfo;
      //   this.restDrawCount = initdatas.data.drawNumber;
      //   bus.$emit("restDrawCount", this.restDrawCount); //将抽奖次数提供出去
      //   bus.$emit("ourprizeList", prizelist); //将礼品列表提供出去
      // });
      // let actStatus = sessionStorage.getItem("actStatus");
      // if (actStatus == 2) {
      //   Toast("活动已结束");

      // }
      // if (actStatus == 1) {
      //   Toast("活动尚未开始");
      //   drawPrize((initdatas) => {
      //     //调用礼品接口
      //     let prizelist = initdatas.data.prizeInfo;
      //     this.restDrawCount = initdatas.data.drawNumber;
      //     bus.$emit("restDrawCount", this.restDrawCount); //将抽奖次数提供出去
      //     bus.$emit("ourprizeList", prizelist); //将礼品列表提供出去
      //   });
      // }
      bus.$emit("teskPop", this.teskPop);

      bus.$on("restDrawCount", (content) => {
        this.restDrawCount = content; //初始化剩余次数
      });
      //数据初始化
      sessionStorage.setItem("taskShare", "");
      upperSign((mainDatas) => {
        //调用任务接口
        console.log(mainDatas, "biubiu");
        this.dataListLength = mainDatas.data.taskList.length;
        this.task = mainDatas.data.taskList;
        bus.$emit("data", mainDatas.data);
        drawPrize((initdatas) => {
          //调用礼品接口
          let prizelist = initdatas.data.prizeInfo;
          this.restDrawCount = initdatas.data.drawNumber;
          bus.$emit("restDrawCount", this.restDrawCount); //将抽奖次数提供出去
          bus.$emit("ourprizeList", prizelist); //将礼品列表提供出去
        });
        console.log(mainDatas, "upperSign");
        var ms = 2000;
        this.lastClick = Date.now() - ms;
        bargainFriends((data) => {
          //调用好友助力接口
          console.log(data.data.num, "friden");
          this.task.map((item) => {
            if (item.taskType == 15) {
              this.$set(item, "num", data.data.num);
              this.$set(item, "friends", data.data.friends);
            }
          });
          setTimeout(() => {
            if (mainDatas.data.status == 1) {
              Toast("助力成功");
            } else if (mainDatas.data.status == 2) {
              Toast("已助力");
            } else if (mainDatas.data.status == 3) {
              Toast("助力失败");
            } else if (mainDatas.data.status == 4) {
              Toast("自己不能给自己助力！");
            } else if (mainDatas.data.status == 5) {
              Toast("您已为其他好友助过力了~");
            }
          }, 500);
          setTimeout(() => {
           if(store.state.shareUserId){
              removeUrlShareUserId()
           }
          }, 800);
          data.data.friends.forEach((v, i) => {
            this.helperList.splice(i, 1, v);
          });
        });
        mainDatas.data.taskList.forEach((v, i) => {
          console.log(v);
          if (v.taskType == 15) {
            this.help.push(v); //将邀请助力赋值
          } else {
            this.taskList.splice(i, 1, v); //将当前所有任务赋值
          }
          if (v.status == 1) {
            //判断任务是否已经完成
            this.btnGray.push(true);
          } else {
            this.btnGray.push(false);
          }
          if (v.taskType == 15) {
          } else {
            this.completeCount.splice(i, 1, v.completeCount); //将当前任务完成状态赋值
          }
          if (v.taskType == 1) {
            //将按钮置灰后文字赋值
            this.btnText.push("已关注");
          } else if (v.taskType == 2) {
            this.btnText.push("已浏览");
          } else if (v.taskType == 3) {
            this.btnText.push("已浏览");
          } else if (v.taskType == 4) {
            this.btnText.push("已浏览");
          } else if (v.taskType == 5) {
            this.btnText.push("已关注");
          } else if (v.taskType == 6) {
            this.btnText.push("已预约");
          } else if (v.taskType == 7) {
            this.btnText.push("已加购");
          } else if (v.taskType == 13) {
            this.btnText.push("已开卡");
            // if (v.status == 2) {
            //   shareTask(v.taskId, "", (data) => {
            //     console.log(data, "vipCard");
            //     if (data.data.status == 1) {
            //       this.restDrawCount += v.sendNum;
            //       bus.$emit("restDrawCount", this.restDrawCount); //将当前剩余次数提供
            //     } else {
            //       this.btnText.push("会员开卡");
            //       this.btnGray[i] = true; //控制当前点击的按钮变灰
            //       this.completeCount[i] = 0; //控制当前任务完成进度
            //     }
            //   });
            // }
          } else if (v.taskType == 14) {
            this.btnText.push("已签到");
          }
        });
        console.log('xhy')
      });
      this.publicData.$emit("xhyFollowSkuTask", false);
    },
    lzNum(item) {
      console.log(item, "lznum");
      if (item.taskType == 1) {
        //关注店铺
        return "7";
      } else if (item.taskType == 2) {
        //浏览店铺
        return "4";
      } else if (item.taskType == 4) {
        //浏览会场
        return "6";
      } else if (item.taskType == 14) {
        //每日签到
        return "13";
      } else if (item.taskType == 15) {
        //邀请助力
        return "3";
      } else {
        return "";
      }
    },
    teskShow(val) {
      this.teskPop = val;
    },
    teskFinsin(val) {
      console.log(this.btnGray, val, "val");
      this.btnGray[val - 1] = true;
    },
    isLimitEnabled(limit) {
      return limit && limit.limitType == 1 && limit.limitNum >= 0;
    },
    safeNum(value) {
      return Number(value) || 0;
    },
    isBothLimitTask(item) {
      return item && [2, 3, 4, 9, 10, 12].indexOf(Number(item.taskType)) > -1;
    },
    taskAvailableCount(item) {
      let activeOn = this.isLimitEnabled(item.activeLimit);
      let dayOn = this.isLimitEnabled(item.dayLimit);
      if (item.availableCount !== undefined && item.availableCount !== null) {
        let availableCount = this.safeNum(item.availableCount);
        return availableCount === 2147483647 ? '不限' : Math.max(0, availableCount);
      }
      let finishNum = this.safeNum(item.finishNum) || 1;
      let rawCount = item.completeCount !== undefined ? item.completeCount : item.shareCount;
      if (!activeOn && !dayOn) {
        if (item.maxNum === undefined || item.maxNum === null || this.safeNum(item.maxNum) < 0) {
          return '不限';
        }
        return Math.max(0, this.safeNum(item.maxNum) - Math.floor(this.safeNum(rawCount) / finishNum));
      }
      let dayComplete = item.dayCompleteCount === undefined || item.dayCompleteCount === null
        ? Math.floor(this.safeNum(rawCount) / finishNum)
        : this.safeNum(item.dayCompleteCount);
      let activeComplete = item.activeCompleteCount === undefined || item.activeCompleteCount === null
        ? Math.floor(this.safeNum(rawCount) / finishNum)
        : this.safeNum(item.activeCompleteCount);
      let dayRemain = dayOn ? Math.max(0, this.safeNum(item.dayLimit.limitNum) - dayComplete) : Number.POSITIVE_INFINITY;
      let activeRemain = activeOn ? Math.max(0, this.safeNum(item.activeLimit.limitNum) - activeComplete) : Number.POSITIVE_INFINITY;
      let available = item.availableCount === undefined || item.availableCount === null
        ? Math.min(dayRemain, activeRemain)
        : this.safeNum(item.availableCount);
      return available === Number.POSITIVE_INFINITY || available === 2147483647 ? '不限' : Math.max(0, available);
    },
    taskAvailableText(item) {
      if (!this.isBothLimitTask(item)) {
        return '';
      }
      let activeOn = this.isLimitEnabled(item.activeLimit);
      let dayOn = this.isLimitEnabled(item.dayLimit);
      let finishNum = this.safeNum(item.finishNum) || 1;
      let rawCount = item.completeCount !== undefined ? item.completeCount : item.shareCount;
      let dayComplete = item.dayCompleteCount === undefined || item.dayCompleteCount === null
        ? Math.floor(this.safeNum(rawCount) / finishNum)
        : this.safeNum(item.dayCompleteCount);
      let activeComplete = item.activeCompleteCount === undefined || item.activeCompleteCount === null
        ? Math.floor(this.safeNum(rawCount) / finishNum)
        : this.safeNum(item.activeCompleteCount);
      let dayRemain = dayOn ? Math.max(0, this.safeNum(item.dayLimit.limitNum) - dayComplete) : Number.POSITIVE_INFINITY;
      let activeRemain = activeOn ? Math.max(0, this.safeNum(item.activeLimit.limitNum) - activeComplete) : Number.POSITIVE_INFINITY;
      if (activeOn && activeRemain <= 0) {
        return Number(item.taskType) == 9 ? '活动期间分享次数已全部用完' : '活动期间次数已用完';
      }
      if (dayOn && dayRemain <= 0) {
        return Number(item.taskType) == 9 ? '今日分享次数已用完，明天可继续参与' : '今日次数已用完，明天可继续参与';
      }
      let available = this.taskAvailableCount(item);
      if (available === '不限') {
        return '';
      }
      return dayOn ? '今日可完成' + available + '次' : '还可完成' + available + '次';
    },
    taskOpportunityMax(item) {
      if (!item || item.maxNum === undefined || item.maxNum === null || this.safeNum(item.maxNum) < 0) {
        return 0;
      }
      return (this.safeNum(item.finishNum) || 1) * this.safeNum(item.maxNum);
    },
    taskOpportunityComplete(item, index) {
      let complete = this.completeCount[index];
      return this.safeNum(complete === undefined || complete === null ? item.completeCount : complete);
    },
    taskLegacyDisabled(item, index) {
      let max = this.taskOpportunityMax(item);
      return max > 0 && this.taskOpportunityComplete(item, index) >= max;
    },
    taskOpportunityDisabled(item, index) {
      if (item.status == 1) {
        return true;
      }
      if (this.isBothLimitTask(item)) {
        return this.taskAvailableCount(item) === 0;
      }
      return this.taskLegacyDisabled(item, index);
    },
    taskOpportunityProgressText(item, index) {
      let availableText = this.taskAvailableText(item);
      if (availableText) {
        return availableText;
      }
      let max = this.taskOpportunityMax(item);
      if (max <= 0) {
        return '';
      }
      return Math.min(this.taskOpportunityComplete(item, index), max) + ' / ' + max;
    },
    dialogMoreNew() {
      if(this.isWebClick){
        console.log('444')
        return

      }
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      const self = this;
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      TaskPopComServiceNew.create(
        "非常遗憾，您与大奖擦肩而过~",
        this.isTemplate,
        this.showShare,
        this.showFoll,
        this.showBuy,
        this.restDrawCount,
        this.pointFoll,
        this.pointShare,
        this.pointBuy,
        this.task,
        (submit) => {
          let dataType = {};
          TaskPopComServiceNew.close();
          if (typeof submit == "string") {
            dataType = JSON.parse(submit);
          }
          console.log("cccc" + typeof submit);
          //浏览店铺
          if (dataType.type == 2) {
            shareTask(dataType.data.taskId, "", (data) => {
              //调用任务接口
              this.initdata();
              Toast("关注店铺成功");
            });
            storeGoodsPoint(4)
            goToShopPage(dataType.data.shopId);
          }
          //关注商品
          if (dataType.type == 5) {
            this.followSku(dataType.data);
          }
          //浏览商品
          if (dataType.type == 3) {
            this.followSku(dataType.data);
          }
          //浏览会场
          if (dataType.type == 4) {
            shareTask(dataType.data.taskId, "", (data) => {
              location.href = dataType.data.meetUrl;
            });
          }
          //会员开卡
          if (dataType.type == 13) {
            location.href = dataType.data.openCardUrl;
          }
          //关注店铺
          if (dataType.type == 1) {
            shareTask(dataType.data.taskId, "", (data) => {
              //调用任务接口
              this.initdata();
              Toast("关注店铺成功");
            });
          }
          //预约商品
          if (dataType.type == 6) {
            this.followSku(dataType.data);
          }
          //加购商品
          if (dataType.type == 7) {
            this.followSku(dataType.data);
          }
          //每日签到
          if (dataType.type == 14) {
            shareTask(dataType.data.taskId, "", (data) => {
              this.initdata();
            });
          }
          //邀请助力
          if (dataType.type == 15) {
            this.helpClick(dataType.data);
          }
          if(dataType.type == 8){
            let data = dataType.data
            sessionStorage.setItem("taskShare", "taskShare");
            ShopPopComNewService.create(data, this.restDrawCount, this.styleData, (submit) => {
              // console.log("22222222cccc" + submit);
              sessionStorage.setItem("taskShare", "");
              ShopPopComNewService.close();
              this.restDrawCount = this.restDrawCount + submit;
              this.initdata()
            });
          }
        }
      );
    },
    followSku(item) {
      let data = item;
      sessionStorage.setItem("taskShare", "taskShare");
      FollowSkuPopNewComService.create(data, this.restDrawCount, (submit) => {
        console.log("cccc" + submit);
        sessionStorage.setItem("taskShare", "");
        this.initdata();
        FollowSkuPopNewComService.close();
      });
    },
    moveOpport() {
      if (!this.isWebClick) {
        if (this.isTemplate) {
          this.$toast("活动预览，仅供查看");
          return;
        }
        let actStatus = sessionStorage.getItem("actStatus");
        if (actStatus == 2) {
          Toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          Toast("活动尚未开始");
          return;
        }
        this.teskShadowShow = !this.teskShadowShow; //控制任务列表收放
        document.documentElement.style.overflowY = "hidden"; //开启禁止屏幕滚动
      }
    },
    teskClose() {
      this.teskShadowShow = !this.teskShadowShow; //控制任务列表收放
      document.documentElement.style.overflowY = "auto"; //取消禁止屏幕滚动
    },
    helpClick(item) {
      //好友助力按钮
      var url = "";
      url = location.href;
      //点击分享
      console.log(url);
      allShare(this.isTemplate, this, (callBackData) => {});
      if (this.helperList.length > 8) {
        //如果助力人数大于8则启用Swiper
        var swiper = new Swiper(".swiper-container", {
          slidesPerView: 8,
          freeMode: true,
          spaceBetween: 0,
        });
      }
    },
    teskButtonChange(text, index, item) {
      //任务列表按钮
      console.log(this.completeCount[index]);
      let actStatus = sessionStorage.getItem("actStatus");
      bus.$emit("completeCount", this.completeCount[index]); //将当前任务完成进度提供出去
      if (actStatus == 2) {
        //判断活动是否开始
        Toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        Toast("活动尚未开始");
        return;
      }
      if (item.validType == 1) {
        var nowTime = new Date().getTime();
        if (nowTime < item.startTime) {
          Toast("任务未开始");
          return;
        }
        if (nowTime > item.endTime) {
          Toast("任务已结束");
          return;
        }
      }
      this.sendNum = item; //将当前任务信息赋值
      this.nowClickBtn = index; //将当前点击的按钮赋值
      if (item.skuInfoVO) {
        //如果当前点击的按钮有额外的商品列表
        this.teskList = item.skuInfoVO;
        item.skuInfoVO.forEach((v, i) => {
          this.childBtnGray.splice(i, 1, false);
        });
      } else {
        this.teskList = [];
      }
      if (text == 1) {
        //关注店铺
        this.btnGray[index] = true; //控制当前点击的按钮变灰
        this.btnText[index] = "已关注"; //控制按钮变灰后的文字
        this.completeCount[index]++; //控制当前任务完成进度
        shareTask(item.taskId, "", (data) => {
          //调用任务接口
          Toast("关注店铺成功");
        });

        this.restDrawCount += item.sendNum; //任务完成后当前次数增加
      } else if (text == 2) {
        //浏览店铺
        this.btnGray[index] = true; //控制当前点击的按钮变灰
        this.btnText[index] = "已浏览"; //控制按钮变灰后的文字
        this.completeCount[index]++; //控制当前任务完成进度
        shareTask(item.taskId, "", (data) => {}); //调用任务接口
        storeGoodsPoint(4)
        goToShopPage(item.shopId); //跳转到店铺
        this.restDrawCount += item.sendNum; //任务完成后当前次数增加
      } else if (text == 3) {
        //浏览商品
        if (this.status == 0) {
          this.btnText[index] = "已浏览"; //控制按钮变灰后的文字
        }
        this.teskPop = !this.teskPop; //控制当前商品遮罩层显示隐藏
        bus.$emit("completeCount", this.completeCount[index]);
        bus.$emit("teskPop", this.teskPop);
      } else if (text == 4) {
        //浏览会场
        this.btnGray[index] = true; //控制当前点击的按钮变灰
        this.btnText[index] = "已浏览"; //控制按钮变灰后的文字
        this.completeCount[index]++; //控制当前任务完成进度
        shareTask(item.taskId, "", (data) => {
          location.href = item.meetUrl;
        });
        this.restDrawCount += item.sendNum; //任务完成后当前次数增加
      } else if (text == 5) {
        //关注商品
        if (this.status == 0) {
          this.btnText[index] = "已关注"; //控制按钮变灰后的文字
        }
        this.teskPop = !this.teskPop; //控制当前商品遮罩层显示隐藏
        bus.$emit("completeCount", this.completeCount[index]);
        bus.$emit("teskPop", this.teskPop);
      } else if (text == 6) {
        //预约商品
        if (this.status == 0) {
          this.btnText[index] = "已预约"; //控制按钮变灰后的文字
        }
        this.teskPop = !this.teskPop; //控制当前商品遮罩层显示隐藏
        bus.$emit("completeCount", this.completeCount[index]);
        bus.$emit("teskPop", this.teskPop);
      } else if (text == 7) {
        //加购商品
        if (this.status == 0) {
          this.btnText[index] = "已加购"; //控制按钮变灰后的文字
        }
        bus.$emit("completeCount", this.completeCount[index]);
        this.teskPop = !this.teskPop; //控制当前商品遮罩层显示隐藏
        bus.$emit("teskPop", this.teskPop);
      } else if (text == 13) {
        this.btnGray[index] = true; //控制当前点击的按钮变灰
        this.btnText[index] = "已开卡"; //控制按钮变灰后的文字
        this.completeCount[index]++; //控制当前任务完成进度
        location.href = item.openCardUrl;
      } else if (text == 14) {
        //每日签到
        this.btnGray[index] = true; //控制当前点击的按钮变灰
        this.btnText[index] = "已签到"; //控制按钮变灰后的文字
        this.completeCount[index]++; //控制当前任务完成进度
        shareTask(item.taskId, "", (data) => {});
        this.restDrawCount += item.sendNum; //任务完成后当前次数增加
      }
      bus.$emit("restDrawCount", this.restDrawCount); //将当前剩余次数提供
    },
    taskShow(item) {
      //控制按钮文本及规则文本
      if (item.taskType == 1) {
        item.description = "关注店铺";
        return "关注店铺";
      } else if (item.taskType == 2) {
        item.description = "浏览店铺";
        return "浏览店铺";
      } else if (item.taskType == 3) {
        item.description = "每浏览" + item.finishNum + "件商品";
        return "浏览商品";
      } else if (item.taskType == 4) {
        item.description = "浏览会场/直播";
        return "浏览会场";
      } else if (item.taskType == 5) {
        item.description = "每关注" + item.finishNum + "件商品";
        return "关注商品";
      } else if (item.taskType == 6) {
        item.description = "每预约" + item.finishNum + "件商品";
        return "预约商品";
      } else if (item.taskType == 7) {
        item.description = "每加购" + item.finishNum + "件商品";
        return "加购商品";
      } else if (item.taskType == 13) {
        item.description = "会员开卡";
        return "会员开卡";
      } else if (item.taskType == 14) {
        item.description = "每日签到";
        return "每日签到";
      } else if (item.taskType == 15) {
        item.description = "邀请助力";
        return "邀请助力";
      }
    },
    taskImageShow(item) {
      return "https://img10.360buyimg.com/imgzone/jfs/t1/167082/26/4584/3802/60129d2eEe6a071ab/c00ea61f9263e7c9.png";
    },
    noneClick(item, index) {
      //按钮置灰后点击
      var ms = 2000;
      if (Date.now() - this.lastClick >= ms) {
        this.lastClick = Date.now();
        console.log("2222222");
        console.log(item, location.href);
        Toast(this.btnText[index]);
      } else {
        console.log("1111111");
        return;
      }
    },
    nowKeydata(val, index) {
      //控制商品遮罩层完成任务后完成状态变化
      this.completeCount[index] = val;
      this.keyee++;
    },
  },
};
</script>
<style lang="scss" scoped>
.metadatatext {
  color: #969799;
  font-size: 14px;
  line-height: 20px;
}
.metadataspan {
  width: 1.9rem;
  height: 1.9rem;
}
.metadatadiv {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.playdiv {
  display: flex;
}
.keyeediv {
  padding-top: 0.1rem;
  text-align: left;
  margin-left: 0.1rem;
}
.assistcontent {
  display: flex;
}
.assist {
  min-width: 6.58rem;
}
.invitationimg {
  width: 1.17rem;
  height: 0.37rem;
  margin-left: 0.27rem;
}
.invitationtext {
  font-size: 0.22rem;
  color: #ff711f;
}
.opportunityNumberText {
  color: rgb(255, 238, 198);
  font-size: 0.32rem;
  opacity: 1;
  margin-top: 0.1rem;
  min-width: 1.69rem;
  width: unset !important;
}
.opportunityNumberImg {
  // width: 5.97rem;
  // height: 1.62rem;
  margin: 0.2rem auto 0;
  display: block;
}
.teskShadow {
  transition: all 0.7s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow-y: scroll;
}
.helpImg {
  width: 0.77rem;
  height: 0.77rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-left: 0.05rem;
  border-radius: 50%;
}
.helptext {
  display: flex;
  justify-content: center;
  overflow-x: scroll;
  align-items: center;
  margin-bottom: 0.25rem;
  flex-wrap: nowrap;
}
.helpBlock {
  margin-bottom: 0.25rem;
}
.teskShadowhide {
  position: fixed;
  transition: all 1s;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0);
}
.teskShadow .teskPopStyleShow {
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/160313/21/5021/43729/601290c1Ee7fa8e87/c1e63da57a023b24.png")
    no-repeat;
  transition: all 0.5s;
  background-size: 100%;
  width: 7.5rem;
  height: 10.81rem;
  padding-top: 2.5rem;
  bottom: 0;
  overflow: hidden;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
  position: absolute;
  z-index: 100;
}
.teskPopStyleShowhide {
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/160313/21/5021/43729/601290c1Ee7fa8e87/c1e63da57a023b24.png")
    no-repeat;
  transition: all 1s;
  background-size: 100%;
  width: 7.5rem;
  height: 10.81rem;
  padding-top: 2.5rem;
  bottom: -15rem;
  left: 0;
  z-index: 0;
  box-sizing: border-box;
  position: fixed;
  z-index: -100;
}
.teskPopStyleShow .teskShadowButton {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  right: 0;
  top: 1.73rem;
}
.teskShadowTesk {
  width: 6.58rem;
  height: 7.5rem;
  margin: 0.25rem auto 0;
  overflow-y: scroll;
  overflow-x: hidden;
}
.teskShadowTesk .playTesk {
  width: 100%;
  height: 1.22rem;
  background: linear-gradient(to bottom, #ffb97c, #ff4745);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.15rem;
  margin: 0.2rem 0;
  box-sizing: border-box;
}
.teskShadowTesk .playTesk .playTeskIcon {
  width: 1.02rem;
  height: 1.02rem;
  border-radius: 50%;
}
.teskname {
  display: inline-block;
}
.teskNowp {
  font-size: 0.23rem;
  color: white;
}
.teskShadowTesk .playTesk .teskname {
  text-align: left;
  font-size: 0.3rem;
  color: white;
}
.teskShadowTesk .playTesk .teskNowTesk {
  font-size: 0.3rem;
  color: white;
}
.teskShadowTesk .playTesk .teskButton {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/161658/39/4734/2249/60129ed3E5a5e7480/9d9e1eaf80233cb9.png)
    no-repeat;
  width: 1.76rem;
  background-size: 100%;
  height: 0.68rem;
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.31rem;
  color: #ff4b48;
}
.btnGray {
  filter: grayscale(100%);
}
.playbox {
  width: 1.02rem;
  height: 1.02rem;
  border-radius: 50%;
}
.playTeskIcon1 {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/162153/29/4749/2981/60129d2dEbcc6cca9/4947d76d1f6f6083.png)
    no-repeat 100% / 100%;
}
.playTeskIcon2 {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/153684/6/16295/2707/60129d2eEc9723726/cec22533d103a992.png)
    no-repeat 100% / 100%;
}
.playTeskIcon3 {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/165370/20/4634/2755/60129d2eE345ecc5b/25c3c9d0c3d7f4b1.png)
    no-repeat 100% / 100%;
}
.playTeskIcon4 {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/196863/17/4633/3184/61245795E5a77aa65/69e19a01a01d7832.png)
    no-repeat 100% / 100%;
}
.playTeskIcon5 {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/171328/9/4663/2778/60129d2dEaa68b522/62ef6c8350b27ee4.png)
    no-repeat 100% / 100%;
}
.playTeskIcon6 {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/168296/19/4574/3230/60129d2eEffc0f8da/0930550440d45a54.png)
    no-repeat 100% / 100%;
}
.playTeskIcon7 {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/159502/16/5139/2997/60129d2eE2f189f89/11103437abd338fe.png)
    no-repeat 100% / 100%;
}
.playTeskIcon13 {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/152525/16/16418/3054/60129d2eE3a5804bb/b40ca29dac01808d.png)
    no-repeat 100% / 100%;
}
.playTeskIcon14 {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/167082/26/4584/3802/60129d2eEe6a071ab/c00ea61f9263e7c9.png)
    no-repeat 100% / 100%;
}
.playTeskIcon15 {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/162153/29/4749/2981/60129d2dEbcc6cca9/4947d76d1f6f6083.png)
    no-repeat 100% / 100%;
}
// .opportunityBigBox {
//   position: relative;
// }
.reset-opportunityNumberText{
  top: 10.9rem !important;
}
.reset-opportunityNumberImg{
  top: 12.07rem !important;
}
</style>
