<script setup>
import { gsap } from "gsap";
import { debounceTap } from "@/plugins";
import { useMainStore } from "@/store";
import { posterCreate } from "@/plugins";
import { Toast } from "vant";
import QRCode from "qrcode";
import { reactive } from "vue";

// 页面配置初始化
const emit = defineEmits(["ResultPage"]);
const userStore = useMainStore();
const posterId = ref(Math.floor(Math.random() * 3) + 1); //海报背景id：1～3

const posterTextSrc = new URL(`../assets/images/result/poster-text.png`, import.meta.url).href

const posterImgList = reactive([
  new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
  new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
  new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
]);

// 生成二维码逻辑
const eqcodePic = ref();
onMounted(() => {
  console.log("posterId:", posterId.value);
  let eqCodeUrl = import.meta.env.VITE_URL;
  QRCode.toDataURL(eqCodeUrl)
    .then((url) => {
      eqcodePic.value = url;
      // console.log("eq", eqcodePic.value);
    })
    .catch((err) => {
      console.error(err);
    });

  gsap.from(".result-bg", {
    duration: 0.7,
    scale: 1.2,
    autoAlpha: 0,
  });
  gsap.from(".result-title", {
    duration: 0.7,
    y: 20,
    autoAlpha: 0,
    delay:0.3,
  });
  gsap.from(".r-text", {
    duration: 0.7,
    scale: .5,
    autoAlpha: 0,
    delay:0.5,
  });
  gsap.from(".r-click-area", {
    duration: 0.7,
    y: 20,
    autoAlpha: 0,
    delay:1,
    onComplete:()=>{
      gsap.to('.create-poster',{duration:1,scale:'0.9',repeat:-1,yoyo:true,ease:'bounce.in'})

    }
  });
});

// 生成海报逻辑
const createPoster = (event) => {
  let e = event.target.parentElement;
  debounceTap(e, () => {
    // 海报生成
    posterCreate(
      { width: 750, height: 1334 }, //海报尺寸
      // 海报素材，按顺序依次渲染
      [
        // 背景
        {
          name: "bg",
          src: posterImgList[posterId.value - 1],
          pos: { w: 750, h: 1334, x: 0, y: 0 },
        },
        //   二维码
        {
          name: "eqcode",
          src: eqcodePic.value,
          pos: { w: 194, h: 195, x: 502, y: 1090 },
        },
        // 文案
        {
          name: "text",
          src: posterTextSrc,
          pos: { w: 337, h: 117, x: 81, y: 1133 },
        },
      ]
    );

    // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
  });
};

// 去抽奖
const goDraw = (event) => {
  let e = event.target.parentElement;
  console.log('e',e);
  debounceTap(e, () => {
    if (userStore.hasDraw) {
      emit("ResultPage", { action: "showDraw" });
    } else {
      Toast("今日暂无抽奖机会");
    }
  });
};

// 隐藏海报弹窗
const hidePop = (event) => {
  let e = event.target;
  debounceTap(e, () => {
    gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
  });
};

// 展示分享
const goShare = (event) => {
  let e = event.target.parentElement;
  debounceTap(e, () => {
    gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
  });
};

// 隐藏分享提示
const hideShare = () => {
  gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
};
</script>

<template>
  <div class="ResultPage" @touchmove.prevent>
    <div :class="'result-bg-' + posterId" class="result-bg"></div>
    <div class="result-container">
      <!-- 标题 -->
      <div class="result-title"></div>
      <!-- 文案 -->
      <div :class="'r-text-' + posterId" class="r-text"></div>
      <!-- 生成海报按钮 -->
      <div class="create-poster" >
        <div class="r-click-area" @click="createPoster($event)"></div>
      </div>
    </div>
  </div>
  <!-- 海报弹窗 -->
  <div class="posterPop" @touchmove.prevent>
    <div class="cls-btn-box">
      <div class="cls-btn" @click="hidePop($event)"></div>
    </div>
    <div class="poster-box">
      <div class="poster" :class="'poster-' + posterId">
        <img id="posterSrc" src="" alt="" srcset="" />
      </div>
    </div>
    <div class="save-tips">*长按保存海报</div>
    <div class="btn-box">
      <div class="go-draw" >
        <div class="r-click-area" @click="goDraw($event)"></div>
      </div>
      <div class="go-share" >
        <div class="r-click-area" @click="goShare($event)"></div>
      </div>
    </div>
  </div>
  <!-- 分享提示 -->
  <div class="sharePop" @click="hideShare">
    <div class="tips-pic"></div>
    <div class="tips-text">点击右上角分享给你的好友！</div>
  </div>
