<template>
    <view class="container" style="paddingBottom:1rpx;">
      <u-navbar
			leftIconSize="40rpx"
			leftIconColor="#ffffff"
			title="POS机刷卡记账详情"
			:bgColor="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
			titleStyle="color: #ffffff; font-weight: 600;"
		>
		</u-navbar>
      <view class="section">
        <view class="header-card">
          <view class="header-icon">
            <uni-icons type="checkmarkempty" size="28" color="#ffffff"></uni-icons>
          </view>
          <view class="header-info">
            <text class="pos-name">{{ detailInfo.outAccountName }}</text>
            <text class="merchant-name">{{ detailInfo.merchantName }}</text>
          </view>
          <view class="amount-section">
            <text class="amount-label">刷卡金额</text>
            <text class="amount-value">{{ detailInfo.amount }}元</text>
          </view>
        </view>
        
        <view class="info-card">
          <view class="card-title">
            <text>交易信息</text>
          </view>
          
          <view class="detail-row">
            <text class="detail-label">POS机</text>
            <text class="detail-value">{{ detailInfo.posName }}</text>
          </view>
          
          <view class="detail-row">
            <text class="detail-label">刷卡时间</text>
            <text class="detail-value">{{ detailInfo.createTime }}</text>
          </view>
          
          <view class="detail-row">
            <text class="detail-label">手续费</text>
            <text class="detail-value orange-highlight">{{ detailInfo.commission }}元</text>
          </view>
          
          <view class="detail-row">
            <text class="detail-label">储蓄卡</text>
            <text class="detail-value">{{ detailInfo.inAccountName }}</text>
          </view>
          
          <view class="detail-row">
            <text class="detail-label">入账金额</text>
            <text class="detail-value orange-highlight">{{ detailInfo.actualAmount }}元</text>
          </view>
          
          <view class="detail-row" v-if="detailInfo.remark">
            <text class="detail-label">备注</text>
            <text class="detail-value remark">{{ detailInfo.remark || "无" }}</text>
          </view>
        </view>
      </view>
   
      <u-toast ref="uToast"></u-toast>
    </view>
  </template>
  
<script setup>
import { getAccountsTransferRecord} from '@/api/invest/accountsTransferRecord'
import {onLoad} from "@dcloudio/uni-app";
import {reactive ,toRefs,ref }from "vue";
const id = ref('')
const data = reactive({
  detailInfo: {} 
})
const {detailInfo} = toRefs(data)
onLoad((option) => {
    id.value = option.id
    getInfo()
  })
  function getInfo() {
    getAccountsTransferRecord(id.value).then(res => {
          detailInfo.value = res.data
        })
  }
  </script>
  
  <style lang="scss" scoped>
  page {
    overflow: hidden;
  }
  
  .section {
    margin: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
  }
  
  .header-card {
    display: flex;
    align-items: center;
    gap: 16rpx;
    padding: 24rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16rpx;
    box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.25);
  
    .header-icon {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
  
    .header-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6rpx;
      min-width: 0;
  
      .pos-name {
        font-size: 28rpx;
        font-weight: 600;
        color: #ffffff;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
  
      .merchant-name {
        font-size: 22rpx;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 400;
        line-height: 1;
      }
    }
  
    .amount-section {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6rpx;
      flex-shrink: 0;
  
      .amount-label {
        font-size: 20rpx;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 400;
        line-height: 1;
      }
  
      .amount-value {
        font-size: 32rpx;
        font-weight: 700;
        color: #52c41a;
        line-height: 1;
      }
    }
  }
  
  .info-card {
    padding: 32rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  
    .card-title {
      display: flex;
      align-items: center;
      gap: 8rpx;
      padding-bottom: 24rpx;
      margin-bottom: 24rpx;
      border-bottom: 2rpx solid #f0f0f0;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        width: 6rpx;
        height: 32rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 3rpx;
      }
  
      text {
        font-size: 30rpx;
        font-weight: 700;
        color: #333;
      }
    }
  
    .detail-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 16rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
  
      &:last-child {
        border-bottom: none;
      }
  
      .detail-label {
        font-size: 26rpx;
        color: #999;
        font-weight: 400;
        flex-shrink: 0;
        width: 160rpx;
      }
  
      .detail-value {
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
        text-align: right;
        flex: 1;
        
        &.highlight {
          color: #667eea;
          font-size: 32rpx;
        }
        
        &.orange-highlight {
          color: #fa8c16;
          font-size: 32rpx;
          font-weight: 700;
        }
        
        &.remark {
          word-break: break-all;
          line-height: 1.5;
        }
      }
    }
  }
  </style>