<template>
  <div class="checkout-page">

    <div class="summary-panel">
      <div class="summary-content">
        <div class="back-button-placeholder">
          <button class="back-btn" @click="goBack">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
          </button>
        </div>

        <h1 class="panel-title">订阅 金银湖大模型 Pro</h1>
        <div class="trial-info">
          <span class="trial-days">US$60.00</span>
          <p class="trial-note">每个月</p>
        </div>

        <div class="plan-card">
          <div class="card-details">
            <div class="card-header">
              <span class="card-title">金银湖大模型 Pro</span>
              <span class="card-tag">7 天免费</span>
            </div>
            <div class="card-features">
              金银湖大模型 Pro unlocks unlimited tab completion, extended agent limits, and access to most features.
            </div>
            <div class="card-price">US$20.00 / 月度</div>
          </div>
        </div>

        <div class="toggle-row">
          <span class="toggle-label">采用年费计划</span>
          <div class="toggle-switch">
            <input type="checkbox" id="annual" v-model="isAnnual">
            <label for="annual"></label>
          </div>
          <span class="toggle-discount">节省 US$4.00</span>
        </div>

        <div class="spacer"></div>

        <div class="price-detail">
          <div class="detail-row">
            <span>小计</span>
            <span>US$20.00</span>
          </div>
          <div class="detail-row">
            <span>税 <i class="icon-info"></i></span>
            <span>US$0.00</span>
          </div>
          <div class="detail-row total-row">
            <span>试用后总额</span>
            <span>US$20.00</span>
          </div>
          <div class="detail-row today-total">
            <span>今日合计</span>
            <span>US$0.00</span>
          </div>
        </div>
      </div>
    </div>

    <div class="form-panel">
      <h2 class="form-title">输入付款详情</h2>

      <div class="form-group email-group">
        <label>邮箱</label>
        <d-input
          size="lg"
          placeholder="fukang10032@gmail.com"
          v-model="formData.email"
          class="email-input-custom"
        ></d-input>
      </div>

      <div class="form-group payment-group">
        <label>支付方式</label>

        <div class="payment-option">
          <d-radio name="payment" value="card" v-model="formData.paymentMethod">
            <img class="wechart-icon" src="@/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg">
            <span class="radio-label">银行卡</span>
          </d-radio>
<!--          <div v-if="formData.paymentMethod === 'card'" class="card-input-placeholder">-->
<!--            [Card Element Input Placeholder]-->
<!--          </div>-->
        </div>

        <div class="payment-option">
          <d-radio name="payment" value="wechat" v-model="formData.paymentMethod">
            <img class="wechart-icon" src="@/assets/v3/NTI4MWU5.ico">
            <span class="radio-label">微信支付</span>
          </d-radio>
        </div>

        <div class="payment-option">
          <d-radio name="payment" value="alipay" v-model="formData.paymentMethod">
            <img class="alipay-icon" src="@/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg">
            <span class="radio-label">支付宝</span>
          </d-radio>
        </div>

      </div>

      <div class="save-info-text">
        保存您的信息，以便更快地在 金银湖大模型 和支持 Stripe 的地方安全地支付。
      </div>

      <d-button class="start-trial-btn" @click="startTrial">订阅</d-button>

      <p class="terms-text">
        订阅即表示您同意 金银湖大模型 服务条款，并且理解您的订阅将自动续订，直到您在 Stripe 客户门户上取消。
      </p>
      <div class="powered-by">
        Powered by <span class="stripe-link">stripe</span> | 条款 | 隐私
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {useRouter} from "vue-router";
const router = useRouter();
const formData = ref({
  email: 'fukang10032@gmail.com',
  paymentMethod: 'card', // 默认选中银行卡
});

const isAnnual = ref(false); // 控制年费月费切换

const startTrial = () => {
  alert('订阅按钮被点击！');
};

const goBack = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.checkout-page {
  display: flex;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}

.summary-panel {
  flex: 1.1;
  background-color: #000;
  color: #fff;
  padding: 0 40px;
  display: flex;
  justify-content: flex-end;
}

.summary-content {
  width: 100%;
  max-width: 600px;
  padding: 60px 0;
}

.form-panel {
  flex: 1;
  background-color: #fff;
  color: #333;
  padding: 60px 40px;
}

/* ------------------- 左侧摘要样式 ------------------- */
/* 优化点 3: 返回按钮样式 */
.back-button-placeholder {
  margin-bottom: 50px;
}
.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #fff;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.back-btn:hover {
  opacity: 1;
}


.panel-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 5px;
}

.trial-info {
  margin-bottom: 50px;
}

.trial-days {
  font-size: 44px;
  font-weight: 700;
  display: block;
}

.trial-note {
  font-size: 14px;
  color: #777;
  margin-top: 5px;
}

/* 计划卡片 */
.plan-card {
  background-color: #1e1e1e;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  position: relative;
  margin-bottom: 30px;
  border: 1px solid #333;
}

