<template>
  <view class="container">
    <!-- 订单信息 -->
    <view class="card info-card">
      <view class="info-row">
        <text class="info-label">订单号</text>
        <text class="info-value">{{ form.tradeNo || '-' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">缴费单位</text>
        <text class="info-value">{{ form.orderName || '-' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">订单金额</text>
        <text class="info-value highlight">￥{{ form.price || '0.00' }}</text>
      </view>
    </view>

    <!-- 转账提示 -->
    <view class="transfer-tip">
      请通过网上银行（网银）或银行柜台或手机银行
    </view>

    <!-- 转账信息卡片 -->
    <view class="card bank-card">
      <view class="card-title">转账信息</view>
      <view class="bank-row">
        <text class="bank-label">收款人姓名</text>
        <text class="bank-value">秦琦五洋赫公司</text>
        <text class="copy-btn" @click="handelCoPy('秦琦五洋赫公司')">复制</text>
      </view>
      <view class="bank-row">
        <text class="bank-label">收款银行</text>
        <text class="bank-value">中国民生银行</text>
        <text class="copy-btn" @click="handelCoPy('中国民生银行')">复制</text>
      </view>
      <view class="bank-row">
        <text class="bank-label">收款卡号</text>
        <text class="bank-value card-number">{{ form.ziZhangBu || '-' }}</text>
        <text class="copy-btn" @click="handelCoPy(form.ziZhangBu)">复制</text>
      </view>
      <view class="bank-row">
        <text class="bank-label">收款金额</text>
        <text class="bank-value highlight">￥{{ form.price || '0.00' }}</text>
        <text class="copy-btn" @click="handelCoPy(form.price)">复制</text>
      </view>
    </view>

    <!-- 金额说明 -->
    <view class="card notice-card">
      <view class="notice-line">1. 请通过网上银行（网银）或银行柜台或手机银行向以下账号划转款项。</view>
      <view class="notice-line">2. 转账金额与订单金额必须保持一致，不得多转、少转。</view>
    </view>

    <!-- 温馨提示 -->
    <view class="card warning-card">
      <view class="warning-title">
        <text class="warning-icon">!</text>
        <text>温馨提示</text>
      </view>
      <view class="warning-content">
        <view class="warning-line">1. 转账时请务必核对账户余额，否则造成的资金损失由您自行承担。</view>
        <view class="warning-line">2. 转账成功后请及时查询交易状态。</view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottomBtn">
      <button class="cancelBtn" @click="handelClose">取 消</button>
      <button class="confirmBtn" @click="handelClose">确 定</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import * as api from '@/common/api.js'

const form = ref({
  tradeNo: '',
  orderName: '',
  price: '',
  ziZhangBu: ''
})
const orderId = ref('')

onLoad((option) => {
  orderId.value = option.orderId || ''
  getOrderDetail()
})

async function getOrderDetail() {
  if (!orderId.value) return
  uni.showLoading({ title: '加载中...' })
  try {
    const res = await api.orderDetail(orderId.value)
    if (res.data) {
      form.value = res.data
    }
  } catch (e) {
    console.error('获取订单详情失败', e)
  } finally {
    uni.hideLoading()
  }
}

function handelCoPy(text) {
    if (!text || text === '-') {
    uni.showToast({ title: '暂无内容可复制', icon: 'none' })
    return
  }
  uni.setClipboardData({
    data: String(text),
    success: () => {
      uni.showToast({ title: '复制成功', icon: 'success' })
    },
    fail: () => {
      uni.showToast({ title: '复制失败', icon: 'none' })
    }
  })
}

function handelClose() {
  uni.navigateBack({
    delta: 2
  })
}
</script>

<style lang="scss" scoped>
.hidden-input {
  position: fixed;
  left: -9999px;
  opacity: 0;
}

.container {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 20rpx 20rpx 120rpx;
}

/* 订单信息卡片 */
.info-card {
  background: #fff;
  border-radius: 8rpx;
  padding: 25rpx 20rpx;
  margin-bottom: 20rpx;

  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

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

    .info-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }

    .highlight {
      color: #FF8124;
      font-weight: 600;
    }
  }
}

/* 转账提示 */
.transfer-tip {
  background-color: #E8F4FF;
  color: #409EFF;
  padding: 20rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: center;
  font-weight: 500;
  margin-bottom: 20rpx;
}

/* 银行卡信息 */
.bank-card {
  background: #fff;
  border-radius: 8rpx;
  padding: 25rpx 20rpx;
  margin-bottom: 20rpx;

  .card-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #e4e7ed;
  }

  .bank-row {
    display: flex;
    align-items: center;
    padding: 16rpx 0;
    font-size: 28rpx;

    .bank-label {
      color: #666;
      width: 160rpx;
      flex-shrink: 0;
    }

    .bank-value {
      flex: 1;
      color: #333;
      font-weight: 500;

      &.card-number {
        font-family: monospace;
        letter-spacing: 2rpx;
      }

      &.highlight {
        color: #FF8124;
      }
    }

    .copy-btn {
      color: #007AFF;
      font-size: 26rpx;
      padding: 8rpx 16rpx;
    }
  }
}

/* 金额说明 */
.notice-card {
  background: #FEF0F0;
  border-radius: 8rpx;
  padding: 25rpx 20rpx;
  margin-bottom: 20rpx;

  .notice-line {
    font-size: 26rpx;
    color: #F56C6C;
    line-height: 1.6;
    margin-bottom: 8rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

/* 温馨提示 */
.warning-card {
  background: #FDF6EC;
  border-radius: 8rpx;
  padding: 25rpx 20rpx;

  .warning-title {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #E6A23C;
    font-weight: 600;
    margin-bottom: 16rpx;

    .warning-icon {
      width: 36rpx;
      height: 36rpx;
      background: #E6A23C;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      margin-right: 10rpx;
    }
  }

  .warning-content {
    .warning-line {
      font-size: 26rpx;
      color: #E6A23C;
      line-height: 1.6;
      margin-bottom: 8rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

/* 底部按钮 */
.bottomBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 20rpx;
  padding: 20rpx 30rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
}

.cancelBtn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  background: #f5f5f5;
  color: #666;
  border-radius: 44rpx;
  font-size: 32rpx;
  border: none;
}

.confirmBtn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  background: #C4121B;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  border: none;
}
</style>