<template>
  <div class="myPrizeCon" @touchmove.prevent>
    <div class="myPrize_container">
      <!-- 有奖品 -->
      <div class="prize_has" v-if="prizeList.length != 0">
        <div class="cake"></div>
        <div class="prize_box">
          <div class="prize_top">
            <div class="prize_title"></div>
          </div>
          <div class="prize_middle">
            <div class="prize_item" v-for="(item, key) in prizeList" :key="key">
              <div class="prize_li">
                <div class="prize_num">{{ item.prizeNum }}元红包</div>
                <div class="prize_spe">{{ item.spe }}</div>
              </div>
              <div class="buttom">
                <img
                  :src="
                    item.isGeted == 0
                      ? require('../assets/img/pop/view_btn.png')
                      : require('../assets/img/pop/got_btn.png')
                  "
                  @click="getMoney(item)"
                />
              </div>
            </div>
          </div>
          <div class="prize_bottom"></div>
        </div>
      </div>

      <!-- 没奖品记录 -->
      <div class="prize_no" v-if="prizeList.length == 0"></div>
      <div class="cls_btn" @click="hide"></div>
    </div>
  </div>
  <!-- 领取成功反馈弹窗 -->
  <div class="GotedPop" @touchmove.prevent>
    <div class="goted_container">
      <div class="goted_box">
        <div class="to_index_btn" @click="hide"></div>
      </div>
      <div class="cls_btn" @click="hidePop"></div>
    </div>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  defineEmits,
  defineProps,
  reactive,
  ref,
  toRefs,
} from "vue";
import gsap from "gsap";
import axios from "axios";
import service from "@/api/httpServe";
import qs from "qs";
import { Toast, Dialog } from "vant";
import { useStore } from "vuex";
import wx from "@/utils/wx-jssdk.1.6.0.js";

