<template>
  <div class="tools-wrap">
    <a-row :gutter="[20, 20]">
      <a-col :span="12">
        <div class="wrap new">
          <img src="../../../assets/payments/pingpong.png" />
          <div class="content">
            <p class="title">PingPong Checkout</p>
            <p class="describe">全球收单，品质之选。面向50亿消费者，支持全球50+种主流币种支付</p>
            <p class="info">
              <a-button type="primary" @click="openWindow('https://pay.pingpongx.com/aq/register?salerId=000167')">去使用</a-button>
            </p>
          </div>
        </div>
      </a-col>
      <a-col :span="12" v-if="acpUrl">
        <div class="wrap new">
          <img src="../../../assets/payments/alibaba.png" />
          <div class="content">
            <p class="title">Alibaba.com Pay</p>
            <p class="describe">阿里巴巴国际站旗下品牌，专业 B 类全场景资金解决方案。定义跨境收汇 5S 新体验</p>
            <p class="info">
              <a-button type="primary" @click="openWindow(acpUrl)">去使用</a-button>
            </p>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { getACPUrlParams } from './index.api';

export default {
  data() {
    return {
      acpUrl: '',
    };
  },
  async created() {
    await this.initACPUrl();
  },
  methods: {
    async initACPUrl() {
      try {
        const result = await getACPUrlParams();
        if (Array.isArray(result) && result.length >= 2) {
          const [signature, encrypt] = result;
          this.acpUrl = `https://payment.alibaba.com/home.html?from=suhaotong&&signature=${signature}&platformParam=${encrypt}`;
        }
      } catch (error) {
        if (error?.response?.status !== 500) {
          console.error('Failed to get ACP URL params:', error);
        }
      }
    },
    openWindow(url) {
      // 获取屏幕的宽度和高度
      const screenWidth = window.screen.width;
      const screenHeight = window.screen.height;

      // 设置窗口宽度为屏幕的2/3，高度为屏幕的完整高度
      const windowWidth = screenWidth * 2 / 3;
      const windowHeight = screenHeight;

      // 计算窗口的位置，使其居中显示
      const left = (screenWidth - windowWidth) / 2;
      const top = 0;

      // 设置窗口特性
      const windowFeatures = `width=${windowWidth},height=${windowHeight},left=${left},top=${top},menubar=no,toolbar=no,location=no,resizable=yes,scrollbars=yes,status=no`;

      // 打开新窗口
      window.open(url, '_blank', windowFeatures);
    },
  },
};
</script>

<style scoped lang="less">
.tools-wrap {
  .wrap {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    margin: 10px;
    display: flex;
    align-items: start;
    img {
      width: 70px;
      flex: 12% 0 0;
      border-radius: 10px;
    }
    .content {
      flex: 88% 0 0;
      padding: 00 50px;
      .title {
        font-size: 24px;
        color: #333;
        margin-bottom: 5px;
      }
      .describe {
        font-size: 14px;
        color: #333;
        min-height: 50px;
      }
      .info {
        margin: 20px 0 0;
        align-items: end;
        width: 100%;
        display: flex;
        span {
          font-size: 14px;
          color: #999;
          margin-right: 20px;
          flex: 1;
        }
        button {
          flex: 20% 0 0;
          border-radius: 0;
        }
      }
    }
  }
}
</style>