<template>
  <view class="nfc-pay">
    <!-- NFC状态指示 -->
    <view class="nfc-status" :class="{ 'active': nfcStatus === 'ready' }">
      <image class="nfc-icon" src="/static/icons/nfc-large.png" />
      <text class="status-text">{{ statusText }}</text>
      <text class="status-desc">{{ statusDesc }}</text>
    </view>

    <!-- 支付信息 -->
    <view class="payment-info" v-if="paymentAmount > 0">
      <view class="amount-display">
        <text class="currency">￥</text>
        <text class="amount">{{ paymentAmount.toFixed(2) }}</text>
      </view>
      <text class="merchant-name">{{ merchantName }}</text>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="btn-primary" @click="enableNFC" v-if="nfcStatus === 'disabled'">
        启用NFC
      </button>
      <button class="btn-secondary" @click="switchToQR" v-if="nfcStatus === 'ready'">
        切换到扫码支付
      </button>
    </view>

    <!-- 余额显示 -->
    <view class="balance-display">
      <text class="balance-label">当前余额</text>
      <text class="balance-amount">￥{{ userBalance.toFixed(2) }}</text>
    </view>

    <!-- 最近交易 -->
    <view class="recent-transactions" v-if="recentTransactions.length > 0">
      <view class="section-title">最近交易</view>
      <view class="transaction-item" v-for="item in recentTransactions" :key="item.id">
        <view class="transaction-info">
          <text class="merchant">{{ item.merchant }}</text>
          <text class="time">{{ formatTime(item.time) }}</text>
        </view>
        <text class="amount">-￥{{ item.amount.toFixed(2) }}</text>
      </view>
    </view>

    <!-- NFC支付动画 -->
    <view class="nfc-animation" v-if="isPaymentProcessing">
      <view class="ripple"></view>
      <view class="ripple ripple-2"></view>
      <view class="ripple ripple-3"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nfcStatus: 'checking', // checking, disabled, ready, processing
      paymentAmount: 0,
      merchantName: '',
      userBalance: 156.80,
      isPaymentProcessing: false,
      recentTransactions: [
        {
          id: 1,
          merchant: '第一饭堂',
          amount: 12.50,
          time: new Date(Date.now() - 3600000)
        },
        {
          id: 2,
          merchant: '校园便利店',
          amount: 8.80,
          time: new Date(Date.now() - 7200000)
        }
      ]
    }
  },
  computed: {
    statusText() {
      const statusMap = {
        checking: '检查NFC状态...',
        disabled: 'NFC未启用',
        ready: '请将手机靠近读卡器',
        processing: '支付处理中...'
      }
      return statusMap[this.nfcStatus] || ''
    },
    statusDesc() {
      const descMap = {
        checking: '正在检测设备NFC功能',
        disabled: '请在设置中启用NFC功能',
        ready: '保持手机靠近直到支付完成',
        processing: '请勿移动手机'
      }
      return descMap[this.nfcStatus] || ''
    }
  },
  onLoad(options) {
    this.paymentAmount = parseFloat(options.amount || 0)
    this.merchantName = options.merchant || ''
    this.checkNFCStatus()
  },
  onShow() {
    this.initNFCPayment()
  },
  onHide() {
    this.stopNFCPayment()
  },
  methods: {
    checkNFCStatus() {
      // 检查NFC状态
      // #ifdef APP-PLUS
      plus.nfc.isAvailable((available) => {
        if (available) {
          plus.nfc.isEnabled((enabled) => {
            this.nfcStatus = enabled ? 'ready' : 'disabled'
          })
        } else {
          this.nfcStatus = 'disabled'
          uni.showToast({
            title: '设备不支持NFC',
            icon: 'none'
          })
        }
      })
      // #endif
      
      // #ifndef APP-PLUS
      // Web环境模拟
      setTimeout(() => {
        this.nfcStatus = 'ready'
      }, 1000)
      // #endif
    },
    enableNFC() {
      // #ifdef APP-PLUS
      plus.nfc.enable(() => {
        this.nfcStatus = 'ready'
        this.initNFCPayment()
      }, (error) => {
        uni.showToast({
          title: '启用NFC失败',
          icon: 'none'
        })
      })
      // #endif
    },
    initNFCPayment() {
      if (this.nfcStatus === 'ready') {
        // 初始化NFC支付监听
        this.startNFCListening()
      }
    },
    startNFCListening() {
      // #ifdef APP-PLUS
      plus.nfc.addEventListener('tag', this.handleNFCTag)
      // #endif
    },
    stopNFCPayment() {
      // #ifdef APP-PLUS
      plus.nfc.removeEventListener('tag', this.handleNFCTag)
      // #endif
    },
    handleNFCTag(tag) {
      if (this.paymentAmount <= 0) {
        uni.showToast({
          title: '无效的支付金额',
          icon: 'none'
        })
        return
      }
      
      this.processPayment(tag)
    },
    processPayment(tag) {
      this.isPaymentProcessing = true
      this.nfcStatus = 'processing'
      
      // 模拟支付处理
      setTimeout(() => {
        const success = Math.random() > 0.1 // 90% 成功率
        
        if (success) {
          this.userBalance -= this.paymentAmount
          this.addRecentTransaction()
          
          uni.showToast({
            title: '支付成功',
            icon: 'success'
          })
          
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: '支付失败，请重试',
            icon: 'none'
          })
          this.nfcStatus = 'ready'
        }
        
        this.isPaymentProcessing = false
      }, 2000)
    },
    addRecentTransaction() {
      this.recentTransactions.unshift({
        id: Date.now(),
        merchant: this.merchantName || '校园商户',
        amount: this.paymentAmount,
        time: new Date()
      })
      
      if (this.recentTransactions.length > 5) {
        this.recentTransactions.pop()
      }
    },
    switchToQR() {
      uni.navigateTo({
        url: `/pages/mall/nfc/student/qr-code?amount=${this.paymentAmount}&merchant=${this.merchantName}`
      })
    },
    formatTime(time) {
      const now = new Date()
      const diff = now - time
      const minutes = Math.floor(diff / 60000)
      
      if (minutes < 1) return '刚刚'
      if (minutes < 60) return `${minutes}分钟前`
      
      const hours = Math.floor(minutes / 60)
      if (hours < 24) return `${hours}小时前`
      
      return time.toLocaleDateString()
    }
  }
}
</script>

