<template>
  <div class="fissionTask">
    <div class="title">
      <span class="titleText">通过以下方式获取{{scoreName}}</span>
    </div>
    <div class="task">
      <ul>
        <li>
          <img src="//img10.360buyimg.com/imgzone/jfs/t1/176480/14/8604/4634/60965471E6f71cdca/95d9d9029a3c5b59.png" class="img"/>
          <div class="followShop">
            <span class="text1">关注店铺</span>
            <span class="text2">关注店铺即可获取{{followScore}}{{scoreName}}</span>
          </div>
          <button class="button" v-if="followStauts == 0" v-lz-click="'7'">
            <b v-lz-click="'8'" @click="followToTask(followTaskId)">去关注</b>
          </button>
          <button class="buttonGray" v-if="followStauts == 1">
            <b  @click="followToTask(followTaskId)">已关注</b>
          </button>
        </li>
        <li>
          <img src="//img10.360buyimg.com/imgzone/jfs/t1/188352/9/2049/4408/60965471Ebb90dbb5/6a89dece2c541f67.png" class="img"/>
          <div class="followShop">
            <span class="text1">浏览商品</span>
            <span class="text2">浏览商品即可获取{{broweScore}}{{scoreName}}</span>
          </div>
          <button>
            <b v-lz-click="'5'" @click="toPurchase(2,browsStatus)">去浏览</b>
          </button>
        </li>
        <li>
          <img src="//img10.360buyimg.com/imgzone/jfs/t1/191650/22/2046/4154/60965471Eebc9246d/11a581d3aa775a89.png" class="img"/>
          <div class="followShop">
            <span class="text1">加购商品</span>
            <span class="text2">加购商品即可获取{{addScore}}{{scoreName}}</span>
          </div>
          <button>
            <b v-lz-click="'9'" @click="toPurchase(1,addGoodStatus)">去加购</b>
          </button>
        </li>
        <li>
          <img src="//img10.360buyimg.com/imgzone/jfs/t1/154206/23/16900/5064/60965471E3c3bade9/85604975c36e426f.png" class="img"/>
          <div class="followShop">
            <span class="text1">每日组队</span>
            <span class="text2">每日组队即可获取{{groupScore}}{{scoreName}}</span>
          </div>
          <button>
            <b @click="setShareButton" v-lz-click="'25'">去组队</b>
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
let { fissionTask, setShare, getGroupDraw } = apis1;
import { commodityListDialogService } from "../../../util/comCreate.js";
import { getUrlQueryValueByKey } from "../../../util/tools.js";
import { callShare4MiniProgram } from "../../../util/share";
import store from "../../../store/store";
import { allShare } from "../../../js/share.js";

