<template>
  <business-page-layout title="提现详情" :show-back="true">
    <view class="detail-container">

      <view v-if="info.id" class="detail-card">
        <!-- 顶部焦点区域 -->
        <view class="hero-section">
          <text class="hero-label">实际到账 (元)</text>
          <text class="hero-amount">{{ formatMoney(info.true_cash) }}</text>

          <!-- 修复：使用三元表达式代替 methods 函数调用 -->
          <view
              class="status-badge"
              :class="info.check_status === 1 ? 'badge-success' : (info.check_status === 3 ? 'badge-danger' : 'badge-warning')"
          >
            {{ checkStatusText(info.check_status) }}
          </view>
        </view>

        <!-- 明细信息 -->
        <view class="info-list">
          <view class="row"><text class="label">订单号</text><text class="value font-mono">{{ info.order_no || '-' }}</text></view>
          <view class="row"><text class="label">申请金额</text><text class="value">{{ formatMoney(info.apply_cash) }}</text></view>
          <view class="row"><text class="label">手续费</text><text class="value">{{ formatMoney(info.charge_cash) }}</text></view>
          <view class="row"><text class="label">申请时间</text><text class="value">{{ formatDateTime(info.apply_time) }}</text></view>

          <!-- 审核说明（突出显示拒绝原因） -->
          <view class="row" v-if="info.check_result">
            <text class="label">审核说明</text>
            <text class="value" :class="{'text-danger': info.check_status === 3}">{{ info.check_result }}</text>
          </view>

          <view class="divider"></view>

          <view class="row"><text class="label">打款状态</text><text class="value">{{ dakuanStatusText(info.dakuan_status) }}</text></view>
          <view class="row" v-if="info.dakuan_time"><text class="label">打款时间</text><text class="value">{{ formatDateTime(info.dakuan_time) }}</text></view>
        </view>
      </view>

    </view>
  </business-page-layout>
</template>

<script>
import BusinessPageLayout from '@/subPackages/sub_business_shared/components/business-page-layout.vue'
import { formatMoney } from '@/subPackages/sub_business_shared/common/format.js'
import {
  formatDateTime,
  withdrawalCheckStatusText,
  dakuanStatusText as dakuanStatusLabel,
} from '@/subPackages/sub_business_shared/common/display.js'
import businessMixin from '@/subPackages/sub_business_shared/common/businessMixin.js'

export default {
  mixins: [businessMixin],
  components: { BusinessPageLayout },
  data() {
    return { id: 0, info: {} }
  },
  onLoad(q) {
    this.id = Number(q.id || 0)
    this.bizApi.getWithdrawalDetail(this.id).then(w => {
      if (w.ok) this.info = w.data || {}
    })
  },
  methods: {
    formatMoney,
    formatDateTime,
    checkStatusText(s) {
      return withdrawalCheckStatusText(s)
    },
    dakuanStatusText(s) {
      return dakuanStatusLabel(s)
    }
  },
}
</script>

<style lang="scss" scoped>
$theme-primary: #6acdbb;
$color-bg-base: #F5F7F8;
$color-text-main: #1D2129;
$color-text-muted: #86909C;

.detail-container {
  background-color: $color-bg-base;
  min-height: 100vh;
  padding: 24rpx;
}

.detail-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 48rpx 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
}

.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}

.hero-label {
  font-size: 26rpx;
  color: $color-text-muted;
  margin-bottom: 12rpx;
}

.hero-amount {
  font-size: 64rpx;
  font-weight: 700;
  color: $color-text-main;
  font-family: DIN Alternate, monospace, sans-serif;
  margin-bottom: 24rpx;
}

.status-badge {
  font-size: 24rpx;
  padding: 6rpx 24rpx;
  border-radius: 30rpx;
  font-weight: 500;

  &.badge-success { background: rgba(106, 205, 187, 0.1); color: $theme-primary; }
  &.badge-warning { background: #FFF3E8; color: #FF7D00; }
  &.badge-danger { background: #FFECE8; color: #F53F3F; }
}

.info-list {
  background: #F8FBFB;
  border-radius: 16rpx;
  padding: 24rpx 32rpx;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16rpx 0;
  font-size: 26rpx;
  line-height: 1.5;
}

.label {
  color: $color-text-muted;
  min-width: 120rpx;
}

.value {
  color: $color-text-main;
  text-align: right;
  flex: 1;
  word-break: break-all;
}

.font-mono {
  font-family: SF Pro Text, monospace, sans-serif;
}

.text-danger {
  color: #F53F3F;
  font-weight: 500;
}

.divider {
  height: 1rpx;
  background-color: #EAEFEF;
  margin: 16rpx 0;
}
</style>