<template>
  <div class="taskPopDivAll">
    <div class="taskDivContent">
      <!-- <div class="titleDiv"></div> -->
      <div class="contentDiv">
        <div class="taskListDivAll">
          <div class="closeDiv" @click="tocolseDiv"></div>
          <div class="signconten">
            <div class="swiper-container1" ref="taskmySwiper">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="(item, index) in signList"
                  :key="index"
                >
                  <p>{{ item.name }}</p>
                  <div
                    v-if="index == 2"
                    :class="item.status ? 'signyes' : 'signone'"
                  ></div>
                  <div
                    v-if="index == 6"
                    :class="item.status ? 'signyes' : 'signtwo'"
                  ></div>
                  <div
                    v-if="index == 13"
                    :class="item.status ? 'signyes' : 'signthried'"
                  ></div>
                  <div
                    v-if="index !== 2 && index !== 6 && index !== 13"
                    :class="item.status ? 'signyes' : 'signno'"
                  ></div>
                </div>
              </div>
            </div>
              <div class="swiper-button-prev" @click="prev()"></div>
              <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
              <div class="swiper-button-next" @click="next()"></div>
              <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
            <button
              class="signbtn"
              :class="{ gray100: signflag }"
              @click="playtask('sign')"
            ></button>
          </div>
          <div class="taskPart">
            <div
              class="selftask"
              v-for="(item, index) in taskList"
              :key="index"
              :style="{ backgroundImage: `url(${item.imgUrl})` }"
            >
              <button
                v-if="index == 0"
                @click="playtask(item.taskId)"
                :class="item.curNum > 2 ? 'taskbtnno' : 'taskbtnyes'"
              ></button>

              <button
                v-if="index == 1"
                @click="playtask(item.taskId)"
                :class="item.curNum > 0 ? 'taskbtnno' : 'taskbtnyes'"
              ></button>

              <button
                v-if="index == 2"
                @click="playtask(item.taskId)"
                :class="item.curNum > 2 ? 'taskbtnno' : 'taskbtnyes'"
              ></button>

              <button
                v-if="index == 3"
                @click="playtask(item.taskId)"
                :class="item.curNum > 0 ? 'taskbtnno' : 'taskbtnyes'"
              ></button>
            </div>
          </div>
          <div class="taskbg" @click="moreTaskDetailClick">
            <div class="taskp"></div>            
            <img
              src="//img10.360buyimg.com/imgzone/jfs/t1/193813/29/31985/1221/639a90a1Ee2954bdc/aed0265c2120ed8a.png"
            />
          </div>
        </div>
      </div>
    </div>
    <taskexchange-pop
      v-show="isExchangShow"
      @playtask="playtask"
      @closeDiv="closeDiv"
    />
    <taskrule-pop
      v-show="isTaskRuleShow"
      :taskRecordInfo="taskRecordInfo"
      @closeDiv="closeDiv"
    />
  </div>
</template>

