<script setup lang="ts">
import type { PaymentPayWay } from '@/features/orders/api/orders'

defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  'update:show': [value: boolean]
  choose: [payWay: PaymentPayWay]
  closed: []
}>()
</script>

<template>
  <van-popup
    :show="show"
    position="bottom"
    round
    class="mobile-payway-popup"
    @update:show="emit('update:show', $event)"
    @closed="emit('closed')"
  >
    <header class="payway-header">
      <span>选择支付方式</span>
      <button type="button" aria-label="关闭" @click="emit('update:show', false)">
        <van-icon name="cross" :size="20" />
      </button>
    </header>
    <p class="payway-tip">选择渠道后将生成对应的支付二维码</p>
    <div class="payway-options">
      <button type="button" class="payway-option wechat" @click="emit('choose', 'WXZF')">
        <span class="payway-icon">
          <van-icon name="wechat-pay" :size="28" />
        </span>
        <span class="payway-text">
          <strong>微信支付</strong>
          <small>使用微信扫码完成支付</small>
        </span>
        <van-icon name="arrow" class="payway-arrow" :size="16" />
      </button>
      <button type="button" class="payway-option alipay" @click="emit('choose', 'ZFBZF')">
        <span class="payway-icon">
          <van-icon name="alipay" :size="28" />
        </span>
        <span class="payway-text">
          <strong>支付宝支付</strong>
          <small>使用支付宝扫码完成支付</small>
        </span>
        <van-icon name="arrow" class="payway-arrow" :size="16" />
      </button>
    </div>
  </van-popup>
</template>

<style scoped>
.mobile-payway-popup {
  overflow: hidden;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  background: #fff;
}

.payway-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}

.payway-header span {
  color: #111827;
  font-size: 16px;
  font-weight: 800;
}

.payway-header button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 18px;
  background: #f8fafc;
  color: #64748b;
}

.payway-tip {
  margin: 0 18px 14px;
  color: #94a3b8;
  font-size: 13px;
}

.payway-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 18px;
}

.payway-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid #eef0f3;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease;
}

.payway-option:active {
  background: #f9fafb;
}

.payway-option.wechat:active {
  border-color: #07c160;
}

.payway-option.alipay:active {
  border-color: #1677ff;
}

.payway-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #fff;
  flex-shrink: 0;
}

.payway-option.wechat .payway-icon {
  background: #07c160;
}

.payway-option.alipay .payway-icon {
  background: #1677ff;
}

.payway-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.payway-text strong {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}

.payway-text small {
  font-size: 12px;
  color: #94a3b8;
}

.payway-arrow {
  color: #cbd5e1;
}
</style>