.card-details {
  flex-grow: 1;
  padding: 4px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.card-title {
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}

.card-features {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  margin-bottom: 8px;
}

.card-price {
  font-size: 12px;
  color: #aaa;
  font-weight: 500;
}

.card-tag {
  background-color: transparent;
  color: #4CAF50;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 0;
}

/* 年月切换 */
.toggle-row {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  background-color: #111;
  border-radius: 4px;
  padding: 8px 12px;
  justify-content: space-between;
}

.toggle-label {
  font-size: 14px;
  color: #ccc;
  font-weight: 500;
}

.toggle-discount {
  font-size: 12px;
  color: #4CAF50;
  font-weight: 500;
}

/* 简化开关样式 (Toggle Switch) */
.toggle-switch {
  margin: 0 15px;
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}
.toggle-switch input[type="checkbox"] {
  display: none;
}
.toggle-switch label {
  cursor: pointer;
  width: 40px;
  height: 20px;
  background-color: #444;
  border-radius: 10px;
  position: relative;
  display: block;
  transition: background-color 0.3s;
}
.toggle-switch label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: #ccc;
  border-radius: 50%;
  transition: 0.3s;
}
.toggle-switch input:checked + label {
  background-color: #58a6ff;
}
.toggle-switch input:checked + label:after {
  left: calc(100% - 18px);
  background-color: white;
}

.spacer {
  border-top: 1px solid #333;
  margin: 20px 0;
}

/* 价格明细 */
.price-detail {
  font-size: 14px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #aaa;
}

.detail-row span:last-child {
  font-weight: 500;
  color: #fff;
}

.detail-row.total-row {
  border-top: 1px solid #333;
  padding-top: 20px;
  margin-top: 15px;
  color: #fff;
}

.detail-row.today-total {
  font-size: 16px;
  font-weight: 700;
  color: #4CAF50;
}
.detail-row.today-total span:last-child {
  color: #4CAF50;
}


/* ------------------- 右侧表单样式 ------------------- */
.form-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 40px;
  color: #333;
}

.form-group {
  margin-bottom: 30px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

/* 优化点 1: 邮箱输入框美化 (参考 image_15239f.png) */
.email-input-custom :deep(.devui-input-wrapper) {
  border: 1px solid #ddd;
  border-radius: 4px; /* 略微减少圆角，更符合 image_15239f.png */
  transition: border-color 0.2s, box-shadow 0.2s;
}

.email-input-custom :deep(.devui-input-wrapper.focus) {
  border-color: #58a6ff;
  box-shadow: 0 0 0 1px #58a6ff; /* 增加细微的聚焦阴影 */
}

.email-input-custom :deep(.devui-input) {
  padding: 10px 12px;
  font-size: 14px;
  height: auto;
}

/* 支付方式 */
.payment-group {
  margin-bottom: 40px;
}
.payment-group label {
  margin-bottom: 12px;
}

/* 支付选项容器 */
.payment-option {
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 15px;
  /* 确保 Radio 按钮在未选中的 payment-option 中也能看到 */
}
.payment-option:hover {
  border-color: #ccc;
}

/* DevUI Radio 样式定制 */
.payment-option :deep(.devui-radio-list) {
  display: block;
}
.payment-option :deep(.devui-radio) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.payment-option :deep(.devui-radio-input) {
  width: 16px;
  height: 16px;
  border: 1px solid #999;
}
.payment-option :deep(.devui-radio-input.checked) {
  background-color: #000;
  border-color: #000;
}

.payment-option :deep(.devui-radio-label) {
  flex-grow: 1;
  font-size: 14px;
  font-weight: 500;
  padding-left: 10px;
}

/* 银行卡图标组 */
.card-icons {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* 银行卡具体颜色 */
.visa-icon { background-color: #1a1f71; content: "V"; }
.master-icon { background-color: #ff5f00; content: "M"; }
.amex-icon { background-color: #007bc1; content: "A"; }

.card-input-placeholder {
  height: 44px;
  background-color: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 4px;
  margin: 15px 0 0 0;
  display: flex;
  align-items: center;
  padding-left: 15px;
  font-size: 14px;
  color: #999;
}

/* 底部文本和按钮 */
.save-info-text {
  font-size: 12px;
  color: #666;
  margin-bottom: 25px;
}

.start-trial-btn {
  width: 100%;
  height: 48px;
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  border: none !important;
}

.terms-text {
  font-size: 10px;
  color: #888;
  text-align: center;
  line-height: 1.4;
  max-width: 400px;
  margin: 0 auto 15px;
}

.powered-by {
  font-size: 10px;
  color: #aaa;
  text-align: center;
}

.stripe-link {
  font-weight: bold;
  color: #666;
}

::v-deep(.devui-radio__label) {
  display: flex;
  align-items: center;
  margin-left: 16px;
  img {
    height: 16px;
    text-align: center;
    width: 24px;
    margin-inline-end:8px;
    border-radius: 2px;
    max-width: 24px;
  }
  .wechart-icon {
    width: 16px;
    margin-right: 12px;
  }
}
</style>