<style>
.nfc-pay {
  padding: 40rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nfc-status {
  background: white;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  margin-bottom: 40rpx;
  text-align: center;
  width: 100%;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.nfc-status.active {
  background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
  color: white;
}

.nfc-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
}

.status-text {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.status-desc {
  display: block;
  font-size: 24rpx;
  opacity: 0.8;
}

.payment-info {
  background: white;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  text-align: center;
  width: 100%;
}

.amount-display {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-bottom: 20rpx;
}

.currency {
  font-size: 36rpx;
  color: #333;
  margin-right: 8rpx;
}

.amount {
  font-size: 72rpx;
  font-weight: bold;
  color: #007AFF;
}

.merchant-name {
  font-size: 28rpx;
  color: #666;
}

.action-buttons {
  width: 100%;
  margin-bottom: 30rpx;
}

.btn-primary, .btn-secondary {
  width: 100%;
  padding: 24rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  border: none;
  margin-bottom: 20rpx;
}

.btn-primary {
  background: #007AFF;
  color: white;
}

.btn-secondary {
  background: white;
  color: #007AFF;
  border: 2rpx solid #007AFF;
}

.balance-display {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.balance-label {
  font-size: 28rpx;
  color: #666;
}

.balance-amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #28a745;
}

.recent-transactions {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  width: 100%;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.transaction-item:last-child {
  border-bottom: none;
}

.transaction-info {
  display: flex;
  flex-direction: column;
}

.merchant {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.time {
  font-size: 24rpx;
  color: #999;
}

.transaction-item .amount {
  font-size: 28rpx;
  color: #ff3b30;
  font-weight: bold;
}

.nfc-animation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200rpx;
  height: 200rpx;
}

.ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4rpx solid #007AFF;
  animation: ripple 2s infinite;
}

.ripple-2 {
  animation-delay: 0.5s;
}

.ripple-3 {
  animation-delay: 1s;
}

@keyframes ripple {
  0% {
    transform: scale(0.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
</style>
