<template>
  <div>
    <myPop :is-show="isTaskPage === 1" is-welt mode="bottom">
      <div class="__task_pop cc_flex cc_rela">
        <bg-wrap
          :config="taskImage.taskBg"
          :classCom="`__task_pop_1 cc_abs cc_column cc_flex_none`"
        >
          <Kong height="328"></Kong>
          <div
            class="__list_item"
            v-for="(item, index) in taskList"
            :key="index"
          >
            <bg-wrap :config="item.imgUrl" classCom="cc_rela">
              <bg-wrap
                :config="
                  taskImage[
                    item.curNum >= item.maxNeed ? 'complete' : 'nocomplete'
                  ]
                "
                :is-hove="true"
                @onTap="handleTaskOne(item, index)"
                classCom="__complete_btn cc_abs"
              ></bg-wrap>
              <bg-wrap
                :config="taskImage['add_' + item.addNum]"
                classCom="cc_abs"
                :styleStr="`left:${item.addRight}rem;top:${item.addTop}rem;`"
              ></bg-wrap>
              <div v-if="item.isShowNum" class="__num_text cc_abs">
                ({{ item.curNum }}/{{ item.maxNeed }})
              </div>
            </bg-wrap>
          </div>

          <bg-wrap
            :config="taskImage.nav_task_m"
            classCom="cc_abs __text_img"
            is-hove
            @onTap="openPop_2"
          >
          </bg-wrap>

          <bg-wrap
            :config="taskImage.taskpopclose"
            classCom="cc_abs __close"
            @onTap="isTaskPage = 0"
          ></bg-wrap>
        </bg-wrap>
      </div>
    </myPop>

    <myPop :is-show="isTaskPage === 2" is-welt mode="bottom">
      <div class="__task_pop cc_flex cc_rela">
        <div class="__detailed cc_abs cc_flex_none">
          <bg-wrap
            :config="taskImage.task2back"
            classCom="cc_abs __task_2_back"
            is-hove
            @onTap="isTaskPage = 1"
          >
          </bg-wrap>
          <div class="__detailed_right cc_abs cc_space_bn">
            <div class="cc_app750" @click="$emit('openRulePop')">活动规则</div>
            <div class="cc_app750" @click="$emit('openLuckListPop')">
              K星榜单
            </div>
          </div>
          <bg-wrap
            :config="taskImage.task2bg"
            classCom="cc_abs __task_2_bottom_ui"
          >
            <div class="__list_wrap cc_abs">
              <div
                class="cc_width __task_2_list_item cc_rela"
                v-for="(item, index) in taskRecordList"
                :key="index"
              >
                <div class="cc_abs __item_left __item-">{{ item.remark }}</div>
                <div class="cc_abs __item_cen __item-">{{ item.timeStr }}</div>
                <bg-wrap
                  :config="taskImage.pop_red"
                  classCom="cc_abs __item_right __item- cc_app750"
                >
                  +{{ item.score }}
                </bg-wrap>
              </div>
            </div>
          </bg-wrap>
        </div>
      </div>
    </myPop>
  </div>
</template>
  
  <script>
