<template>
  <!-- mode="bottom" -->
  <myPop :is-show="isShow" is-welt>
    <div class="__kb_pop cc_rela cc_app750">
      <div class="cc_rela cc_width" style="height: 0.75rem;">
        <bg-wrap :config="KBImage.back" classCom="cc_abs __task_2_back" is-hove @onTap="downPop">
        </bg-wrap>
        <div class="__detailed_right cc_abs cc_space_bn">
          <div class="cc_app750" @click="$emit('openRulePop')">活动规则</div>
        </div>
      </div>

      <Kong height="50"></Kong>

      <div class="_kb_bottom_box cc_column">
        <bg-wrap :config="KBImage.title" />
        <Kong height="30"></Kong>
        <bg-wrap :config="KBImage.downtime" classCom="cc_rela" v-if="!myInfo.isGameEnd">
          <div class="__down_time_box cc_flex" v-if="downTimeDatile.dd >= 1">
            <div :class="`__down_time_box_bend_1_${index+1} ${downTimeDatile.dd >= 1?'__bend_2_'+index:''}`" v-for="(item,index) in downTimeDatile.text" :key="index">{{item}}</div>
          </div>
        </bg-wrap>
        <bg-wrap :config="KBImage.downtime_a" classCom="cc_rela" v-else></bg-wrap>
        <Kong height="40"></Kong>
        <bg-wrap :config="KBImage.prize" />
        <Kong height="30"></Kong>
        <bg-wrap :config="KBImage.kb_bg" classCom="cc_rela " :is-hidden="false">
          <div class="cc_abs cc_width __kb_list cc_column">
            <bg-wrap :config="KBImage.no_list" classCom="__list_no" v-if="false"></bg-wrap>
            <div class="__kb_list_item cc_width cc_rela cc_flex_none" v-for="(item, index) in RankList" :key="index">
              <div class="__kb_list_item_1 cc_abs __item_kb">
                <div class="__prize_h cc_app750" v-if="index >= 3">
                  {{ prizeH(index) }}
                </div>
                <bg-wrap v-else :config="KBImage['top' + (index + 1)]"></bg-wrap>
              </div>
              <div class="cc_fl_al_ce __kb_list_item_2 cc_abs __item_kb">
                <img class="__avat_img" :src="item.avatar" />
                <div style="width: 1rem; text-align: start">
                  {{ item.nickName }}
                </div>
              </div>
              <div class="__kb_list_item_3 cc_abs __item_kb">
                {{ item.score }}
              </div>
            </div>
          </div>
          <div class="_my_ranking cc_width cc_abs">
            <bg-wrap classCom="__kb_list_item_1 cc_abs __item_kb" :config="KBImage['top' + myRank]" v-if="myRank <= 3">
            </bg-wrap>
            <div class="cc_abs _my_ranking_1 __kb_list_item_1 __item_kb" v-else>
              {{ myRank }}
            </div>
            <div class="
                cc_abs
                _my_ranking_2
                __kb_list_item_2
                cc_fl_al_ce
                __item_kb
              ">
              <img class="__my_avat_img" :src="myInfo.avatar" />
              <div>{{ myInfo.nickName }}</div>
            </div>
            <div class="cc_abs _my_ranking_3 __kb_list_item_3 __item_kb">
              {{ myScore }}
            </div>
            <bg-wrap v-if="
              myInfo.hasDraw &&
              myInfo.rankPrize &&
              myInfo.rankPrize.status === 0
            " :config="KBImage.receive" is-hove classCom="cc_abs __nav_receive" @onTap="receiveAward"></bg-wrap>
          </div>
        </bg-wrap>
        <Kong height="10"></Kong>
        *最终排名结果以11月11日20点为准
      </div>
    </div>
  </myPop>
</template>

