<template>
  <div v-if="show">
    <basicPopNew :title="title" @closeClick="backDrawPage">
      <div class="followSkuPopNew">
        <div class="followSkuPopNewCont">
          <div
            class="followSkuPopNewDan"
            v-for="(item, index) in data.skuInfoVO"
            :key="index"
          >
            <div @click="goToBuy(item)" v-lz-click="'5'" v-lz-skuid="item.skuId">
              <img :src="item.skuImg" />
              <div class="title">{{ item.skuName }}</div>
              <!-- <div class="price">￥{{ item.skuPrice }}</div> -->
            </div>
            <div v-if="data.oneClickFollowPurchase == 1 && data.taskType == 5">
              <div
                v-if="item.status == 0"
                class="attention"
                @click="follow(item)"
                v-lz-click="'8'"
              >
                点我关注
              </div>
              <div v-if="item.status == 1" class="attention1">已关注</div>
            </div>
            <div v-if="data.oneClickPurchase == 1 && data.taskType == 7">
              <div
                v-if="item.status == 0"
                class="attention"
                @click="follow(item)"
                v-lz-click="'9'"
              >
                立即加购
              </div>
              <div v-if="item.status == 1" class="attention1">已加购</div>
            </div>
            <div v-if="data.taskType == 6">
              <div
                v-if="item.status == 0"
                class="attention"
                @click="follow(item)"
                v-lz-click="'9'"
              >
                立即预约
              </div>
              <div v-if="item.status == 1" class="attention1">已预约</div>
            </div>
            <div v-if="data.taskType == 3">
              <div
                v-if="item.status == 0"
                class="attention"
                @click="follow(item)"
                v-lz-click="'5'"
                v-lz-skuid="item.skuId"
              >
                立即浏览
              </div>
              <div v-if="item.status == 1" class="attention1">已浏览</div>
            </div>
          </div>
        </div>
        <div
          class="mySharedContent"
          v-if="data.oneClickFollowPurchase == 1 && data.taskType == 5"
        >
          已关注商品 <span class="num">{{ shareCount }}</span
          >件，获得 <span class="num">{{ prieCount }}</span
          >次抽奖机会
        </div>
        <div
          class="mySharedContent"
          v-if="data.oneClickPurchase == 1 && data.taskType == 7"
        >
          已加购商品 <span class="num">{{ completeCount }}</span
          >件，获得 <span class="num">{{ jiatou }}</span
          >次抽奖机会
        </div>
        <div class="mySharedContent" v-if="data.taskType == 6">
          已预约商品 <span class="num">{{ completeCount }}</span
          >件，获得 <span class="num">{{ jiatou }}</span
          >次抽奖机会
        </div>
        <div class="mySharedContent" v-if="data.taskType == 3">
          已浏览商品 <span class="num">{{ completeCount }}</span
          >件，获得 <span class="num">{{ jiatou }}</span
          >次抽奖机会
        </div>
        <!-- :style="
            data.status == 1 &&
            'background: linear-gradient(90deg, #8C8C8C 0%, #BFBFBF 100%)'
          " -->
        <div v-if="data.oneClickFollowPurchase == 0 && data.taskType == 5">
          <div
            v-if="data.status == 0"
            class="mySharedContent"
            @click="follow({ skuId: '' })"
          >
            一键关注商品
          </div>
          <div v-else class="mySharedContent1">已关注</div>
        </div>
        <div v-if="data.oneClickPurchase == 0 && data.taskType == 7">
          <div
            v-if="data.status == 0"
            class="mySharedContent"
            @click="follow({ skuId: '' })"
          >
            一键加购商品
          </div>
          <div v-else class="mySharedContent1">已加购</div>
        </div>
      </div>
    </basicPopNew>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