<script>
import taskexchangePop from "../components/taskexchange.vue";
import taskrulePop from "../components/taskrulePop.vue";
import { dzallShare } from "../../../../js/share";
import Swiper, { Autoplay } from "swiper";
import "swiper/swiper-bundle.css";
import apis from "../api/api.js";
let { getTaskList, task, taskRecord,saveLog } = apis;
let taskmySwiper;
export default {
  props: ["signNum","openCardStatus","points","activityuid"],
  components: {
    taskexchangePop,
    taskrulePop,
  },
  data() {
    return {
      isExchangShow: false,
      signList: [
        {
          name: "1天",
          status: false,
        },
        {
          name: "2天",
          status: false,
        },
        {
          name: "3天",
          status: false,
        },
        {
          name: "4天",
          status: false,
        },
        {
          name: "5天",
          status: false,
        },
        {
          name: "6天",
          status: false,
        },
        {
          name: "7天",
          status: false,
        },
        {
          name: "8天",
          status: false,
        },
        {
          name: "9天",
          status: false,
        },
        {
          name: "10天",
          status: false,
        },
        {
          name: "11天",
          status: false,
        },
        {
          name: "12天",
          status: false,
        },
        {
          name: "13天",
          status: false,
        },
        {
          name: "14天",
          status: false,
        },
      ],
      taskRecordInfo: [],
      isTaskRuleShow: false,
      signflag: false,
      taskInfo: [],
      taskList: [
        {
          taskId: "exchange",
          imgUrl:
            "//img10.360buyimg.com/imgzone/jfs/t1/76513/16/23517/15899/63a1551fE92802ca4/ff56a91b44e5b98f.png",
          curNum: 0,
        },
        {
          taskId: "followshop",
          imgUrl:
            "//img10.360buyimg.com/imgzone/jfs/t1/99168/7/29249/11371/63a1551fEb323f0b4/209af9b626a531ef.png",
          curNum: 0,
        },
        {
          taskId: "share2help",
          imgUrl:
            "//img10.360buyimg.com/imgzone/jfs/t1/160767/7/34021/16273/63a1551fE1b85bd5b/b2d144a090f2fa22.png",
          curNum: 0,
        },
        {
          taskId: "opencard",
          imgUrl:
            "//img10.360buyimg.com/imgzone/jfs/t1/2235/1/16648/11284/63a1551fE9d1ba668/01d4ca62770954cd.png",
          curNum: 0,
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.initswiper();
    this.queryData();
    // this.gettaskRecord();
  },
  watch: {
    signNum(oldValue, newVal) {
      this.queryData();
    },
    openCardStatus(oldValue, newVal){
      if(this.openCardStatus != 2){
        this.taskList[3].curNum = 1;
      }
    },
  },
  methods: {
    prev() {
      this.$refs.taskmySwiper.swiper.slidePrev();
    },
    next() {
      this.$refs.taskmySwiper.swiper.slideNext();
    },
    initswiper() {
      taskmySwiper = new Swiper(".swiper-container1", {
        width: 51,
        initialSlide: 0, // 默认选中项索引
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    },
    queryData() {
      getTaskList(this.$route.query.activityId, (data) => {
        this.taskInfo = data.data;
        this.signList.forEach((item, index) => {
          if (index < this.signNum) {
            item.status = true;
          }
        });
        this.taskInfo.forEach((t) => {
          if (t.taskId == "sign") {
            if (t.curNum > 0) {
              this.signflag = true;
            }
          }
          if (t.taskId == "exchange") {
            this.taskList[0].curNum = t.curNum;
          }

          if (t.taskId == "followshop") {
            this.taskList[1].curNum = t.curNum;
          }

          if (t.taskId == "share2help") {
            this.taskList[2].curNum = t.curNum;
          }
         
        });
      });
    },
    gettaskRecord() {
      taskRecord((data) => {
        this.taskRecordInfo = data.data;
        this.isTaskRuleShow = true;
      });
    },
    //关闭任务弹框
    tocolseDiv() {
      this.$emit("closeDiv");
    },

    moreTaskDetailClick() {
    this.gettaskRecord();
      // this.isTaskRuleShow = true;
    },
    closeDiv() {
      this.isTaskRuleShow = false;
      this.isExchangShow = false;
    },
    setShareButton() {
      this.saveLogNew('邀请好友');
      dzallShare(this.activityuid,(callBackData) => {
        console.log(callBackData, "callBackData");
      });
    },
    // 封装埋点
    saveLogNew(str){
      //埋点访问次数
      let param1 = {
        eleId: str,
      };
      saveLog(param1, (callbackData) => {});
    },
    //做任务
    playtask(taskId) {
      switch (taskId) {
        case "sign":
          if (this.signflag) {
            this.$toast("今日签到已完成");
            return;
          }
          break;
        case "exchange":
          if (this.taskList[0].curNum > 2) {
            this.$toast("此任务已完成");
          } else {
            if(this.points < 50){
              this.$toast('积分不足');
              return;
            }
            this.isExchangShow = true;
          }
          return;
          break;
        case "followshop":
          if (this.taskList[1].curNum > 0) {
            this.$toast("此任务已完成");
            return;
          }
          break;
        case "share2help":
          if (this.taskList[2].curNum > 2) {
            this.$toast("此任务已完成");
          } else {
            this.setShareButton();
          }
          return;
          break;
        case "opencard":
          if(this.taskList[3].curNum > 0){
            this.$toast('已完成开卡');
            return;
          }
          this.$emit("toOpenCard", "任务开卡");
          return;
          break;
        case "newexchange":
          if (this.taskList[0].curNum > 2) {
            this.$toast("此任务已完成");
            return;
          }
          taskId = "exchange";
          break;
      }
      let param = {
        activityId: this.$route.query.activityId,
        taskId: taskId,
        param: null,
      };
      task(param, (data) => {
        if (data.resp_code == 0) {
          switch (taskId) {
            case "sign": 
              this.signflag = true;
              this.$emit("savesignnum");
              setTimeout(() => {
                if(data.data.chance>0){
                  this.$toast("抽盒次数+1");
                }else{
                  this.$toast("签到成功");
                }
              }, 1500);
              break;
            case "exchange":
              this.points -= 50;
              this.taskList[0].curNum++;
              this.isExchangShow = false;
              if(data.data.chance>0){
                this.$toast("抽盒次数+1");
              }else{
                this.$toast("兑换成功");
              }
              break;
            case "followshop":
              this.taskList[1].curNum++;
              if(data.data.chance>0){
                this.$toast("抽盒次数+1");
              }else{
                this.$toast("关注成功");
              }
              break;
            case "share2help":
              this.taskList[2].curNum++;
              //   this.setShareButton();
              //   this.$toast("邀请成功");
              break;
          }
          this.$emit("savechance", data.data.chance);
        } else {
          this.$toast(data.resp_msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.taskPopDivAll {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/214262/20/24621/20314/639d5662E7364dee7/a8c21ad78bbc41dc.jpg");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .taskDivContent {
    position: absolute;
    bottom: 0;
  }
  .titleDiv {
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/160901/32/33324/58854/637c8a13E64da4d19/e3ba18bcaa79b4ee.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 5.52rem;
    height: 2.43rem;
    margin-left: calc(50% - 5.52rem / 2);
    margin-bottom: 0.22rem;
  }
  .contentDiv {
    width: 7.5rem;
    height: 11.04rem;
    position: relative;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/60309/12/23092/15817/63a15520E30341f68/a5913a13a30c5998.png");
    background-size: 100% 100%;

    .taskListDivAll {
      display: flex;
      flex-direction: column;
      align-items: center;
      .closeDiv {
        width: 0.55rem;
        height: 0.55rem;
        background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/62477/6/22306/1308/639ab13eEaa8fba40/455db7234cbaad08.png");
        background-size: 100% 100%;
        position: absolute;
        right: 0rem;
        top: -0.6rem;
      }
      .signconten {
        width: 7.15rem;
        height: 2.65rem;
        background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/206021/13/32579/12939/63a1551fE429ff45f/08b3fe407c59b033.png");
        background-size: 100% 100%;
        margin-top: 1rem;
        position: relative;
        .signbtn {
          width: 1.35rem;
          height: 0.47rem;
          background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/47105/9/22148/2206/63a1551fE874cb639/6769d6d0ce07dbb8.png");
          background-size: 100% 100%;
          position: absolute;
          top: 2rem;
          right: 0.3rem;
        }
        .swiper-container1 {
          width: 6.8rem;
          height: 1rem;
          position: absolute;
          top: 0.8rem;
          left: .15rem;
          z-index: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
          --swiper-navigation-color: #000000; /* 单独设置按钮颜色 */
          --swiper-navigation-size: 15px; /* 设置按钮大小 */
          overflow: hidden;
        }
        .swiper-button-prev {
          left: 0rem;
          z-index: 0;
          --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
          --swiper-navigation-color: #000000; /* 单独设置按钮颜色 */
          --swiper-navigation-size: 15px; /* 设置按钮大小 */
        }
        .swiper-button-next {
          right: 0rem;
          z-index: 0;
          --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
          --swiper-navigation-color: #000000; /* 单独设置按钮颜色 */
          --swiper-navigation-size: 15px; /* 设置按钮大小 */
        }

        .swiper-slide {
          width: 1rem;
          height: 1rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          p {
            font-weight: bold;
            font-size: 0.3rem;
            color: #000;
          }
          .signno {
            width: 0.62rem;
            height: 0.45rem;
            background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/67649/40/23278/375/63a1551fEd91e0164/e8d3b488f6e366b0.png");
            background-size: 100% 100%;
          }

          .signyes {
            width: 0.62rem;
            height: 0.45rem;
            background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/200204/15/30231/731/63a1551fE8bcc02f4/81ba471fba77b7b8.png");
            background-size: 100% 100%;
          }
          .signone {
            width: 0.62rem;
            height: 0.45rem;
            background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/187902/3/31668/1049/63aab0b8F4ce91705/01c57dcfef9b0e8d.png");
            background-size: 100% 100%;
          }
          .signtwo {
            width: 0.62rem;
            height: 0.45rem;
            background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/40227/15/20767/1359/63aab0b8Fccb10ed0/c069fd1add114b55.png");
            background-size: 100% 100%;
          }
          .signthried {
            width: 0.62rem;
            height: 0.45rem;
            background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/172630/10/32737/1494/63aab0b9F23a1f488/0f7cf0a4afa364b0.png");
            background-size: 100% 100%;
          }
        }
      }
      .taskPart {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 7.2rem;
        height: 6rem;
        .selftask {
          width: 7.15rem;
          height: 1.44rem;
          background-size: 100% 100%;
          position: relative;
          .taskbtnno {
            width: 1.35rem;
            height: 0.47rem;
            background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/100402/14/35801/1699/63a15520E7a187ad4/288fca5f2c9b6059.png");
            background-size: 100% 100%;
            position: absolute;
            right: 0.3rem;
            top: 0.5rem;
          }
          .taskbtnyes {
            width: 1.35rem;
            height: 0.47rem;
            background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/93244/16/33599/1808/63a15520Ec5d4f007/9bd430ca9f79c4cf.png");
            background-size: 100% 100%;
            position: absolute;
            right: 0.3rem;
            top: 0.5rem;
          }
        }
      }

      .taskbg {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 0rem;
        right: 0.3rem;
        .taskp{
          width: 1.03rem;
          height: 0.25rem;
          background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/102134/26/35301/1476/63ab9cb1F897093a3/dd87cdca1967ba23.png");
          background-size: 100% 100%;
        }
        p {
          color: red;
          font-size: 0.3rem;
        }
        img {
          width: 1.2rem;
          height: 0.03rem;
          margin-top: 0.1rem;
        }
      }
    }
  }
}

.gray100 {
  filter: grayscale(100%);
}
</style>
