<template>
  <!-- mode="bottom" -->
  <div>
    <myPop :is-show="isShow" is-welt>
      <div class="__draw_pop cc_rela cc_app750">
        <div class="cc_rela cc_width" style="height: 1.06rem;">
          <bg-wrap :config="drawImage.back" classCom="cc_abs __task_2_back" :is-hove="!isLuckStart" @onTap="onClose">
          </bg-wrap>
          <div class="__detailed_right cc_abs cc_space_bn">
            <div class="cc_app750" @click="!isLuckStart && $emit('openRulePop')">
              活动规则
            </div>
            <div class="cc_app750" @click="!isLuckStart && $emit('openLuckListPop')">
              K星榜单
            </div>
          </div>
        </div>
        <Kong height="50"></Kong>
        <div class="__title_draw cc_column">
          <bg-wrap :config="drawImage.title" />
          <Kong :height="50" />
          <bg-wrap :config="drawImage['bg_' + isTaskPage]" :classCom="`cc_column cc_rela`" :is-hidden="false">
            <div class="top_btn cc_space_bn cc_width">
              <div @click="isTaskPage = 1"></div>
              <div @click="openMyPrize"></div>
            </div>
            <!-- 1 -->
            <div class="__luck_draw_box cc_abs cc_space_bn_w" v-if="isTaskPage === 1">
              <div class="__luck_draw_9_item cc_flex_none" v-for="(item, index) in drawImage.list_1" :key="index">
                <bg-wrap :config="item.imgK" v-if="item.imgK" :is-hove="!isLuckStart" @onTap="startLuckly" />
                <bg-wrap :config="
                  drawImage[
                  luckActList[currentActIndex] === index ? 'a' : 'h'
                  ]
                " 
                style-str="background-size: 1.94rem 1.94rem;"
                
                classCom="cc_app750" v-else>
                  <bg-wrap :config="item.imgUrl" />
                </bg-wrap>
              </div>
            </div>
            <div class="__luck_num cc_abs cc_app750" v-if="isTaskPage === 1">
              {{ Math.floor(score / 50) }}
            </div>
            <bg-wrap v-if="isTaskPage === 1" classCom="__gift_r_b cc_abs" :config="drawImage.gift" />

            <!-- 2 -->
            <div class="__luck_draw_list cc_abs" v-if="isTaskPage === 2">
              <Kong height="48"></Kong>
              <div class="__zhanwujilu" v-if="PrizeList.length === 0">
                暂无记录
              </div>
              <div class="__prize_item cc_width cc_space_bn_a" v-for="(item, index) in PrizeList" :key="index">
                <div class="__prize_item_name">
                  {{ item.rewardName }}
                </div>
                <div>{{ item.timeStr }}</div>
                <div class="__prize_item_btn cc_app750 cc_hove" @click="openAddress(item, index)"
                  v-if="item.rewardType === 3">
                  {{ item.hasWriteAddress ? "去查看" : "去填写" }}
                </div>

                <div class="__prize_item_btn cc_app750 cc_hove __prize_item_btn_a" v-else>
                  已发放
                </div>
              </div>
            </div>
          </bg-wrap>
        </div>
      </div>
    </myPop>
    <Address @setHasWriteAddress="setHasWriteAddress" ref="address" @navShopHome="$emit('navShopHome')"></Address>
  </div>
</template>

