<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ChatDotRound, CopyDocument, Loading } from '@element-plus/icons-vue'

import {
  amountYuan,
  money,
  OrderCheckoutSummary,
  OrderHandoffTimeline,
  OrderResourceUsageEditor,
} from '@/features/orders'
import { useOrderActions } from '@/features/orders/composables/useOrderActions'
import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPaymentCashier'
import { formatCent } from '@/shared/utils/money'
import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
import { formatDateTime } from '@/shared/utils/time'
import type { PaymentPayWay } from '@/features/orders/api/orders'

// 支付收银台：二维码渲染 + 轮询查询。PC 不做 App 浏览器跳转，直接渲染二维码弹窗。
const cashier = useOrderPaymentCashier({
  notifySuccess: message => ElMessage.success(message),
  notifyError: message => ElMessage.error(message),
  notifyInfo: message => ElMessage.info(message),
  notifyFallback: message => ElMessage.warning(message),
  paidMessage: '支付成功，等待号主交接',
  pollIntervalMs: 3000,
  qrWidth: 240,
})

// 订单详情交互：业务逻辑、状态、计算属性、handler。
const {
  loading,
  cancelling,
  startingPayment,
  handoffing,
  confirming,
  returning,
  completing,
  countering,
  acceptingCheckout,
  rejectingCheckout,
  disputing,
  cancellingDispute,
  uploadingEvidence,
  openingChat,
  order,
  handoffRecords,
  handoffContent,
  checkoutForm,
  resourceUsage,
  counterForm,
  rejectReason,
  disputeType,
  disputeDescription,
  disputeEvidenceText,
  checkoutResources,
  resourceChargeAmount,
  snapshotHafCoinM,
  remainingHafCoinM,
  resourceLineAmount,
  isOwner,
  isRenter,
  listingCode,
  orderAmountLabel,
  orderRentDisplayAmount,
  ownerIncomeDisplayAmount,
  ownerIncomeLabel,
  canOpenDispute,
  canCancelDispute,
  isCheckoutDisputeStage,
  handleCancel,
  handlePay,
  handleSubmitHandoff,
  handleConfirmReceive,
  handleSubmitCheckout,
  handleConfirmCheckout,
  handleCounterCheckout,
  handleAcceptCheckout,
  handleRejectCheckout,
  handleCreateDispute,
  handleCancelDispute,
  handleEvidenceUpload,
  openOrderChat,
  orderEstimatedEndAt,
  orderRentedAt,
} = useOrderActions({
  notifySuccess: message => ElMessage.success(message),
  notifyError: message => ElMessage.error(message),
  notifyWarning: message => ElMessage.warning(message),
  confirm: async () => true, // PC 不做二次确认，直接放行。
  actionsNeedingConfirm: [],
  selectPayWay,
  ordersPath: '/orders',
  chatPathPrefix: '/messages/',
  startCashier: (payment, onPaid) => cashier.openPaymentCashier(payment, onPaid),
})

// 支付弹窗别名：保持 template 字段名不变。
const paymentDialogVisible = cashier.paymentPopupVisible
const activePayment = cashier.activePayment
const paymentQRCodeURL = cashier.paymentQRCodeURL
const qrGenerating = cashier.qrGenerating
const checkingPayment = cashier.checkingPayment
const paymentPayURL = cashier.payURL
const activePayWayLabel = computedPayWayLabel(activePayment)

// selectPayWay 在创建支付单前让用户选择支付宝或微信。
async function selectPayWay(): Promise<PaymentPayWay | null> {
  try {
    await ElMessageBox.confirm('选择后将生成对应渠道的支付二维码。', '选择支付方式', {
      type: 'info',
      confirmButtonText: '支付宝支付',
      cancelButtonText: '微信支付',
      distinguishCancelAndClose: true,
      closeOnClickModal: false,
    })
    return 'ZFBZF'
  } catch (action) {
    return action === 'cancel' ? 'WXZF' : null
  }
}

