<template>
  <div
    :style="styleData.opportunityBigBox"
    class="opportunityBigBox"
    ref="moveOpportunity"
    @click="styleClick('click', 'moveOpportunity')"
    @mousemove="styleClick('mousemove', 'moveOpportunity')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="opportunityNumberText" :style="styleData.opportunityNumberText">
      剩余<span :style="styleData.restDrawCount">{{ restDrawCount }}次</span
      >机会
    </div>
    <img
      :src="styleData.startGame.imageUrl"
      alt
      class="startGame"
      v-if="dataListLength != 0"
      @click="startGame"
      :style="styleData.startGame"
    />
    <img
      :src="styleData.opportunityNumberImg.imageUrl"
      alt
      class="opportunityNumberImg"
      v-if="dataListLength != 0"
      @click="moveOpport"
      :style="styleData.opportunityNumberImg"
    />
    <div class="opportunityNumberText" :style="styleData.drawNumberText">
      剩余<span :style="styleData.restDrawCount">{{ restDrawCount }}次</span
      >抽奖机会
    </div>
    <img
      :src="styleData.getDraw.imageUrl"
      alt
      class="startGame"
      v-if="dataListLength != 0"
      @click="getDrawGame"
      :style="styleData.getDraw"
    />
    <div
      :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">
                  ({{
                    completeCount[index] >= item.maxNum
                      ? item.maxNum
                      : completeCount[index]
                  }}
                  / {{ item.maxNum == undefined ? "1" : item.maxNum }})
                </span>
                <p class="teskNowp">
                  {{ item.description }},获得{{ item.sendNum }}次机会
                </p>
              </div>
            </div>
            <div
              class="teskButton"
              :class="
                item.status == 1 || completeCount[index] >= item.maxNum
                  ? 'btnGray'
                  : ''
              "
              @click="
                item.status == 1 || completeCount[index] >= item.maxNum
                  ? noneClick(item,index)
                  : teskButtonChange(item.taskType, index, item)
              "
              :v-lz-click="lzNum(item)"
              :key="restDrawCount"
            >
              {{
                item.status == 1 || completeCount[index] >= item.maxNum
                  ? 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 {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
} from "../../../util/comCreate.js";
import "swiper/swiper-bundle.min.css";
import showTeskPop from "../popCom/showTeskPop.vue";
import { allShare } from "../../../js/share.js";
import { goToShopPage } from "../../../util/tools";
import { Toast } from "vant";
let {
  bigWinnerAct,
  lotteryCenter,
  followShop,
  signMainRequest,
  shareTask,
  drawPrize,
  cardFriendHelpList,
  startDraw,
  bargainFriends,
} = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  components: {
    showTeskPop,
  },
  data() {
    return {
      restDrawCount: 0, //剩余次数
      teskShadowShow: false,
      teskButton: true,
      btnGray: [], //控制按钮是否变灰
      teskButtonText: "",
      taskList: [], // 任务列表
      help: [],
      teskList: [], //当前活动商品列表
      prizeListData: [
        {
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 2,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 3,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 4,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 5,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 6,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 7,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 8,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
      ],
      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,
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      drawTimes:0,
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initdata();
    if (this.isWebClick) {
      this.dataListLength = 1;
    }
  },
  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;
      }
    });
  },
  methods: {
    //点击可修改位置的方法
    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;
              }
            });
          }
        }
        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; //初始化剩余次数
      });
         bigWinnerAct(data=>{
          this.drawTimes = data.data.canDrawTimes
      });
      //数据初始化
      sessionStorage.setItem("taskShare", "");
      lotteryCenter((mainDatas) => {
        //调用任务接口
        console.log(mainDatas, "biubiu");
        this.dataListLength = mainDatas.data.taskList.length;
        bus.$emit("data", mainDatas.data);
        drawPrize((initdatas) => {
          this.prizeListData = initdatas.data.prizeInfo;
          //调用礼品接口
          // let prizelist = initdatas.data.prizeInfo;
          this.restDrawCount = initdatas.data.drawNumber;
          bus.$emit("restDrawCount", this.restDrawCount); //将抽奖次数提供出去
          bus.$emit("ourprizeList", this.prizeListData); //将礼品列表提供出去
        });
        console.log(mainDatas, "lotteryCenter");
        var ms = 2000;
        this.lastClick = Date.now() - ms;
        bargainFriends((data) => {
          //调用好友助力接口
          console.log(data, "friden");
          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);
          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(this.btnText);
        console.log(
          this.taskList,
          this.helperList,
          this.completeCount,
          "huohuo"
        );
      });
    },
  
    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;
    },
    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"; //开启禁止屏幕滚动
      }
    },
    startGame() {
      if (!this.isWebClick) {
        if (this.isTemplate) {
          this.$toast("活动预览，仅供查看");
          return;
        }
        let actStatus = sessionStorage.getItem("actStatus");
        if (actStatus == 2) {
          Toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          Toast("活动尚未开始");
          return;
        }
        if (this.restDrawCount == 0) {
        if(this.dataListLength > 0){
          this.$toast('您没有游戏机会了，点击"获得更多游戏机会"吧');
        }else{
          this.$toast('您没有游戏机会了');
        }
        return;
      }
        window.location.href = 'https://lzkj-yc.isvjd.com/lzclient/games/businessShow/MergeMelonPlus/index.html'
        // this.teskShadowShow = !this.teskShadowShow; //控制任务列表收放
        // document.documentElement.style.overflowY = "hidden"; //开启禁止屏幕滚动
      }
    },
    getDrawGame(){
        if (!this.isWebClick) {
        if (this.isTemplate) {
          this.$toast("活动预览，仅供查看");
          return;
        }
        let actStatus = sessionStorage.getItem("actStatus");
        if (actStatus == 2) {
          Toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          Toast("活动尚未开始");
          return;
        }
        if (this.drawTimes == 0) {
          this.$toast('您没有游戏机会了，点击"获得更多游戏机会"吧');
           return;
        }else{
             if (!this.isTemplate) {
              const self = this;
              //获取奖品信息接口
              startDraw((initdatas) => {
                  console.log(initdatas)
                if (initdatas.resp_code == 50009) {
                  this.$toast("活动已结束");
                  // this.isStartPlay = false;
                  return;
                }
                if(initdatas.data){
                  for (var i = 0; i < this.prizeListData.length; i++) {
                  if (this.prizeListData[i].id == initdatas.data.prizeInfoId) {
                    self.pIndex = i;
                    // 拿到相应的角度调旋转接口
                    self.fulfillHandle(
                      self.prizeListData[self.pIndex],
                      initdatas.data
                    );
                    this.isStartPlay = false;
                    this.publicData.$emit(
                      "isNotyFiceWinnerReorrd",
                      true,
                      this.isTemplate
                    );
                    break;
                  }
                }
                } 
                else {
                  self.fulfillHandle("未中奖");
                  this.isStartPlay = false;
                }
                // if(initdatas.data){
                //   console.log('中奖',initdatas.data)
                //     this.openPrizePup('中奖了',initdatas.data)
                // }else{
                //     console.log('未中奖',initdatas.data)
                //     this.openPrizePup('未中奖',initdatas.data)
                // }
                // if (initDatas.data) {
                //   for (var i = 0; i < this.prizeListData.length; i++) {
                //     if (this.prizeListData[i].id == initDatas.data.prizeInfoId) {
                //       self.pIndex = i;
                //       // 拿到相应的角度调旋转接口
                //       self.fulfillHandle(
                //         self.prizeListData[self.pIndex],
                //         initDatas.data
                //       );
                //       this.isStartPlay = false;
                //       this.publicData.$emit(
                //         "isNotyFiceWinnerReorrd",
                //         true,
                //         this.isTemplate
                //       );
                //       break;
                //     }
                //   }
                // } else {
                //   self.fulfillHandle("未中奖");
                //   this.isStartPlay = false;
                // }
                // this.prizeListData = initdatas.data.prizeInfo;
              });
            }
            //   if (prizeData == "未中奖") {
            //     NoPrizeResultPopComService.create(
            //       "非常遗憾，您与大奖擦肩而过~",
            //       "//img10.360buyimg.com/imgzone/jfs/t1/136745/32/20121/48059/5fd996feE56314a28/b952f0e6f3fe811f.png",
            //       (submit) => {
            //         NoPrizeResultPopComService.close();
            //       }
            //     );
            //   } else {
            // //中奖
            //     this.prizeResultData.datas = prizeData;
            //     PrizeResultPopComService.create(
            //       this.prizeResultData,
            //       initDatas,
            //       (submit) => {
            //         PrizeResultPopComService.close();
            //       }
            //     );
            //   }
        }
      }
    },
    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      this.isStartPlay = false;
      console.log(initDatas);
      var activityType = sessionStorage.getItem("activityType");
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;

      if (prizeData == "未中奖") {
        NoPrizeResultPopComService.create(
          "非常遗憾，您与大奖擦肩而过~",
          "//img10.360buyimg.com/imgzone/jfs/t1/136745/32/20121/48059/5fd996feE56314a28/b952f0e6f3fe811f.png",
          (submit) => {
            NoPrizeResultPopComService.close();
          }
        );
      } else {
        //中奖
        this.prizeResultData.datas = prizeData;
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          (submit) => {
            PrizeResultPopComService.close();
          }
        );
      }
    },
    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) => {}); //调用任务接口
        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;
}
.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;
}
</style>