<template>
  <div class="biz-page">
    <h2 class="biz-title">支付确认（轻量）</h2>
    <p class="biz-desc">将 <code>pending</code> 订阅置为 <code>active</code>，并写入支付单号。</p>
    <Card dis-hover title="线下确认" style="max-width: 520px; margin-bottom: 16px">
      <Form :label-width="110">
        <FormItem label="订阅ID">
          <Input v-model="offline.subscription_id" type="number" placeholder="biz_subscriptions.id" />
        </FormItem>
        <FormItem label="支付单号">
          <Input v-model="offline.payment_ref" placeholder="流水号/凭证号" />
        </FormItem>
        <FormItem>
          <Button type="primary" :loading="loading1" @click="doOffline">确认线下收款</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover title="链接支付确认" style="max-width: 520px">
      <Form :label-width="110">
        <FormItem label="订阅ID">
          <Input v-model="link.subscription_id" type="number" />
        </FormItem>
        <FormItem label="第三方单号">
          <Input v-model="link.payment_ref" />
        </FormItem>
        <FormItem>
          <Button type="primary" :loading="loading2" @click="doLink">确认链接支付</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
import bizPaymentServer from '@/api/biz/biz_payment_server.js'

export default {
  name: 'BizPayment',
  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 bizPaymentServer.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 bizPaymentServer.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 scoped>
.biz-page {
  padding: 16px;
}
.biz-title {
  margin: 0 0 8px;
  font-size: 18px;
}
.biz-desc {
  color: #666;
  margin-bottom: 16px;
}
</style>
