<template>
  <ModalTransition class="ad" :show="show" position="center">
    <div class="ad-wrapper">
      <div class="btn-ad" v-html="adHtml" @click="adGoto"></div>
      <div class="close" @click="emit('close')"></div>
    </div>
  </ModalTransition>
</template>

<script setup>
import ModalTransition from "./ModalTransition.vue"
import { ref } from "vue"
import { isWeixinPlatform, miniJumpToActive, getMiniPageBtnHack } from "../libs/utils"
const props = defineProps({
  show: false,
})
const emit = defineEmits(['close'])
const adHtml = ref('')
//TODO: 这个地址后面要改的
adHtml.value = getMiniPageBtnHack("/pages/retail-act/landing-page/ordinary?id=897432916524553363&orgId=200282401019674482&programId=84796583983972352")
const adGoto = () => {
  if (!isWeixinPlatform()) {
    weui.alert("请前往「泸州老窖会员中心」小程序进行查询")
  }else{
    miniJumpToActive()
  }
}

</script>

<style>
.ad-wrapper {
  position: relative;
  width: 100vw;
  height: 190vw;
  background-image: url("../assets/images/ad-bg.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}

.btn-ad {
  width: 54.351852vw;
  height: 20.092593vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 180%);
  background-image: url("../assets/images/btn-ad.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}

.btn-ad wx-open-launch-weapp#launch-btn{
  width: 100%;
  height: 100%;
  display: block !important;
}

.ad .close {
  position: absolute;
  width: 8.148148vw;
  height: 8.148148vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top:  58vw;
  background-image: url("../assets/images/close-btn.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>