let { followSkuTask, shareTask,storeGoodsPoint } = apis1;
import { newToSkuPage } from "../../../util/tools.js";
import basicPopNew from "./basicPopNew.vue";
import bus from "../../../util/bus.js";
export default {
  props: ["isTemplate", "datas", "styleData", "keyData", "templateData"],
  components: {
    basicPopNew,
  },
  data() {
    return {
      sum: 0,
      shareCount: 0,
      prieCount: 0,
      completeCount: 0,
      jiatou: 0,
      title: "",
      status: "",
    };
  },
  created() {
    console.log(222222222222, this.data);
    if (this.data.taskType == 5) {
      this.title = "关注商品";
      this.status = 5;
    }
    if (this.data.taskType == 6) {
      this.title = "预约商品";
    }
    if (this.data.taskType == 7) {
      this.title = "加购商品";
    }
    if (this.data.taskType == 3) {
      this.title = "浏览商品";
    }
    this.shareCount = this.data.shareCount;
    this.prieCount = this.data.prieCount;
    this.completeCount = this.data.completeCount;
    this.jiatou =
      Math.floor(this.data.completeCount / this.data.finishNum) *
      this.data.sendNum;
    console.log(222222, this.completeCount, this.jiatou);
    bus.$on("data", (res) => {
      if (res) {
        res.taskList.map((item) => {
          if (item.taskType == this.status) {
            this.shareCount = item.shareCount;
            this.prieCount = item.prieCount;
          }
          if (item.taskType == this.data.taskType) {
          //  if(item.taskType == 3){
              this.completeCount = item.completeCount;
              if (this.data.maxNum <= Math.floor(this.completeCount / item.finishNum)) {
                this.jiatou = Math.floor(this.data.maxNum) * item.sendNum;
              } else {
                this.jiatou = Math.floor(this.completeCount / item.finishNum) * item.sendNum;
              }
              if(item.taskType == 7){
                if ( Math.floor(this.data.maxNum / item.finishNum) <= Math.floor(this.completeCount / item.finishNum)) {
                this.jiatou = Math.floor(this.data.maxNum / item.finishNum);
              } else {
                this.jiatou = Math.floor(this.completeCount / item.finishNum) * item.sendNum;
              }
              if(item.skuInfoVO&&item.skuInfoVO.length > 0){
                let total = 0;
                item.skuInfoVO.forEach(ele => {
                  if(ele.status == '1'){
                    total = total + 1
                  }
                });
                this.completeCount = total
              }
              
              }
              if(item.taskType == 3){
                if(item.skuInfoVO&&item.skuInfoVO.length > 0){
                  let total = 0;
                  item.skuInfoVO.forEach(ele => {
                    if(ele.status == '1'){
                      total = total + 1
                    }
                  });
                  this.completeCount = total
                }
              }
            // }else{
            //    this.completeCount = item.completeCount;
            //   this.jiatou = Math.floor(this.completeCount / item.finishNum) * item.sendNum;
            // }
          }
          // if (item.taskType == 6) {
          //   this.completeCount = item.completeCount;
          //   this.jiatou = Math.floor(
          //     (item.completeCount / item.finishNum) * item.sendNum
          //   );
          // }
          // if (item.taskType == 7) {
          //   this.completeCount = item.completeCount;
          //   this.jiatou = Math.floor(
          //     (item.completeCount / item.finishNum) * item.sendNum
          //   );
          // }
        });
      }
    });
    this.publicData.$on("xhyFollowSkuTaskData", (ress) => {
      if (ress) {
        this.shareCount =
          ress.taskActivityInfoVO.taskFollowSkuWaresVO.shareCount;
        this.prieCount = ress.taskActivityInfoVO.taskFollowSkuWaresVO.prieCount;
      }
    });
    console.log("asd", this.restDrawCount);
    document
      .querySelector("body")
      .setAttribute(
        "style",
        "position:fixed;top:0;height:100%;overflow:hidden"
      );
    this.sum = this.data.prieCount;
  },
  methods: {
    backDrawPage() {
      document.querySelector("body").removeAttribute("style");
      this.submit(this.data.prieCount - this.sum);
    },
    follow(item) {
      shareTask(this.data.taskId, item.skuId, (data) => {
        this.publicData.$emit("xhyFollowSkuTask", true);
        if (item.skuId) {
          item.status = 1;
        } else {
          this.data.status = 1;
        }
        if (item.taskType == 3) {
          //如果为浏览商品
          storeGoodsPoint(5)
          newToSkuPage(item);
        }
      });
    },
    // follow(item) {
    //   followSkuTask(this.data.taskId, item.skuId, (data) => {
    //     this.publicData.$emit("xhyFollowSkuTask", true);
    //     if (item.skuId) {
    //       item.status = 1;
    //     } else {
    //       this.data.status = 1;
    //     }
    //   });
    // },
    goToBuy(sku) {
      console.log(sku);
      storeGoodsPoint(5)
      newToSkuPage(sku);
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
.followSkuPopNew {
  height: 10rem;
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 1.2rem;
  margin-top: 0.3rem;
  .followSkuPopNewCont {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0.3rem;
    .followSkuPopNewDan {
      width: 3.4rem;
      border-radius: 0.2rem;
      background: #fff;
      overflow: hidden;
      margin-bottom: 0.1rem;
      img {
        width: 100%;
        display: flex;
      }
      .title {
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        font-size: 0.3rem;
        color: #333333;
        margin: 0.2rem;
      }
      .attention {
        width: 1.8rem;
        height: 0.5rem;
        font-size: 0.2rem;
        color: #fff;
        background: linear-gradient(90deg, #f2270c 0%, #ff6420 100%);
        border-radius: 0.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 0.3rem;
      }
      .attention1 {
        width: 1.8rem;
        height: 0.5rem;
        font-size: 0.2rem;
        color: #fff;
        background: linear-gradient(90deg, #8c8c8c 0%, #bfbfbf 100%);
        border-radius: 0.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 0.3rem;
      }
    }
  }
  .mySharedContent {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #262626;
    background: #ffe3e3;
    font-size: 0.24rem;
    position: fixed;
    bottom: 0;
  }
  .mySharedContent1 {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: linear-gradient(90deg, #8c8c8c 0%, #bfbfbf 100%);
    font-size: 0.24rem;
    position: fixed;
    bottom: 0;
  }
}
</style>