<script>
import { drawImage } 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 Address from "./Address.vue";
import { getApiData } from "../api";
import { dateChangeYYYY } from "../utils";
export default {
  name: "",
  components: {
    myPop,
    bgWrap,
    Kong,
    Address,
  },
  props: {
    score: Number,
  },
  data() {
    return {
      drawImage,
      isShow: false,
      isTaskPage: 1,
      luckActList: [0, 1, 2, 5, 8, 7, 6, 3],
      isLuckStart: false,
      currentActIndex: null,

      PrizeList: [],
    };
  },
  watch: {},
  computed: {},
  created() { },
  mounted() { },
  destroyed() {
    this.timer_1 && clearInterval(this.timer_1);
  },

  methods: {
    //开始抽奖
    async startLuckly() {
      if (this.$parent.onHandleBefour("startLuckly")) return;
      if (this.isLuckStart) return;
      if (this.score < 50) return this.$emit("onNoKb"); //没币
      this.isLuckStart = true;
      const [res, err] = await getApiData("draw").then(
        (r) => [r, null],
        (f) => [null, f]
      );
      console.log(res, err, "sssssssssssssss");
      if (err) return (this.isLuckStart = false);
      const { pos } = res;

      this.$emit("onLuckly"); // 抽一次奖

      const { luckActList } = this;
      const actLength = luckActList.length;
      const lucksList = [4, 6, 2, 0];
      const noLuckList = [1, 3, 5, 7];
      const randomNum = Math.round(Math.random() * 3);
      const luckNum = pos === -1 ? noLuckList[randomNum] : lucksList[pos - 1];
      console.log(luckNum, randomNum, pos);
      const allNum = actLength * 3 + luckNum;
      let spot = 0;
      this.currentActIndex = 0;
      let timer_1 = setInterval(() => {
        if (spot === allNum) {
          clearInterval(timer_1);
          setTimeout(() => {
            console.log("抽奖结束");
            this.$emit("drawComponent", res);
            this.currentActIndex = null;
            this.isLuckStart = false;
          }, 100);
          return;
        }
        if (this.currentActIndex === actLength - 1) {
          this.currentActIndex = 0;
        } else {
          this.currentActIndex++;
        }
        spot++;
      }, 100);
    },
    openPop() {
      this.isTaskPage = 1;
      this.isShow = true;
    },
    openMyPrize() {
      if (this.isLuckStart) return;
      if (!this.isShow) this.isShow = true;
      this.isTaskPage = 2;
      getApiData("getMyPrize").then((r) => {
        console.log(r);
        this.PrizeList = r.map((item) => {
          item.timeStr = dateChangeYYYY(item.createtime, 1);
          return item;
        });
        console.log(this.PrizeList);
      });
    },
    onClose() {
      if (this.isLuckStart) return;
      this.isShow = false;
    },
    //打开填写地址
    openAddress(item, index) {
      console.log(item);
      this.$refs.address.openAddress(item, index);
    },
    setHasWriteAddress(index) {
      console.log(index, "ssssssssssss");
      this.$set(this.PrizeList[index], "hasWriteAddress", true);
    },
  },
};
</script>

<style scoped>
@import url("../css/peterCss.css");

.__draw_pop {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  flex-flow: column;
}

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

.__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;
}

.__title_draw {
  /* top: 50%;
  transform: translateY(-50%); */
  /* bottom: 0.48rem; */
}

.__draw_bottom {
  bottom: 3.48rem;
}

.top_btn {
  height: 0.8rem;
}

.top_btn>div {
  width: 50%;
}

.__gift_r_b {
  bottom: -0.14rem;
  right: -0.25rem;
}

.__luck_draw_box {
  width: 6.46rem;
  height: 6.55rem;
  top: 1.3rem;
  padding: 0.04rem 0.14rem;
  align-content: start;
}

.__luck_draw_list {
  width: 6.46rem;
  height: 7.04rem;
  top: 1.91rem;
  overflow: auto;
  padding: 0 0.28rem;
}

.__luck_draw_9_item {
  width: 1.95rem;
  height: 1.95rem;
  margin-top: 0.16rem;
}

.__luck_num {
  min-width: 0.36rem;
  height: 0.36rem;
  border-radius: 0.18rem;
  padding: 0 0.06rem;
  background-color: #ff4d27;
  font-size: 0.22rem;
  color: #fff;
  bottom: 0.76rem;
  left: 4.34rem;
}

.__prize_item {
  margin-bottom: 0.58rem;
  color: #000000;
  font-size: 0.24rem;
}

.__prize_item_name {
  width: 1.56rem;
}

.__prize_item_btn {
  width: 1.38rem;
  height: 0.34rem;
  border-radius: 0.1731rem;
  background-color: #e5ff56;
  border-bottom: #399ab6 solid 0.01rem;
  font-size: 0.22rem;
}

.__prize_item_btn_a {
  background-color: #399ab6;
  color: #fff;
}

.__zhanwujilu {}
</style>
