<template>
  <view class="pay-confirm-page">
    <view class="hero-panel">
      <text class="page-title">常住随用</text>

      <view class="amount-card">
        <text class="amount-label">支付金额：</text>
        <view class="amount-value-group">
          <text class="amount-value">{{ display_amount }}</text>
          <text v-if="has_amount" class="amount-unit">元</text>
        </view>
      </view>

      <text class="blessing-text">感恩随喜~</text>
    </view>

    <view class="footer-area">
      <text v-if="status_text" class="status-text">{{ status_text }}</text>

      <button
        class="pay-button"
        hover-class="pay-button-hover"
        :loading="pay_loading"
        :disabled="!order_id || pay_loading"
        @tap="handlePay"
      >
        立即支付
      </button>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useLoad } from '@tarojs/taro'
import { useWechatMiniPay } from '@/composables/useWechatMiniPay'

const order_id = ref('')
const amount = ref('')
const status_text = ref('')

const {
  pay_loading,
  last_result_text,
  pay_by_order_id,
} = useWechatMiniPay()

const display_amount = computed(() => {
  const normalized_amount = String(amount.value || '').trim().replace(/元$/, '').trim()
  return normalized_amount || '--'
})

const has_amount = computed(() => display_amount.value !== '--')

watch(last_result_text, (value) => {
  if (!pay_loading.value) {
    status_text.value = value
  }
})

const handlePay = async () => {
  if (!order_id.value || pay_loading.value) return

  status_text.value = ''

  await pay_by_order_id(order_id.value, {
    auto_auth: true,
    on_status: (text) => {
      status_text.value = text
    },
  })
}

useLoad((options) => {
  order_id.value = String(options?.order_id || '').trim()
  amount.value = String(options?.amount || options?.money || '').trim()

  if (!order_id.value) {
    status_text.value = '缺少订单编号，暂时无法发起支付。'
  }
})
</script>

<style lang="less">
.pay-confirm-page {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0 0 calc(72rpx + env(safe-area-inset-bottom));
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-panel {
  min-height: 612rpx;
  padding: 132rpx 48rpx 88rpx;
  box-sizing: border-box;
  background: url('https://cdn.ipadbiz.cn/jls_weapp/images/bgg@2x.png') center top / 100% 100% no-repeat;
}

.page-title {
  display: block;
  text-align: center;
  font-size: 55rpx;
  line-height: 1.2;
  font-weight: 600;
  color: #2f3133;
}

.amount-card {
  margin-top: 84rpx;
  width: 100%;
  min-height: 145rpx;
  padding: 0 40rpx;
  box-sizing: border-box;
  background: url('https://cdn.ipadbiz.cn/jls_weapp/images/money_bg@2x.png') center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rpx;
}

.amount-label {
  flex-shrink: 0;
  font-size: 30rpx;
  color: #353535;
}

.amount-value-group {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  color: #252525;
}

.amount-value {
  max-width: 100%;
  font-size: 72rpx;
  line-height: 1;
  font-weight: 500;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amount-unit {
  margin-left: 14rpx;
  font-size: 30rpx;
  line-height: 1;
}

.blessing-text {
  display: block;
  margin-top: 72rpx;
  text-align: center;
  font-size: 32rpx;
  line-height: 1.4;
  color: #3a3a3a;
}

.footer-area {
  padding: 0 84rpx;
  box-sizing: border-box;
}

.status-text {
  display: block;
  margin-bottom: 28rpx;
  text-align: center;
  font-size: 22rpx;
  line-height: 1.7;
  color: #8a6b45;
}

.pay-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 34rpx;
  font-weight: 500;
  color: #fff6eb;
  background: url('https://cdn.ipadbiz.cn/jls_weapp/images/btnn@2x.png') center / 100% 100% no-repeat;

  &::after {
    border: 0;
  }

  &[disabled] {
    opacity: 0.72;
    color: #fff6eb;
    background: url('https://cdn.ipadbiz.cn/jls_weapp/images/btnn@2x.png') center / 100% 100% no-repeat;
  }
}

.pay-button-hover {
  opacity: 0.92;
}
</style>