<script>
import { KBImage } 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";
export default {
  name: "",
  components: {
    myPop,
    bgWrap,
    Kong,
  },
  props: {
    myInfo: Object,
    downTimeDatile: Object,
  },
  data() {
    return {
      KBImage,
      isShow: false,
      RankList: [],
      myRank: "未上榜",
      myScore: 0,
    };
  },
  watch: {},
  computed: { },
          created() { },
          mounted() { },
          methods: {
            openPop() {
            this.isShow = true;
          this.$emit("initDownTime");
      getApiData("rankList").then((r) => {
            console.log(r);
          this.RankList = r.list;
          this.myScore = r.myScore || 0;
          this.myRank = r.myRank || "未上榜";
      });
    },
          downPop() {
            this.$emit("initDownTime", true);
          this.isShow = false;
    },
          prizeH(index) {
      const val = index + 1;
          const value = val < 10 ? "0" + val : val;
          return value;
    },
          //领奖
          receiveAward() {
            this.$emit("openPrizePop", this.myInfo.rankPrize);

      // return this.$emit('openPrizePop',{rewardImg:2})
    },
  },
};
</script>

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

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

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

.__detailed_right {
  /* top: 104rem; */
  /* height: 112rem; */
  /* height: 1.06rem; */
  /* top: 1.36rem; */
  top: 0.1rem;
  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;
}

._kb_bottom_box {
  /* bottom: 0.24rem; */
  /* top: 50%;
		transform: translateY(-50%); */
  font-size: 0.2rem;
  color: #ffffff;
  line-height: 1;
}

.__kb_list {
  height: 4.02rem;
  top: 0.82rem;
  overflow: auto;
}

.__list_no {
  margin-top: 0.48rem;
}

.__kb_list_item {
  height: 0.94rem;
  font-size: 0.26rem;
  color: #010101;
}

.__avat_img {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.2rem;
}

.__prize_h {
  width: 0.41rem;
  height: 0.41rem;
  background-color: #399ab6;
  border-radius: 50%;
  color: #fff;
}

.__item_kb {
  top: 50%;
}

.__kb_list_item_1 {
  left: 0.75rem;
  transform: translate(-50%, -50%);
}

.__kb_list_item_2 {
  left: 3.22rem;
  transform: translate(-50%, -50%);
}

.__kb_list_item_3 {
  left: 5.7rem;
  transform: translate(-50%, -50%);
}

._my_ranking {
  height: 1.09rem;
  bottom: 0;
  font-size: 0.3rem;
  color: #000000;
}

._my_ranking_1 {
  height: 0.44rem;
  min-width: 0.44rem;
  padding: 0 0.15rem;
  background-color: #ff4d27;
  border-radius: 0.22rem;
  line-height: 0.44rem;
  font-size: 0.26rem;
  color: #fff;
}

.__my_avat_img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  margin-right: 0.1rem;
}

.__nav_receive {
  top: -0.24rem;
  right: -0.1rem;
}

.__down_time_box {
  position: absolute;
  top: 0.26rem;
  left: 1.56rem;
  font-size: 0.32rem;
  color: #000000;
  font-weight: 600;
}
.__down_time_box_bend_1_1{
  transform: rotate(10deg) translateY(0rem);
}
.__down_time_box_bend_1_2{
  transform: rotate(4deg) translateY(0.04rem);
}
.__down_time_box_bend_1_3{
  transform: rotate(3deg) translateY(0.06rem);
}
.__down_time_box_bend_1_4{
  transform: rotate(2deg) translateY(0.07rem);
}
.__down_time_box_bend_1_5{
  transform: rotate(-2deg)  translateY(0.06rem);
}
.__down_time_box_bend_1_6{
  transform: rotate(-3deg) translateY(0.03rem);
}
.__down_time_box_bend_1_7{
  margin-left: 0.1rem;
  transform: rotate(-1deg);
}
.__down_time_box_bend_1_8{
  transform: rotate(-2deg) translateY(-0.02rem);
}
.__down_time_box_bend_1_9{
  transform: rotate(-3deg) translateY(-0.03rem);
}
.__down_time_box_bend_1_10{
  transform: rotate(-2deg) translateY(-0.03rem);
}
.__down_time_box_bend_1_11{
  transform: rotate(-1deg)  translateY(-0.04rem);
}
.__down_time_box_bend_1_12{
  transform: rotate(0deg)  translateY(-0.05rem);
}
.__down_time_box_bend_1_13{
  transform: rotate(1deg)  translateY(-0.04rem);
}
.__down_time_box_bend_1_14{
  transform: rotate(2deg)  translateY(-0.04rem);
}
.__down_time_box_bend_1_15{
  transform: rotate(3deg)  translateY(-0.02rem);
}
.__bend_2_12{
  transform: rotate(0deg)  translateY(-0.03rem);
}



</style>
