<template>
  <view>
    <!-- 天医币支付 -->
    <view class="payment-item">
      <view class="payment-left">
        <image src="/static/icon/pay_3.png" class="payment-icon" />
        <text class="">{{ $t('global.coin') }}</text>
        <text class="text-[#7dc1f0]">
          ({{ $t('order.balance') }}：{{ peanutCoin || 0 }})
        </text>
      </view>
    </view>

    <!-- 支付说明 -->
    <view class="payment-tips">
      <view class="tips-header">
        <wd-icon name="error-circle" color="#7dc1f0" size="20" />
        <text>{{ $t('order.ensureBalance') }}</text>
        <text class="recharge-btn" @click="goToRecharge">
          {{ $t('order.recharge') }}
        </text>
      </view>
      
      <view class="tips-content">
        <view class="tip-title">{{ $t('order.paymentTipTitle') }}</view>
        <view class="tip-item">{{ $t('order.paymentTip1') }}</view>
        <view class="tip-item">
          {{ $t('order.paymentTip2-1') }}
          <text class="link-text" @click="copyToClipboard('yilujiankangkefu')">yilujiankangkefu</text>
          {{ $t('order.paymentTip2-2') }}
          <text class="link-text" @click="copyToClipboard('AmazingLimited@163.com')">
            AmazingLimited@163.com
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { makePhoneCall, copyToClipboard } from '@/utils/index'

const props = defineProps({
  peanutCoin: {
    type: Number,
    default: 0
  }
})

/**
 * 跳转到充值页面
 */
const goToRecharge = () => {
  uni.navigateTo({
    url: '/pages/user/recharge/index'
  })
}
</script>

<style lang="scss" scoped>
.payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  
  .payment-left {
    display: flex;
    align-items: center;
    gap: 10rpx;
    font-size: 28rpx;
    font-weight: bold;
    
    .payment-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.payment-tips {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f7f8f9;
  border-radius: 10rpx;
  
  .tips-header {
    display: flex;
    align-items: center;
    gap: 10rpx;
    margin-bottom: 12rpx;
    font-size: 28rpx;
    color: #333;
    
    .recharge-btn {
      margin-left: auto;
      padding: 4rpx 14rpx;
      background-color: #7dc1f0;
      color: #fff;
      font-size: 24rpx;
      border-radius: 10rpx;
    }
  }
  
  .tips-content {
    font-size: 28rpx;
    color: #5a5a5a;
    line-height: 1.6;
    
    .tip-title {
      font-weight: 500;
      margin-bottom: 10rpx;
    }
    
    .tip-item {
      margin-bottom: 10rpx;
      word-wrap: break-word;
      word-break: break-all;
    }
    
    .link-text {
      color: #7dc1f0;
      text-decoration: underline;
    }
  }
}
</style>