// 初始化
const emit = defineEmits(["MyPrize"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore();

const prizeList = reactive([
  // {
  //   id: 1,
  //   prizeNum: 8.8,
  //   isGeted: true,
  //   isHas: true,
  //   spe: "财富88，与“礼”共见证",
  // },
  // {
  //   id: 2,
  //   prizeNum: 8.8,
  //   isGeted: false,
  //   isHas: true,
  //   spe: "添加专属服务人员企微",
  // },
]);

// 页面挂载前
onBeforeMount(() => {
  let arr = store.state.userAccount.prizeList;
  arr.forEach((element) => {
    if (element.receiveStatus != -1) {
      if (element.type == 1) {
        prizeList.push({
          id: element.id,
          type: element.type,
          prizeNum: element.amount,
          isGeted: element.receiveStatus,
          spe: "财富88，与“礼”共见证",
        });
      }

      if (element.type == 2) {
        prizeList.push({
          id: element.id,
          type: element.type,
          prizeNum: element.amount,
          isGeted: element.receiveStatus,
          spe: "添加专属服务人员企微",
        });
      }
    }
  });
});

// 页面挂载后
onMounted(() => {
  gsap.from(".myPrizeCon", { duration: 0.3, autoAlpha: 0 });
  gsap.from(".myPrize_container", {
    duration: 0.3,
    scale: 0.2,
    autoAlpha: 0,
    delay: 0.1,
  });
  // gsap.from('.rule_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
});

const hide = () => {
  emit("MyPrize");
};

const hidePop = () => {
  gsap.to(".GotedPop", { duration: 0.5, autoAlpha: 0 });
  gsap.to(".myPrizeCon", { duration: 0.5, autoAlpha: 1, delay: 0.2 });
};

// 领取按钮
const getMoney = (val) => {
  console.log("val:", val);

  // 红包类型未参与红包： 需先绑定牛卡号
  if (val.type == 1) {
    console.log("牛卡号：",store.state.userAccount.nkh);
    if (store.state.userAccount.nkh == '') {
      // Toast("牛卡号为空，先绑定牛卡号");
      Dialog.confirm({
        title: "温馨提示",
        message: "牛卡号为空，先绑定牛卡号",
        confirmButtonText: "前往绑定",
      })
        .then(() => {
          wx.miniProgram.navigateTo({
            url: "/subs/bind/pages/login/login",
          });
        })
        .catch(() => {
          console.log(2);
          // on cancel
        });
    } else {
      getLuckyBag(val.id);
    }
  }

  if (val.type == 2) {
    if (val.isGeted == 0) {
      console.log("未领取", val);
      getLuckyBag(val.id);
    }
  }
};

// 领取接口
const getLuckyBag = (id) => {
  service
    .post(
      process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/receive/" + id,
      {}
    )
    .then((res) => {
      console.log("领取红包结果", res);

      let data = res.data;

      if (data.code == 0) {
        gsap.to(".GotedPop", { duration: 1, autoAlpha: 1, delay: 0.2 });
        gsap.to(".myPrizeCon", { duration: 1, autoAlpha: 0 });
        getMyPrizeRecored();
      } else {
        Toast(data.msg);
      }
    });
};

// 我的红包记录
const getMyPrizeRecored = () => {
  service
    .post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
    .then((res) => {
      console.log("红包记录：", res.data);

      store.commit({
        type: "updatePrizeList",
        prizeList: res.data.data,
      });
    });
};
</script>

<style lang="scss" scoped>
.myPrizeCon {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);

  .myPrize_container {
    width: 750px;
    height: 1180px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    // 有奖品央视
    .prize_has {
      display: flex;
      flex-direction: column;
      align-items: center;
      .cake {
        width: 382px;
        height: 201px;
        @include bg_pos("../assets/img/pop/cake.png");
        z-index: 999;
      }

      .prize_box {
        width: 550px;
        margin-top: -34px;

        .prize_top {
          width: 550px;
          height: 135px;
          @include bg_pos("../assets/img/pop/prize_box_top.png");
          pointer-events: none;
          display: flex;
          justify-content: center;
          align-items: center;

          .prize_title {
            width: 267px;
            height: 58px;
            @include bg_pos("../assets/img/pop/my_prize.png");
          }
        }

        .prize_middle {
          width: 550px;
          height: 190px;
          @include bg_pos("../assets/img/pop/prize_box_middle.png");
          margin-top: 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          .prize_item {
            width: 463px;
            height: 67px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            margin: 20px auto;
            padding-bottom: 10px;

            .prize_li {
              display: flex;
              // justify-content: center;
              // align-items: center;
              flex-direction: column;

              .prize_num {
                color: #ca2f0a;
                font-weight: 700;
                font-size: 30px;
              }

              .prize_spe {
                color: #ca2f0a;
                font-weight: 700;
                font-size: 24px;
                margin-top: 5px;
              }
            }

            .buttom {
              width: 147px;
              height: 62px;
              background-size: 100%;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        .prize_bottom {
          width: 550px;
          height: 50px;
          @include bg_pos("../assets/img/pop/prize_box_bottom.png");
          margin-top: 0px;
        }
      }
    }

    // 无奖品样式
    .prize_no {
      width: 573px;
      height: 524px;
      @include bg_pos("../assets/img/pop/no_recored_pop.png");
    }

    .cls_btn {
      @include box(72px, 72px);
      @include bg_pos("../assets/img/pop/cls_btn.png");
      margin-top: 50px;
    }
  }
}

.GotedPop {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  visibility: hidden;

  .goted_container {
    width: 750px;
    height: 1180px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .goted_box {
      @include box(530px, 594px);
      @include bg_pos("../assets/img/pop/got_luckyBag_pop.png");
      position: relative;

      .to_index_btn {
        @include pos(394px, 92px, 79px, 389px);
        @include bg_pos("../assets/img/pop/to_index_btn.png");
      }
    }

    .cls_btn {
      @include box(72px, 72px);
      @include bg_pos("../assets/img/pop/cls_btn.png");
      margin-top: 50px;
    }
  }
}
</style>