export default {
  props: ["styleData", "datas", "keyData", "isTemplate", "templateData"],
  data() {
    return {
      followStauts: 0,//是否已关注 0 未关注 1 已关注
      followTaskId: 0,
      allData: "", //所有数据
      browsStatus:0,//是否已浏览 0 未浏览 1 已浏览
      addGoodStatus:0,//是否已架构 0 未加购1 已加购
      scoreName:'',//游戏分值名称
      addScore:'',//加购获得的分值
      broweScore:'',//浏览获得的分值
      followScore:'',//关注获得的分值
      groupScore:'',//组队获得的分值
    };
  },
  created() {
    this.initData()
  },

  methods: {
    initData(){
      if (this.isTemplate) {
        var dataAll = this.templateData;
        console.log(dataAll)
        if(dataAll){
          this.scoreName = dataAll.group.score.scoreName;
          for(var i = 0;i<dataAll.basicTask.taskList.length;i++){
            if(dataAll.basicTask.taskList[i].rule.followShopRule){
              this.followScore = dataAll.basicTask.taskList[i].rule.followShopRule.sendNum
            }
            if(dataAll.basicTask.taskList[i].rule.browseSku){
              this.broweScore = dataAll.basicTask.taskList[i].rule.browseSku.sendNum
            }
            if(dataAll.basicTask.taskList[i].rule.addSkuRule){
              this.addScore = dataAll.basicTask.taskList[i].rule.addSkuRule.sendNum
            }
            if(dataAll.basicTask.taskList[i].rule.dayGroupRule){
              this.groupScore = dataAll.basicTask.taskList[i].rule.dayGroupRule.sendNum
            }
          }
        }else{
          this.scoreName = '进度';
          this.addScore = 1;
          this.broweScore = 1;
          this.followScore = 1;
          this.groupScore = 1;
        }
      }else{
        this.publicData.$on("taskDataAll", (followStauts,addGoodStatus,browsStatus, followTaskId, allData) => {
      console.log(allData, '888');
      this.followStauts = followStauts;//关注状态
      this.followTaskId = followTaskId;
      this.addGoodStatus = addGoodStatus;//一键加购状态
      this.browsStatus = browsStatus;//浏览状态
      this.allData = allData;
      this.addScore = allData.data.addScore
      this.broweScore = allData.data.broweScore
      this.followScore = allData.data.followScore
      this.groupScore = allData.data.groupScore
      this.scoreName = allData.data.scoreName
    });
      }
    },
    followToTask(toTask) {
      let actStatus = sessionStorage.getItem("actStatus");
      //关注店铺任务
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }

      if (actStatus == 2) {
        // Toast
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        // Toast('活动尚未开始');
        return;
      }

      this.nowDate = new Date().getTime();
      if (this.followStauts == 1) {
        this.$toast("您已完成关注任务");
        return;
      }
     fissionTask(toTask, '', data => {
       this.followStauts = 1;
       this.$toast('关注店铺成功');
       var a = setTimeout(() => {
         this.publicData.$emit('follow', true);
         clearTimeout(a);
         this.$toast.clear()
       }, 1500);
     });
     
    },
    toPurchase(type,taskStatus) {

      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");

      if (actStatus == 2) {
        // Toast
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        // Toast('活动尚未开始');
        return;
      }
      commodityListDialogService.create(this.allData, type,taskStatus, (submit) => {
        commodityListDialogService.close();
        // if (type == "2") {
          this.publicData.$emit("follow", true);
        // }
      });
    },
    //邀请好友
    setShareButton() {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");

      if (!this.isTemplate) {
        if (actStatus == 2) {
          // Toast
          this.$toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          this.$toast("活动尚未开始");
          // Toast('活动尚未开始');
          return;
        }
        if (actStatus == 3) {
          // Toast('活动正在惊醒中');
          // this.share = 1
        allShare(this.isTemplate, this, (callBackData) => {
            console.log(callBackData, "callBackData");
          });

        }
      } else {
        this.$toast("活动预览，仅供查看");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.fissionTask {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.title {
  width: 7.5rem;
  // height: 1.43rem;
  background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/175900/19/8701/49903/6098f40eE27c1d32a/8e372165cb184099.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.titleText{
  color: #ffecba;
  font-size: 0.5rem;
  display: block;
  margin-top: 0.7rem;
}
.task {
  width: 6.81rem;
  height: 4.57rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/191724/4/231/4951/6087c0b8Eab78cdc6/e34614c647a0e333.png);
  background-size: 100%;
  margin-bottom: 0.5rem;
}
.task ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.task ul li{
  width: 6.3rem;
  height: 0.95rem;
  background-color: #fff;
  border-radius: 13px;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 5px;
  .img{
    height: 0.72rem;
    width: 0.72rem;
    display: flex;
    // margin-top: 5px;
    margin-left: 10px;
  }
  .followShop{
    display: flex;
    flex-direction: column;
    padding-left: 5px;
    .text1{
      font-size: 0.25rem;
      color: #ae1f32;
      font-weight: bolder;
      text-align: left;
    }
    .text2{
      width: 3.5rem;
      font-size: 0.15rem;
      color: #8f8e8b;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }
  }
}
.task ul li:nth-child(1) .button {
  width: 1.05rem;
  height: 0.64rem;
  border-radius: 0.32rem;
  background: #fea04d;
  position: absolute;
  right: 0.3rem;
  top: 0.16rem;
}
.task ul li:nth-child(1) .button b {
  font-size: 0.24rem;
  color: #c7133d;
}

.task ul li:nth-child(1) .buttonGray {
  width: 1.05rem;
  height: 0.64rem;
  border-radius: 0.32rem;
  background: gray;
  position: absolute;
  right: 0.3rem;
  top: 0.16rem;
}

.task ul li:nth-child(1) .buttonGray b {
  font-size: 0.24rem;
  color: #c7133d;
}

.task ul li:nth-child(2) button {
  width: 1.05rem;
  height: 0.64rem;
  border-radius: 0.32rem;
  background: #fea04d;
  position: absolute;
  right: 0.3rem;
  top: 0.16rem;
}

.task ul li:nth-child(2) button b {
  font-size: 0.24rem;
  color: #c7133d;
}

.task ul li:nth-child(3) button {
  width: 1.05rem;
  height: 0.64rem;
  border-radius: 0.32rem;
  background: #fea04d;
  position: absolute;
  right: 0.3rem;
  top: 0.16rem;
}

.task ul li:nth-child(3) button b {
  font-size: 0.24rem;
  color: #c7133d;
}
.task ul li:nth-child(4) button {
  width: 1.05rem;
  height: 0.64rem;
  border-radius: 0.32rem;
  background: #fea04d;
  position: absolute;
  right: 0.3rem;
  top: 0.16rem;
}

.task ul li:nth-child(4) button b {
  font-size: 0.24rem;
  color: #c7133d;
}
</style>
