<template>
  <div>
    <div v-if="!isWebClick" :class="teskShadowShow ? 'teskPopShadow' : 'shadowhide'"></div>
    <div class="teskBox" :class="teskShadowShow ? 'teskshow' : 'teskhide'">
      <div class="closeBox" @click="teskClose"></div>
      <div class="teskContent">
        <div v-for="(item,index) in teskShopList" :key="item.id" class="shopcontent">
          <img :src="shopImg(item)" alt class="shopHeadImg" />
          <img :src="item.skuImg" alt class="shopImg" v-lz-click="'5'" @click="goToLook(item)" />
          <div class="shopName" v-lz-click="'5'" @click="goToLook(item)">{{item.skuName}}</div>
          <div class="shopMoney">￥{{item.skuPrice}}</div>
          <div
            class="shopBtn"
            v-lz-click="item.type"
            @click="btnGray[index] || item.status == 1 ? noneClick(item) : shopClick(item,index)"
            :class="btnGray[index] || item.status == 1 ? 'grayBtn' : '' "
            :key="keydata"
          >{{btnGray[index] || item.status == 1 ? shopListText : teskBtnText}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
import bus from "../../../util/bus.js";
import { Toast } from "vant";
import { goToSkuPage } from "../../../util/tools";
let { shareTask } = apis1;
export default {
  props: [
    "keyData",
    "styleData",
    "datas",
    "restDrawCount",
    "chlidGray",
    "nowindex",
    "isWebClick",
  ],
  data() {
    return {
      teskShadowShow: false, //遮罩层显示隐藏
      teskShopList: [], //人物列表
      teskShopName: "", //任务名
      teskBtnText: "", //任务文本
      restDraw: 0, //剩余次数
      status: 0, //当前任务状态
      btnGray: [], //控制按钮变灰
      nowClick: 0, //当前点击的任务按钮
      keydata: 0, //控制任务按钮完成次数
      shopListText: "", //控制任务完成文本
      nowClickNum: 0,
    };
  },
  created() {},
  mounted() {
    this.initdata();
  },
  updated() {
    this.btnGray = this.chlidGray; //将当前按钮置灰赋值
    this.teskShopList = this.restDrawCount.skuInfoVO; //将任务列表赋值
    bus.$on("restDrawCount", (content) => {
      //获取剩余次数
      this.restDraw = content;
    });
    bus.$on("teskPop", (content) => {
      //获取遮罩层显示隐藏
      this.teskShadowShow = content;
    });
    bus.$on("completeCount", (content) => {
      //获取当前任务完成状态
      this.keydata = content;
      console.log(content, "222222222222222222222");
    });
    this.teskShopList.map(item=>{
      item.type=this.lzNum(item);
    })
  },
  methods: {
    initdata() {
      bus.$on("teskPop", (content) => {
        //初始化遮罩层显示隐藏
        this.teskShadowShow = content;
      });
      bus.$on("restDrawCount", (content) => {
        //初始化剩余次数
        this.restDraw = content;
      });
      bus.$on("completeCount", (content) => {
        //获取当前任务完成状态
        this.keydata = content;
        console.log(content, "222222222222222222222");
      });
    },
    teskClose() {
      //点击关闭按钮
      this.teskShadowShow = !this.teskShadowShow; //控制任务列表收放
      this.$emit("teskShow", this.teskShadowShow); //将遮罩层状态提供
    },
    shopClick(item, index) {
      //点击任务按钮
      console.log(
        this.keydata,
        this.restDrawCount.finishNum,
        item,
        "22222222222222222222222"
      );
      if (this.keydata >= this.restDrawCount.maxNum) {
        //判断如果任务已完成
        this.$emit("teskFinsin", this.nowindex + 1);
        this.nowClickNum++;
        this.keydata++; //任务完成状态增加
        this.$emit("nowKeydata", this.keydata, this.nowindex); //将任务完成状态提供
        this.btnGray[index] = true; //当前点击按钮置灰
        this.nowClick = this.restDrawCount.taskPosition - 1; //当前点击的按钮赋值
        //如果判定成功则跳出
      } else {
        this.nowClickNum++;
        this.keydata++; //任务完成状态增加
        this.$emit("nowKeydata", this.keydata, this.nowindex); //将任务完成状态提供
        this.btnGray[index] = true; //当前点击按钮置灰
        this.nowClick = this.restDrawCount.taskPosition - 1; //当前点击的按钮赋值
        if (this.nowClickNum == this.restDrawCount.finishNum) {
          //判断如果任务完成状态达到一次要求
          this.nowClickNum = 0;
          this.restDraw += this.restDrawCount.sendNum; //当前剩余次数增加
          bus.$emit("restDrawCount", this.restDraw); //将剩余次数提供出去
        }
      }
      console.log(this.restDrawCount.taskId, this.teskShopList[index].skuId);
      shareTask(
        this.restDrawCount.taskId,
        this.teskShopList[index].skuId,
        (data) => {
          //调用任务接口
          console.log(data);
          bus.$emit("nowStatus", 1, index, this.nowindex);
          var endtext = this.teskBtnText.slice(1, 3) + "成功";
          Toast(endtext);
          if (item.taskType == 3) {
            //如果为浏览商品
            goToSkuPage(item.skuId);
          }
        }
      );
    },
    noneClick(item) {
      if (item.taskType == 7) {
        //加购商品
        Toast("该商品已加购成功");
      } else {
        //按钮置灰后点击
        Toast("该商品任务已完成");
      }
    },
    lzNum(item) {
      if (item.taskType == 3) {
        //浏览商品
        return "5";
      } else if (item.taskType == 5) {
        //关注商品
        return "8";
      } else if (item.taskType == 7) {
        //加购商品
        return "9";
      }else{
        return ''
      }
    },
    shopImg(item) {
      //控制当前按钮文字和按钮背景图
      if (item.taskType == 3) {
        this.teskBtnText = "去浏览";
        this.shopListText = "已浏览";
        return "https://img10.360buyimg.com/imgzone/jfs/t1/167868/24/4249/4514/600fba77E736f186c/41706a3c8155b7e4.png";
      } else if (item.taskType == 5) {
        this.teskBtnText = "去关注";
        this.shopListText = "已关注";
        return "https://img10.360buyimg.com/imgzone/jfs/t1/150610/23/17043/4033/600f8d93E19e7379d/440217d45060287e.png";
      } else if (item.taskType == 6) {
        this.teskBtnText = "去预约";
        this.shopListText = "已预约";
        return "https://img10.360buyimg.com/imgzone/jfs/t1/153864/12/16147/4471/600fba77E640e11ac/ddacedb271e174af.png";
      } else if (item.taskType == 7) {
        this.teskBtnText = "去加购";
        this.shopListText = "已加购";
        return "https://img10.360buyimg.com/imgzone/jfs/t1/159809/32/5004/4453/600f8d93Ef1353210/8cb66985c20a3524.png";
      }
    },
    goToLook(item) {
      //如果点击的是图片或文字
      goToSkuPage(item.skuId); //跳转到店铺
    },
  },
};
</script>
<style lang="scss" scoped>
.teskshow {
  bottom: 0rem;
}
.grayBtn {
  filter: grayscale(100%);
}
.teskhide {
  bottom: -12rem;
}
.shadowhide {
  z-index: -1;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.teskPopShadow {
  z-index: 2001;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  transition: 0.5s all;
}
.teskBox {
  transition: 1s all;
  z-index: 2001;
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/159474/26/4905/40274/600f8d93Ebac1d5ae/27f0c942adfed8b1.png)
    no-repeat;
  background-size: 100%;
  width: 7.5rem;
  height: 11.13rem;
  position: fixed;
  padding-top: 1.21rem;
  box-sizing: border-box;
}
.shopHeadImg {
  position: absolute;
  left: 2.6rem;
  top: 1.2rem;
  width: 2.08rem;
  height: 0.54rem;
  display: block;
  margin: 0 auto;
}
.teskContent {
  width: 6.5rem;
  height: 8.73rem;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 1.2rem auto 0;
  overflow-y: scroll;
  border-radius: 15px;
}
.closeBox {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  right: 0;
  top: 1.6rem;
  z-index: 3000;
}
.shopImg {
  width: 2.62rem;
  height: 2.84rem;
  margin: 0 auto;
}
.shopName {
  font-size: 0.2rem;
  color: #333333;
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0.2rem auto 0;
}
.shopMoney {
  font-size: 0.3rem;
  color: #f23c3c;
  text-align: center;
  margin-top: 0.1rem;
}
.shopBtn {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/155214/20/16229/1571/600fc01eEef051dcb/b3e8339bee56adf1.png)
    no-repeat;
  background-size: 100%;
  width: 2.72rem;
  height: 0.7rem;
  margin: 0.1rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.3rem;
  color: #fff;
}
.shopcontent {
  width: 3.16rem;
  height: 5.5rem;
  border-radius: 15px;
  background: #fff;
  padding: 0.2rem;
  margin: 0.1rem 0 0 0.09rem;
  box-shadow: 0px 0px 5px #ffeac2;
}
</style>