</template>  


<style lang="scss" scoped>
.ResultPage {
  @include fixed();
  background-color: azure;

  .result-bg-1 {
    @include pos(750px, 1624px, 0px, 50%);
    @include bg_pos("result/r-bg-1.jpg");
    transform: translateY(-50%);
    pointer-events: none;
  }
  .result-bg-2 {
    @include pos(750px, 1624px, 0px, 50%);
    @include bg_pos("result/r-bg-2.jpg");
    transform: translateY(-50%);
    pointer-events: none;
  }
  .result-bg-3 {
    @include pos(750px, 1624px, 0px, 50%);
    @include bg_pos("result/r-bg-3.jpg");
    transform: translateY(-50%);
    pointer-events: none;
  }

  .result-container {
    @include pos(750px, 1624px, 0px, 50%);
    transform: translateY(-50%);

    .result-title {
      @include pos(537px, 116px, 118px, 258px);
      @include bg_pos("result/title.png");
      pointer-events: none;
    }

    .r-text {
      pointer-events: none;
    }

    .r-text-1 {
      @include pos(638px, 814px, 67px, 396px);
      @include bg_pos("result/text-1.png");
    }
    .r-text-2 {
      @include pos(643px, 814px, 67px, 396px);
      @include bg_pos("result/text-2.png");
    }
    .r-text-3 {
      @include pos(643px, 844px, 63px, 392px);
      @include bg_pos("result/text-3.png");
    }

    .create-poster {
      @include pos(337px, 151px, 206px, 1253px);
      @include bg_pos("result/create-btn.png");
      .r-click-area {
      @include pos(256px, 69px, 35px, 14px);
    }
    }
  }
}

.posterPop {
  @include fixed();
  @include flexCen();
  background-color: rgba($color: #000000, $alpha: 0.6);
  visibility: hidden;

  .cls-btn-box {
    width: 617px;
    display: flex;
    justify-content: flex-end;

    .cls-btn {
      @include box(43px, 43px);
      @include bg_pos("result/cls-btn.png");
      margin-right: -20px;
    }
  }

  .save-tips {
    font-size: 20px;
    line-height: 20px;
    margin-top: 20px;
    color: #fff;
    letter-spacing: 2px;
  }

  .poster-box {
    @include box(617px, 881px);
    margin-top: 20px;
    overflow: hidden;

    .poster {
      @include box(100%, 100%);
      overflow: hidden;
      display: flex;
      justify-content: center;
      #posterSrc {
        // @include box(100%, 100%);
        width: 80%;
        border: 1px solid #fff;
        border-radius: 20px;
        // opacity: 0;
      }
    }
  }

  .btn-box {
    @include box(650px, 76px);
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    .r-click-area {
      @include pos(256px, 69px, 35px, 14px);
    }

    .go-draw {
      @include box(337px, 151px);
      @include bg_pos("result/go-draw-btn.png");
      position: relative;
    }

    .go-share {
      @include box(337px, 151px);
      @include bg_pos("result/go-share-btn.png");
      position: relative;
    }
  }
}

.sharePop {
  @include fixed();
  background-color: rgba($color: #000000, $alpha: 0.54);
  visibility: hidden;

  .tips-pic {
    @include pos(100px, 100px, 600px, 100px);
    @include bg_pos("result/share-tips.svg");
    stroke: #ffffff;
  }

  .tips-text {
    font-size: 25px;
    @include pos(750px, 100px, 0px, 220px);
    color: #ffffff;
    text-align: right;
  }
}
</style>