import { taskImage } from "../image/index.js";
import bgWrap from "./ui/bg-wrap.vue";
import myPop from "./ui/my-pop.vue";
import Kong from "./ui/kong.vue";
import { getApiData } from "../api";
import { dateChangeYYYY } from "../utils/index";
import { Toast } from "vant";
import {
  getQueryObject,
  getUrlQueryValueByKey,
  goToActive,
  goToShopPage,
} from "../../../../util/tools";
import store from "../../../../store/store";
import { callShare4MiniProgram } from "../../../../util/share";
export default {
  name: "",
  components: {
    myPop,
    bgWrap,
    Kong,
  },
  props: {},
  data() {
    return {
      taskImage,
      taskList: taskImage.taskList,
      taskRecordList: [],
      isShow: false,
      isTaskPage: 0,
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    console.log(taskImage);
  },

  methods: {
    //查看明细
    openPop_2() {
      getApiData("getTaskRecord", { page: 1, pageSize: 1000 }).then(
        (r) => {
          console.log(r);
          if (r && r.length !== 0) {
            this.isTaskPage = 2;
            this.taskRecordList = r.map((item) => {
              item.timeStr = dateChangeYYYY(item.createtime, 1);
              return item;
            });
          } else {
            this.$emit("openNoList");
          }
        },
        (f) => {
          console.log(f);
        }
      );
    },

    openPop() {
      this.isTaskPage = 1;
      getApiData("getTaskList").then(
        (r) => {
          this.taskList = this.taskList.map((item) => {
            let i = 0;
            r.some((itm, ind) => {
              const bool = item.taskId === itm.taskId;
              if (bool) i = ind;
              return bool;
            });
            return { ...item, ...r[i] };
          });
          console.log(this.taskList);
        },
        (f) => {
          console.log(f);
        }
      );
    },

    // 点击做任务
    async handleTaskOne(item, index) {
      window.taskCallback = null;
      switch (item.taskId) {
        //关注店铺
        case "followshop": {
          if (item.curNum >= item.maxNeed) return Toast("您已完成该任务啦");
          // this.handleData(item, index, 1);
          this.godoTsaks(item.taskId, item, index);
          break;
        }
        //浏览店铺
        case "scanshop": {
          if (item.curNum >= item.maxNeed) return this.$emit("navShopHome");
          //
          let oldtime = new Date().getTime();
          window.taskCallback = () => {
            const newTime = new Date().getTime();
            const downTime = newTime - oldtime > 15000;
            if (downTime) {
              this.godoTsaks(item.taskId, item, index, false);
            } else {
              Toast("浏览店铺未到15s");
            }
          };
          localStorage.setItem('doTask',JSON.stringify({taskId:item.taskId,time:oldtime}))
          this.$emit("navShopHome");
          //   goToShopPage
          break;
        }
        //邀请好友
        case "share2help": {
          if (item.curNum >= item.maxNeed) return Toast("您已完成该任务啦");
          getApiData("saveLog", { eleId: "share", param: "" });
          this.$emit("navGoShare");
          break;
        }
        // 加购商品
        case "add2cart": {
          // if (item.curNum >= item.maxNeed) return Toast("您已完成该任务啦");
          this.$emit("openAddGoods", item, index);
          getApiData("saveLog", { eleId: item.taskId, param: "" });
          break;
        }
        //下单
        case "order": {
          if (item.curNum >= item.maxNeed)
            return goToActive(
              "https://shop.m.jd.com/?shopId=1000376290&gx=RnFnx29QPGfYw9RP--tzVaWoFm8pi6pAVKB3&ad_od=share&utm_source=androidapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL"
            );
          goToActive(
            "https://shop.m.jd.com/?shopId=1000376290&gx=RnFnx29QPGfYw9RP--tzVaWoFm8pi6pAVKB3&ad_od=share&utm_source=androidapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL"
          );
          getApiData("saveLog", { eleId: item.taskId, param: "" });
          //   await this.godoTsaks(item.taskId, item, index);
          break;
        }
        //观看直播
        case "scanlive": {
          if (item.curNum >= item.maxNeed) return window.location.href = item.params;
          let oldtime = new Date().getTime();
          window.taskCallback = () => {
            const newTime = new Date().getTime();
            const downTime = newTime - oldtime > 20000;
            if (downTime) {
              this.godoTsaks(item.taskId, item, index, false);
            } else {
              Toast("观看直播未到20s");
            }
          };
          localStorage.setItem('doTask',JSON.stringify({taskId:item.taskId,time:oldtime}))
          window.location.href = item.params
          break;
        }

        default:
          break;
      }
      console.log(index);
    },
    async godoTsaks(taskId, item, index, noShow = true, skuId, callback) {
      const obj = { taskId };
      if (skuId) obj.param = skuId;
      const res = await getApiData("doTask", obj);
      setTimeout(() => {
        getApiData("saveLog", { eleId: taskId, param: "" });
      }, 3000);
      console.log(res, "[[[[[[[[[[[[[[[]]]]]]]]]]]]]]]");
      const chance = (res && res.chance) || "";
      if (noShow) {
        this.handleData(item, index, chance);
        callback && callback();
      } else {
        setTimeout(() => {
          this.handleData(item, index, chance);
        }, 5000);
      }
    },
    handleData(item, index, chance) {
      console.log(item, index, chance);
      this.$set(
        this.taskList[index],
        "curNum",
        this.taskList[index].curNum + 1
      );
      if (!chance) return;
      Toast(`${item.taskname}完成，游戏次数+${chance}`);
      this.$emit("addGameNum", chance);
    },
  },
};
</script>
  
  <style scoped>
@import url("../css/peterCss.css");
.__task_pop {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}

.__task_pop_1 {
  left: 0;
  bottom: 0;
}

.__close {
  top: 1.7rem;
  right: 0.3rem;
}

.__text_img {
  top: 2.68rem;
}

.__list_item {
  margin-bottom: 0.2rem;
}

.__complete_btn {
  top: 0.34rem;
  right: 0.24rem;
}

.__num_text {
  font-size: 0.3rem;
  line-height: 1;
  top: 0.32rem;
  left: 2.2rem;
  font-weight: bold;
}

.__detailed {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  /* left: 100%; */
}

.__task_2_back {
  top: 1.28rem;
  left: 0.57rem;
}

.__task_2_bottom_ui {
  bottom: 0;
}

.__detailed_right {
  /* top: 104rem; */
  /* height: 112rem; */
  height: 1.06rem;
  top: 0.98rem;
  right: 0%;
  flex-flow: column;
}

.__detailed_right > div {
  background-color: #313a39;
  width: 1.38rem;
  height: 0.48rem;
  border-radius: 0.24rem 0 0 0.24rem;
  color: #fff;
  font-size: 0.27rem;
}

.__task_1_anmio_2 {
  transform: translateX(-100%);
  transition: all 0.3s ease-out;
}

.__task_2_anmio_2 {
  transform: translateX(-100%);
  transition: all 0.3s ease-in;
}

.__task_1_anmio_1 {
  transform: translateX(0);
  transition: all 0.3s ease-in;
}

.__task_2_anmio_1 {
  transform: translateX(0);
  transition: all 0.3s ease-out;
}

.__list_wrap {
  width: 6.46rem;
  height: 4.88rem;
  top: 5.26rem;
  left: 0.5rem;
  overflow: auto;
}
.__task_2_list_item {
  height: 0.76rem;
}
.__item- {
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  color: #000;
  font-size: 0.24rem;
}
.__item_left {
  left: 1rem;
}
.__item_cen {
  left: 3.24rem;
}
.__item_right {
  left: 5.46rem;
  color: #fff;
  text-align: center;
}
</style>
  