// computedPayWayLabel 根据当前支付单展示支付方式名称。
function computedPayWayLabel(paymentRef: typeof activePayment) {
  return computed(() => {
    const map: Record<string, string> = {
      ZFBZF: '支付宝',
      WXZF: '微信',
    }
    return map[paymentRef.value?.pay_way || ''] || '当前方式'
  })
}
function handleRefreshPayment() {
  void cashier.refreshPaymentStatus(false)
}
function stopPaymentPolling() {
  cashier.stopPaymentPolling()
}

function getOrderStep(status: string) {
  const stepMap: Record<string, number> = {
    pending_payment: 0,
    pending_handoff: 1,
    renting: 2,
    overdue: 2,
    pending_checkout_confirm: 3,
    pending_checkout_accept: 3,
    completed: 5,
    cancelled: 0,
    closed: 4,
  }
  return stepMap[status] ?? 0
}

function scrollToDispute() {
  const disputeSection = document.querySelector('.dispute-section')
  if (disputeSection) {
    disputeSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}
function scrollToCheckout() {
  const checkoutSection = document.querySelector('.checkout-form-section')
  if (checkoutSection) {
    checkoutSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}
function scrollToCounterCheckout() {
  const counterSection = document.querySelector('.counter-checkout-section')
  if (counterSection) {
    counterSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}
function scrollToRejectCheckout() {
  const rejectSection = document.querySelector('.reject-checkout-section')
  if (rejectSection) {
    rejectSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

async function copyListingCode() {
  if (!order.value) return
  try {
    await navigator.clipboard.writeText(listingCode.value)
    ElMessage.success('商品编号已复制')
  } catch {
    ElMessage.error('复制失败')
  }
}
</script>

<template>
  <section class="page order-detail-page" v-loading="loading">
    <div v-if="order" class="page-header">
      <div class="header-top">
        <div class="header-info">
          <p class="eyebrow">订单号：{{ order.order_no }}</p>
          <h1>{{ order.title }}</h1>
          <p class="order-meta">{{ order.server_region }} / {{ order.login_platform }}</p>
          <el-button size="small" plain :icon="CopyDocument" @click="copyListingCode">
            商品编号 {{ listingCode }}
          </el-button>
        </div>
        <el-button type="primary" :loading="openingChat" @click="openOrderChat">
          <el-icon style="margin-right: 4px"><ChatDotRound /></el-icon>
          联系对方
        </el-button>
      </div>
    </div>

    <div v-if="order" class="content-layout">
      <div class="main-content">
        <div v-if="order" class="order-progress-section">
          <el-steps
            :active="getOrderStep(order.status)"
            align-center
            finish-status="success"
            process-status="process"
          >
            <el-step
              title="待支付"
              :description="order.status === 'pending_payment' ? '等待租客支付' : ''"
            />
            <el-step
              title="待交接"
              :description="
                order.status === 'pending_handoff' ? handoffStatusLabel(order.handoff_status) : ''
              "
            />
            <el-step
              title="使用中"
              :description="['renting', 'overdue'].includes(order.status) ? '租赁进行中' : ''"
            />
            <el-step
              title="结账中"
              :description="
                ['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)
                  ? '等待确认'
                  : ''
              "
            />
            <el-step title="已完成" :description="order.status === 'completed' ? '订单完成' : ''" />
          </el-steps>
        </div>

        <div v-if="order" class="detail-grid">
          <div class="metric-card primary">
            <span class="metric-label">订单状态</span>
            <strong class="metric-value">{{ orderStatusLabel(order.status) }}</strong>
          </div>
          <div class="metric-card">
            <span class="metric-label">交接状态</span>
            <strong class="metric-value">{{ handoffStatusLabel(order.handoff_status) }}</strong>
          </div>
          <div class="metric-card highlight">
            <span class="metric-label">{{ orderAmountLabel }}</span>
            <strong class="metric-value amount">¥{{ money(orderRentDisplayAmount) }}</strong>
          </div>
          <div v-if="isOwner && ownerIncomeDisplayAmount !== null" class="metric-card income">
            <span class="metric-label">{{ ownerIncomeLabel }}</span>
            <strong class="metric-value amount">¥{{ money(ownerIncomeDisplayAmount) }}</strong>
          </div>
          <div class="metric-card">
            <span class="metric-label">押金</span>
            <strong class="metric-value"
              >¥{{ money(amountYuan(order.deposit_amount_cent)) }}</strong
            >
            <span v-if="amountYuan(order.deposit_waived_amount_cent) > 0" class="metric-note"
              >已免押 ¥{{ money(amountYuan(order.deposit_waived_amount_cent)) }}</span
            >
          </div>
        </div>

        <div v-if="order" class="info-section">
          <div class="info-card">
            <div class="info-row">
              <span class="info-label">开始时间</span>
              <span class="info-value">{{ formatDateTime(orderRentedAt(), '未开始') }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">预计截止</span>
              <span class="info-value">{{ formatDateTime(orderEstimatedEndAt(), '未设置') }}</span>
            </div>
          </div>

          <div v-if="order.status === 'pending_payment'" class="action-card warning">
            <p class="action-message">订单待支付，支付后账号进入交接流程。</p>
            <div class="action-buttons">
              <el-button
                v-if="isRenter"
                type="primary"
                size="large"
                :loading="startingPayment"
                @click="handlePay"
              >
                立即支付订单
              </el-button>
              <el-button type="danger" plain :loading="cancelling" @click="handleCancel">
                取消订单并释放账号
              </el-button>
            </div>
          </div>

          <div v-if="order.status === 'pending_handoff'" class="action-card info">
            <div class="action-buttons">
              <el-button type="danger" plain :loading="cancelling" @click="handleCancel">
                取消订单并释放账号
              </el-button>
            </div>
          </div>
        </div>

        <OrderHandoffTimeline v-if="order" :records="handoffRecords" :listing-code="listingCode" />

        <OrderResourceUsageEditor
          v-if="order && isRenter && ['renting', 'overdue'].includes(order.status)"
          v-model:checkout-form="checkoutForm"
          v-model:resource-usage="resourceUsage"
          :resources="checkoutResources"
          :resource-charge-amount="resourceChargeAmount"
          :snapshot-haf-coin-m="snapshotHafCoinM"
          :remaining-haf-coin-m="remainingHafCoinM"
          :returning="returning"
          :resource-line-amount="resourceLineAmount"
          @submit="handleSubmitCheckout"
        />

        <OrderCheckoutSummary
          v-if="
            order &&
            order.checkout &&
            ['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)
          "
          :order="order"
          :is-owner="isOwner"
          :is-renter="isRenter"
        />

        <div
          v-if="order && isOwner && order.status === 'pending_checkout_confirm'"
          class="form-section counter-checkout-section"
        >
          <div class="section-header">
            <h2>修改结账</h2>
          </div>
          <div class="form-card">
            <h3 class="sub-title">修改结账金额</h3>
            <el-form class="form-grid" label-position="top">
              <el-form-item label="额外消耗品已用金额">
                <el-input-number
                  v-model="counterForm.consumableAmountYuan"
                  class="full-control"
                  :min="0"
                  :precision="0"
                  controls-position="right"
                />
              </el-form-item>
              <el-form-item label="消耗哈夫币（M）">
                <el-input-number
                  v-model="counterForm.coin_consumed_m"
                  class="full-control"
                  :min="0"
                  :precision="2"
                  controls-position="right"
                />
              </el-form-item>
              <el-form-item label="其他押金扣款（元）">
                <el-input-number
                  v-model="counterForm.otherAmountYuan"
                  class="full-control"
                  :min="0"
                  :precision="0"
                  controls-position="right"
                />
              </el-form-item>
              <el-form-item label="押金扣除（元）">
                <el-input-number
                  v-model="counterForm.depositDeductAmountYuan"
                  class="full-control"
                  :min="0"
                  :max="amountYuan(order.deposit_amount_cent)"
                  :precision="0"
                  controls-position="right"
                />
              </el-form-item>
            </el-form>
            <el-input
              v-model="counterForm.reason"
              type="textarea"
              :rows="3"
              placeholder="填写修改原因"
            />
            <el-input
              v-model="counterForm.evidenceText"
              type="textarea"
              :rows="3"
              placeholder="修正证据链接，一行一个"
            />
            <el-button
              type="warning"
              size="large"
              :loading="countering"
              @click="handleCounterCheckout"
              >提交修正给租客确认</el-button
            >
          </div>
        </div>

        <div
          v-if="order && isRenter && order.status === 'pending_checkout_accept'"
          class="form-section reject-checkout-section"
        >
          <div class="section-header">
            <h2>拒绝修正</h2>
          </div>
          <div class="form-card">
            <p class="form-hint">不同意修正时填写原因，订单会进入争议处理。</p>
            <el-input
              v-model="rejectReason"
              type="textarea"
              :rows="3"
              placeholder="不同意时填写原因，会进入争议处理"
            />
            <el-button
              type="danger"
              plain
              size="large"
              :loading="rejectingCheckout"
              @click="handleRejectCheckout"
              >拒绝修正并发起争议</el-button
            >
          </div>
        </div>
      </div>

      <!-- 右侧悬浮操作区 -->
      <div v-if="order" class="action-sidebar">
        <!-- 交接操作 -->
        <div
          v-if="
            isOwner &&
            order.status === 'pending_handoff' &&
            order.handoff_status === 'pending_owner'
          "
          class="sidebar-card"
        >
          <h3 class="sidebar-title">提交交接说明</h3>
          <el-input
            v-model="handoffContent"
            type="textarea"
            :rows="5"
            placeholder="填写登录方式、注意事项和交接说明"
          />
          <el-button type="primary" size="large" :loading="handoffing" @click="handleSubmitHandoff"
            >提交交接</el-button
          >
        </div>

        <!-- 确认收号 -->
        <div
          v-if="
            isRenter &&
            order.status === 'pending_handoff' &&
            order.handoff_status === 'pending_renter_confirm'
          "
          class="sidebar-card"
        >
          <h3 class="sidebar-title">确认收号</h3>
          <p class="sidebar-hint">
            确认账号可以正常登录后，订单会进入使用中并重新计算预计截止时间。
          </p>
          <el-button type="primary" size="large" :loading="confirming" @click="handleConfirmReceive"
            >确认已收到账号</el-button
          >
        </div>

        <!-- 发起结账 -->
        <div
          v-if="isRenter && ['renting', 'overdue'].includes(order.status)"
          class="sidebar-card highlight-card"
        >
          <h3 class="sidebar-title">快捷结账</h3>
          <el-button type="primary" size="large" :loading="returning" @click="handleSubmitCheckout">
            立即提交结账
          </el-button>
          <p class="sidebar-hint">
            如需修改消耗品、哈夫币等详细信息，请先向下滚动填写完整表单后再提交
          </p>
          <el-button type="default" size="small" @click="scrollToCheckout">
            查看详细结账表单
          </el-button>
        </div>

        <!-- 确认结账 -->
        <div v-if="isOwner && order.status === 'pending_checkout_confirm'" class="sidebar-card">
          <h3 class="sidebar-title">确认结账</h3>
          <el-button
            type="primary"
            size="large"
            :loading="completing"
            @click="handleConfirmCheckout"
          >
            确认结账并完成订单
          </el-button>
          <div class="section-divider-mini">
            <span>或者</span>
          </div>
          <el-button type="warning" plain size="large" @click="scrollToCounterCheckout">
            需要修改结账金额
          </el-button>
          <p class="sidebar-hint">如认为金额有误，点击上方按钮修改</p>
        </div>

        <!-- 确认修正结账 -->
        <div v-if="isRenter && order.status === 'pending_checkout_accept'" class="sidebar-card">
          <h3 class="sidebar-title">确认修正结账</h3>
          <el-button
            type="primary"
            size="large"
            :loading="acceptingCheckout"
            @click="handleAcceptCheckout"
          >
            同意修正并完成订单
          </el-button>
          <div class="section-divider-mini">
            <span>或者</span>
          </div>
          <el-button type="danger" plain size="large" @click="scrollToRejectCheckout">
            不同意，发起争议
          </el-button>
          <p class="sidebar-hint">不同意修正时需填写原因，将进入争议处理</p>
        </div>

        <!-- 发起申诉 -->
        <div v-if="canOpenDispute" class="sidebar-card dispute-card">
          <h3 class="sidebar-title">{{ isCheckoutDisputeStage ? '发起结账争议' : '发起申诉' }}</h3>
          <el-button type="warning" size="large" @click="scrollToDispute">
            {{ isCheckoutDisputeStage ? '提交结账争议' : '提交申诉' }}
          </el-button>
          <p class="sidebar-hint">点击后滚动到申诉表单填写详细信息</p>
        </div>

        <div v-if="canCancelDispute" class="sidebar-card dispute-card">
          <h3 class="sidebar-title">
            {{ order.status === 'checkout_disputing' ? '取消结账争议' : '取消申诉' }}
          </h3>
          <el-button
            type="warning"
            plain
            size="large"
            :loading="cancellingDispute"
            @click="handleCancelDispute"
          >
            {{ order.status === 'checkout_disputing' ? '取消结账争议' : '取消申诉' }}
          </el-button>
          <p class="sidebar-hint">取消后订单将恢复到发起申诉前的流程</p>
        </div>
      </div>
    </div>

    <div v-if="order && canOpenDispute" class="form-section dispute-section">
      <div class="section-header">
        <h2>{{ isCheckoutDisputeStage ? '发起结账争议' : '发起申诉' }}</h2>
      </div>
      <div class="form-card">
        <el-select
          v-if="!isCheckoutDisputeStage"
          v-model="disputeType"
          class="full-control"
          placeholder="选择申诉类型"
        >
          <el-option label="无法登录" value="cannot_login" />
          <el-option label="虚假描述" value="false_description" />
          <el-option label="账号被封" value="account_banned" />
          <el-option label="资产损失" value="asset_loss" />
          <el-option label="哈夫币争议" value="haf_coin_dispute" />
          <el-option label="超时未交接" value="handoff_timeout" />
          <el-option label="超时未归还" value="return_timeout" />
        </el-select>
        <el-input
          v-model="disputeDescription"
          type="textarea"
          :rows="4"
          placeholder="说明争议经过、时间点和希望客服核查的证据"
        />
        <el-input
          v-model="disputeEvidenceText"
          type="textarea"
          :rows="3"
          placeholder="证据链接，一行一个。开发阶段可先填截图地址或备注链接"
        />
        <div class="upload-line">
          <input
            type="file"
            accept="image/jpeg,image/png,image/webp,application/pdf"
            :disabled="uploadingEvidence"
            @change="handleEvidenceUpload"
          />
        </div>
        <el-button type="warning" size="large" :loading="disputing" @click="handleCreateDispute">
          {{ isCheckoutDisputeStage ? '提交结账争议' : '提交申诉' }}
        </el-button>
      </div>
    </div>

    <el-dialog
      v-model="paymentDialogVisible"
      title="订单支付"
      width="560px"
      append-to-body
      :z-index="4000"
      class="order-pay-dialog"
      @closed="stopPaymentPolling"
    >
      <div v-if="activePayment" class="pay-dialog-body">
        <div class="pay-summary">
          <div class="pay-summary-row">
            <span>支付金额</span>
            <strong>¥{{ formatCent(activePayment.amount_cent) }}</strong>
          </div>
        </div>
        <div v-if="paymentPayURL" class="pay-qr-section">
          <div class="pay-qr-box">
            <el-icon v-if="qrGenerating" class="is-loading" :size="32"><Loading /></el-icon>
            <img v-else-if="paymentQRCodeURL" :src="paymentQRCodeURL" alt="支付二维码" />
          </div>
          <div class="pay-instructions">
            <h3>请使用{{ activePayWayLabel }}扫码支付</h3>
            <p>扫码完成后将自动刷新，也可手动点击下方按钮确认。</p>
          </div>
        </div>
        <p v-else class="pay-hint">支付单已创建，请完成付款后刷新状态。</p>
      </div>
      <template #footer>
        <div class="pay-dialog-footer">
          <el-button type="primary" :loading="checkingPayment" @click="handleRefreshPayment">
            我已支付，刷新状态
          </el-button>
        </div>
      </template>
    </el-dialog>
  </section>
</template>

<style scoped>
.order-detail-page {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.header-info {
  flex: 1;
}

.order-meta {
  color: #64748b;
  margin-top: 8px;
}

.content-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

.main-content {
  min-width: 0;
}

.action-sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sidebar-card.highlight-card {
  background: #eff6ff;
  border-color: #3b82f6;
}

.sidebar-card.dispute-card {
  background: #fef2f2;
  border-color: #fecaca;
}

.sidebar-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.sidebar-hint {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.sidebar-card .el-button {
  width: 100%;
}

.order-progress-section {
  margin-bottom: 32px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.2s;
}

.metric-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.metric-card.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: #ffffff;
}

.metric-card.primary .metric-label {
  color: rgba(255, 255, 255, 0.9);
}

.metric-card.primary .metric-value {
  color: #ffffff;
}

.metric-card.highlight {
  background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
  border: none;
  color: #ffffff;
}

.metric-card.highlight .metric-label {
  color: rgba(255, 255, 255, 0.9);
}

.metric-card.highlight .metric-value {
  color: #ffffff;
}

.metric-card.income {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.metric-card.income .metric-label {
  color: #15803d;
}

.metric-card.income .metric-value {
  color: #16a34a;
}

.metric-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.metric-value {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}

.metric-value.amount {
  color: #ff6a00;
}

.metric-note {
  font-size: 12px;
  color: #2563eb;
}

.info-section {
  margin-bottom: 32px;
}

.info-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.info-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 600;
}

.action-card {
  margin-top: 16px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.action-card.warning {
  background: #fffbeb;
  border-color: #fde68a;
}

.action-card.info {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.action-message {
  margin: 0 0 16px 0;
  color: #1f2937;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.form-section {
  margin-bottom: 32px;
}

.form-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.form-hint {
  margin: 0;
  padding: 12px 16px;
  background: #f8fafc;
  border-left: 3px solid #3b82f6;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
  border-radius: 4px;
}

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
  position: relative;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.section-divider span {
  padding: 0 16px;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
}

.section-divider-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
  position: relative;
}

.section-divider-mini::before,
.section-divider-mini::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.section-divider-mini span {
  padding: 0 12px;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 500;
}

.sub-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 16px 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.field-hint {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 12px;
}

.dispute-section .form-card {
  background: #fef2f2;
  border-color: #fecaca;
}

.upload-line {
  padding: 12px;
  background: #f9fafb;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
}

.upload-line input[type='file'] {
  width: 100%;
  font-size: 14px;
}

.pay-dialog-body {
  display: grid;
  gap: 20px;
}

.pay-summary {
  padding: 16px 20px;
  background: #f8fafc;
  border-radius: 8px;
}

.pay-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pay-summary-row span {
  color: #64748b;
  font-size: 14px;
}

.pay-summary-row strong {
  color: #111a44;
  font-size: 28px;
  font-weight: 700;
}

.pay-qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: #f8fafc;
  border-radius: 12px;
}

.pay-qr-box {
  width: 240px;
  height: 240px;
  display: grid;
  place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pay-qr-box img {
  width: 220px;
  height: 220px;
  display: block;
}

.pay-instructions {
  text-align: center;
}

.pay-instructions h3 {
  margin: 0 0 8px 0;
  color: #111a44;
  font-size: 18px;
  font-weight: 600;
}

.pay-instructions p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}

.pay-hint {
  margin: 0;
  padding: 16px;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  text-align: center;
  border-radius: 8px;
}

.pay-dialog-footer {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

:global(.order-pay-dialog) {
  border-radius: 16px;
}

:global(.order-pay-dialog .el-dialog__header) {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

:global(.order-pay-dialog .el-dialog__body) {
  padding: 24px;
}

:global(.order-pay-dialog .el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
  .content-layout {
    grid-template-columns: 1fr;
  }

  .action-sidebar {
    position: static;
    order: -1;
  }

  .header-top {
    flex-direction: column;
  }

  .detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons .el-button {
    width: 100%;
  }

  .pay-qr-section {
    padding: 16px;
  }
}
</style>
