<template>
  <div class="sub-page pay-page">
    <header class="page-header">
      <div class="page-header__text">
        <h1 class="page-header__title">支付确认</h1>
        <p class="page-header__desc">
          将 <code class="inline-code">pending</code> 订阅置为 <code class="inline-code">active</code>，并写入支付单号。
        </p>
      </div>
    </header>

    <Row :gutter="32" class="pay-row">
      <Col :xs="24" :lg="12">
        <Card :bordered="false" class="pay-panel pay-panel--offline">
          <p slot="title" class="pay-panel__title">
            <span class="pay-panel__badge pay-panel__badge--offline">线下</span>
            <Icon type="md-cash" class="pay-panel__title-icon" />
            确认收款
          </p>
          <Form :label-width="96" class="pay-form">
            <FormItem label="订阅 ID">
              <Input v-model="offline.subscription_id" type="number" placeholder="订阅记录 id" size="large" />
            </FormItem>
            <FormItem label="支付单号">
              <Input v-model="offline.payment_ref" placeholder="流水号 / 凭证号" size="large" />
            </FormItem>
            <FormItem>
              <Button type="primary" size="large" :loading="loading1" @click="doOffline">
                <Icon type="md-checkmark" /> 确认线下收款
              </Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
      <Col :xs="24" :lg="12">
        <Card :bordered="false" class="pay-panel pay-panel--link">
          <p slot="title" class="pay-panel__title">
            <span class="pay-panel__badge pay-panel__badge--link">链接</span>
            <Icon type="md-link" class="pay-panel__title-icon" />
            第三方单号确认
          </p>
          <Form :label-width="96" class="pay-form">
            <FormItem label="订阅 ID">
              <Input v-model="link.subscription_id" type="number" placeholder="订阅记录 id" size="large" />
            </FormItem>
            <FormItem label="第三方单号">
              <Input v-model="link.payment_ref" placeholder="支付平台回传单号" size="large" />
            </FormItem>
            <FormItem>
              <Button type="success" size="large" :loading="loading2" @click="doLink">
                <Icon type="md-checkmark" /> 确认链接支付
              </Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>

    <div class="pay-doc">
      <Icon type="md-information-circle" class="pay-doc__icon" />
      <div class="pay-doc__body">
        <p class="pay-doc__lead">对外鉴权（免登录，见白名单）</p>
        <p class="pay-doc__line">
          <code class="block-code">POST /api/auth/verify</code>
        </p>
        <p class="pay-doc__hint">body 示例：</p>
        <pre class="pay-doc__pre">{"token":"明文","feature":"msg","usage_delta":{"msg":1}}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import paymentServer from '@/api/subscription/payment_server.js'

export default {
  name: 'SubscriptionPayment',
  data() {
    return {
      offline: { subscription_id: '', payment_ref: '' },
      link: { subscription_id: '', payment_ref: '' },
      loading1: false,
      loading2: false,
    }
  },
  methods: {
    async doOffline() {
      this.loading1 = true
      try {
        const res = await paymentServer.confirmOffline({
          subscription_id: Number(this.offline.subscription_id),
          payment_ref: this.offline.payment_ref,
        })
        if (res && res.code === 0) {
          this.$Message.success('已确认，订阅已激活')
        } else {
          this.$Message.error((res && res.message) || '失败')
        }
      } finally {
        this.loading1 = false
      }
    },
    async doLink() {
      this.loading2 = true
      try {
        const res = await paymentServer.confirmLink({
          subscription_id: Number(this.link.subscription_id),
          payment_ref: this.link.payment_ref,
        })
        if (res && res.code === 0) {
          this.$Message.success('已确认，订阅已激活')
        } else {
          this.$Message.error((res && res.message) || '失败')
        }
      } finally {
        this.loading2 = false
      }
    },
  },
}
</script>

<style lang="less" scoped>
@sub-text: #17233d;
@sub-text-secondary: #515a6e;
@sub-muted: #808695;
@sub-border: #e8eaec;
@sub-error: #ed4014;

.pay-page {
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 28px 40px 44px;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid @sub-border;

  &__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: @sub-text;
  }

  &__desc {
    margin: 0;
    font-size: 13px;
    color: @sub-text-secondary;
    line-height: 1.65;
  }
}

.inline-code {
  padding: 1px 6px;
  font-size: 12px;
  font-family: Consolas, 'SF Mono', Menlo, monospace;
  color: #c41d7f;
  background: #fff0f6;
  border: 1px solid #ffadd2;
  border-radius: 4px;
}

/* 数字 gutter 才会稳定产生列左右 padding，两卡并排中间才有缝；小屏换行保留下间距 */
.pay-row {
  :deep(.ivu-col) {
    margin-bottom: 20px;
  }
}

.pay-panel {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(23, 35, 61, 0.07);
  transition: box-shadow 0.2s ease;

  &:hover {
    box-shadow: 0 8px 24px rgba(23, 35, 61, 0.1);
  }

  &--offline {
    :deep(.ivu-card-head) {
      background: linear-gradient(135deg, #f6fbff 0%, #fff 48%);
      border-bottom: 1px solid #e8f4ff;
    }
  }

  &--link {
    :deep(.ivu-card-head) {
      background: linear-gradient(135deg, #f6fffb 0%, #fff 48%);
      border-bottom: 1px solid #e6ffee;
    }

    .pay-panel__title-icon {
      color: #19be6b;
    }
  }

  &__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: @sub-text;
  }

  &__title-icon {
    font-size: 18px;
    color: #2d8cf0;
  }

  &__badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 4px;
    margin-right: 4px;

    &--offline {
      color: #2d8cf0;
      background: rgba(45, 140, 240, 0.12);
    }

    &--link {
      color: #19be6b;
      background: rgba(25, 190, 107, 0.14);
    }
  }
}

.pay-form {
  :deep(.ivu-form-item) {
    margin-bottom: 20px;
  }

  :deep(.ivu-btn .ivu-icon) {
    margin-right: 4px;
  }
}

.pay-doc {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  background: #f8f9fc;
  border: 1px solid @sub-border;
  border-radius: 10px;

  &__icon {
    flex-shrink: 0;
    font-size: 22px;
    color: #2d8cf0;
    margin-top: 2px;
  }

  &__body {
    min-width: 0;
    flex: 1;
  }

  &__lead {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: @sub-text-secondary;
  }

  &__line {
    margin: 0 0 8px;
  }

  &__hint {
    margin: 0 0 6px;
    font-size: 12px;
    color: @sub-muted;
  }

  &__pre {
    margin: 0;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.5;
    color: @sub-text-secondary;
    background: #fff;
    border: 1px solid @sub-border;
    border-radius: 8px;
    overflow-x: auto;
    font-family: Consolas, 'SF Mono', Menlo, monospace;
  }
}

.block-code {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-family: Consolas, 'SF Mono', Menlo, monospace;
  color: #c41d7f;
  background: #fff;
  border: 1px solid @sub-border;
  border-radius: 6px;
}
</style>
