<template>
  <div class="weapp-pay-bridge-page">
    <div class="hero-card">
      <div class="eyebrow">WebView 支付测试</div>
      <h1 class="title">从 H5 跳转到小程序支付测试页</h1>
      <p class="desc">
        这个页面用于在小程序 WebView 中点击按钮后，直接跳到外层小程序的支付测试页，并自动尝试拉起微信支付弹框。
      </p>
    </div>

    <div class="panel">
      <div class="panel-head">
        <span class="panel-title">当前环境</span>
        <span :class="['env-tag', isMiniProgramWebView ? 'env-ok' : 'env-warn']">
          {{ isMiniProgramWebView ? '小程序 WebView 内' : '普通浏览器' }}
        </span>
      </div>
      <p class="hint">只有在小程序 WebView 中，点击下方按钮才会真正调用外层小程序页面。</p>
    </div>

    <div class="panel">
      <div class="panel-head">
        <span class="panel-title">支付参数</span>
      </div>
      <label class="field-label" for="orderId">测试订单 ID</label>
      <input
        id="orderId"
        v-model.trim="orderId"
        class="field-input"
        type="text"
        placeholder="请输入后端可生成支付参数的 order_id"
      />
      <p class="hint">建议使用未支付且可以正常返回支付参数的测试订单。</p>
      <div class="path-box">
        <div class="path-label">发给小程序 WebView 容器的消息</div>
        <div class="path-value">{{ payMessagePreview }}</div>
      </div>
      <button class="primary-btn" @click="sendPayMessage">点击触发小程序支付测试</button>
    </div>

    <div class="panel">
      <div class="panel-head">
        <span class="panel-title">最近结果</span>
      </div>
      <div class="result-text">{{ resultText }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { showToast } from 'vant';
import wx from 'weixin-js-sdk';

const orderId = ref('');
const resultText = ref('等待开始测试');

const isMiniProgramWebView = computed(() => {
  return navigator.userAgent.includes('miniProgram');
});

const payMessagePreview = computed(() => {
  return JSON.stringify({
    type: 'pay_test',
    order_id: orderId.value || '',
    source: 'weapp-pay-bridge',
  });
});

const ensureOrderId = () => {
  if (orderId.value) return true;

  showToast('请先输入订单 ID');
  resultText.value = '未填写订单 ID，无法继续触发支付测试。';
  return false;
};

const sendPayMessage = () => {
  if (!ensureOrderId()) return;

  if (!isMiniProgramWebView.value) {
    resultText.value = '当前不是小程序 WebView 环境，postMessage 不会发给小程序。';
    showToast('请在小程序 WebView 中打开此页');
    return;
  }

  try {
    wx.miniProgram.postMessage({
      data: {
        type: 'pay_test',
        order_id: orderId.value,
        source: 'weapp-pay-bridge',
      },
    });
    resultText.value = '已发送支付请求消息给当前小程序 WebView 容器。';
  } catch (error) {
    const message = error?.message || '发送 postMessage 失败';
    resultText.value = message;
    showToast(message);
  }
};
</script>

<style scoped lang="less">
.weapp-pay-bridge-page {
  height: 100vh;
  padding: 24px 18px 40px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(circle at top left, rgba(84, 171, 174, 0.18), transparent 28%),
    linear-gradient(180deg, #f7fbfb 0%, #eef4f6 100%);
  color: #16323a;
}

.hero-card,
.panel {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(22, 50, 58, 0.08);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(22, 50, 58, 0.08);
  padding: 22px 18px;
  box-sizing: border-box;
}

.hero-card {
  margin-bottom: 16px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e0f2f1;
  color: #0f766e;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.title {
  margin: 14px 0 0;
  font-size: 28px;
  line-height: 1.25;
}

.desc,
.hint,
.result-text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #4f6470;
}

.panel {
  margin-bottom: 16px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-title {
  font-size: 18px;
  font-weight: 700;
  color: #16323a;
}

.env-tag {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.env-ok {
  color: #166534;
  background: #dcfce7;
}

.env-warn {
  color: #9a3412;
  background: #ffedd5;
}

.field-label {
  display: block;
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #36505b;
}

.field-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #cfd8dc;
  border-radius: 14px;
  box-sizing: border-box;
  background: #f9fbfb;
  font-size: 15px;
  color: #16323a;
}

.path-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #f2f7f8;
  border: 1px dashed #b6c8cf;
}

.path-label {
  font-size: 12px;
  color: #68808a;
}

.path-value {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-all;
  color: #16323a;
}

.primary-btn,
.ghost-btn {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.primary-btn {
  margin-top: 16px;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #155e75);
}

.ghost-btn {
  margin-top: 10px;
  color: #155e75;
  background: #e6f4f1;
}
</style>