<script setup>
import GTPayAd from "./adUtils/h5Sdk.es";
import { ref } from "vue";

const tipStr = `输入json格式参数，例如：
    {
      "trafficId": "M6a4b331zz",
      "orderNumber": "1212121www"
    }`;
const textareaContent = ref("");
const isLoading = ref(false);
const handleClick = () => {
  console.log("Button clicked!");
  isLoading.value = true;

  // 生产
  const myAd = new GTPayAd("prod");

  let params = {};
  if (!textareaContent.value) {
    params = {
      trafficId: "M6df1899a4b",
      orderNumber: "sdfdjfo12323123",
    };
  } else {
    params = JSON.parse(textareaContent.value);
  }
  myAd.showAd(
    { ...params },
    {
      onSuccess: () => {
        isLoading.value = false;
        console.log("广告获取成功");
      },
      onError: (error) => {
        isLoading.value = false;
        alert(error?.msg ? error?.msg : "广告请求失败");
        console.error("广告获取失败:", error);
      },
    }
  );
};
</script>

<template>
  <div v-if="isLoading" class="loading-v">
    <div class="loading-indicator"></div>
  </div>
  <p style="text-align: left">{{ tipStr }}</p>
  <div style="display: flex; flex-direction: column; align-items: center">
    <textarea
      style="width: 500px; height: 300px; margin-bottom: 10px"
      :placeholder="tipStr"
      v-model="textareaContent"
    ></textarea>
    <button @click="handleClick">打开广告</button>
  </div>
</template>

<style scoped>
.loading-v {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.loading-indicator {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #09f;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
