<template>
  <Dialog :visible="dialogVisible"
    :title="currentStep === 1 ? t('withdraw.dialog.title1') : t('withdraw.dialog.title2')" width="600px"
    :show-footer="false" @close="handleUpdateVisible">
    <!-- 第一步：输入金额并展示计算明细 -->
    <div v-if="currentStep === 1" class="step1-container">
      <!-- 钱包余额展示 -->
      <div class="wallet-section">
        <div class="section-label">{{ t('withdraw.dialog.walletBalance') }}</div>
        <div class="wallet-grid">
          <div class="wallet-item">
            <span class="wallet-label">{{ t('withdraw.wallet.feeHandling') }}</span>
            <span class="wallet-value">{{ walletInfo.commission_fee_handling || '0.00'}}</span>
          </div>
          <div class="wallet-item">
            <span class="wallet-label">{{ t('withdraw.wallet.pointDiff') }}</span>
            <span class="wallet-value">{{ walletInfo.commission_point_diff || '0.00'}}</span>
          </div>
          <div class="wallet-item">
            <span class="wallet-label">{{ t('withdraw.wallet.service') }}</span>
            <span class="wallet-value">{{ walletInfo.service || '0.00'}}</span>
          </div>
          <div class="wallet-item" v-if="showRiskFee">
            <span class="wallet-label">{{ t('withdraw.wallet.risk') }}</span>
            <span class="wallet-value">{{ walletInfo.risk || '0.00'}}</span>
          </div>
          <div class="wallet-item">
            <span class="wallet-label">{{ t('withdraw.wallet.profit') }}</span>
            <span class="wallet-value">{{ walletInfo.closing_profit || '0.00'}}</span>
          </div>
          <div class="wallet-item" v-if="roleId >= 5">
            <span class="wallet-label">{{ t('withdraw.wallet.available') }}</span>
            <span class="wallet-value available">{{ availableBalance || '0.00' }}</span>
          </div>
        </div>
      </div>

      <!-- 金额输入 -->
      <div class="amount-section">
        <div class="section-label">
          {{ t('withdraw.dialog.amount') }}
          <span class="max-balance">（最大可取：{{ totalWalletBalance }} {{ currentCurrency }}）</span>
        </div>
        <el-input v-model="withdrawAmount" type="number" :placeholder="t('withdraw.dialog.amountPlaceholder')"
          @input="handleAmountInput">
          <template #prepend>{{ currentCurrency }}</template>
        </el-input>
        <div v-if="amountError" class="amount-error">{{ amountError }}</div>
      </div>

      <!-- 合计扣除 -->
      <div v-if="totalDeducted && parseFloat(totalDeducted) > 0" class="total-section">
        <div class="total-label">{{ t('withdraw.dialog.totalDeducted') }}：</div>
        <div class="total-value">-{{ totalDeducted }} {{ currentCurrency }}</div>
      </div>

      <!-- 扣除计算明细 - 用盒子展示 -->
      <div v-if="withdrawAmount && calculatedData.length > 0" class="calculation-section">
        <div class="section-label">{{ t('withdraw.dialog.deductionDetails') }}</div>
        <div class="calculation-grid">
          <div v-for="(item, index) in calculatedData" :key="index" class="calc-item">
            <div class="calc-type">{{ item.type }}</div>
            <div class="calc-values">
              <div class="calc-original">
                <span class="label">{{ t('withdraw.dialog.originalBalance') }}</span>
                <span class="value">{{ item.original }}</span>
              </div>
              <div class="calc-deducted">
                <span class="label">{{ t('withdraw.dialog.deductedAmount') }}</span>
                <span class="value deducted">-{{ item.deducted }}</span>
              </div>
              <div class="calc-remaining">
                <span class="label">{{ t('withdraw.dialog.remaining') }}</span>
                <span class="value">{{ item.remaining }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="calc-summary">
          <span class="label">{{ t('withdraw.dialog.totalDeducted') }}：</span>
          <span class="total-value">{{ totalDeducted }}</span>
        </div>
      </div>

      <!-- 快捷金额 -->
      <div class="quick-amounts">
        <el-button v-for="amount in quickAmounts" :key="amount" size="small" @click="handleQuickAmount(amount)">
          {{ amount }}
        </el-button>
      </div>

      <!-- 底部按钮 -->
      <div class="dialog-footer">
        <el-button @click="handleCancel">{{ t('common.cancel') }}</el-button>
        <el-button type="primary" @click="handleNextStep">{{ t('withdraw.dialog.nextStep') }}</el-button>
      </div>
    </div>

    <!-- 第二步：确认表单 -->
    <div v-else class="step2-container">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-position="top">

        <!-- 金额信息（只读） -->
        <div class="amount-info">
          <div class="info-row">
            <span class="info-label">{{ t('withdraw.dialog.withdrawAmount') }}：</span>
            <span class="info-value">{{ withdrawAmount }} USD</span>
          </div>
          <div class="info-row" v-for="(item, index) in calculatedData" :key="index">
            <span class="info-label">{{ item.typeLabel }}：</span>
            <span class="info-value">{{ item.deducted }} USD</span>
          </div>
        </div>

        <!-- 钱包地址 -->
        <el-form-item :label="t('withdraw.dialog.walletAddress')" prop="withdraw_address">
          <el-input v-model="formData.withdraw_address" :placeholder="t('withdraw.dialog.walletAddressPlaceholder')" />
        </el-form-item>

        <!-- 用户取款额外字段 (role_id >= 5) -->
        <template v-if="!isAgent">
          <el-form-item :label="t('withdraw.dialog.beneficiaryName')" prop="beneficiary_name">
            <el-input v-model="formData.beneficiary_name"
              :placeholder="t('withdraw.dialog.beneficiaryNamePlaceholder')" />
          </el-form-item>
          <el-form-item :label="t('withdraw.dialog.bankName')" prop="beneficiary_bank_name">
            <el-input v-model="formData.beneficiary_bank_name"
              :placeholder="t('withdraw.dialog.bankNamePlaceholder')" />
          </el-form-item>
          <el-form-item :label="t('withdraw.dialog.swiftCode')" prop="swift_bic_code">
            <el-input v-model="formData.swift_bic_code" :placeholder="t('withdraw.dialog.swiftCodePlaceholder')" />
          </el-form-item>
          <el-form-item :label="t('withdraw.dialog.bankAddress')" prop="beneficiary_bank_address">
            <el-input v-model="formData.beneficiary_bank_address"
              :placeholder="t('withdraw.dialog.bankAddressPlaceholder')" />
          </el-form-item>
          <el-form-item :label="t('withdraw.dialog.bankAccount')" prop="beneficiary_bank_account">
            <el-input v-model="formData.beneficiary_bank_account"
              :placeholder="t('withdraw.dialog.bankAccountPlaceholder')" />
          </el-form-item>
        </template>
      </el-form>

      <!-- 底部按钮 -->
      <div class="dialog-footer">
        <el-button @click="handleBack">{{ t('common.cancel') }}</el-button>
        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">{{ t('withdraw.dialog.confirmWithdraw')
          }}</el-button>
      </div>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import Dialog from '@/components/common/Dialog.vue'
import { getWalletCapital, getWithdrawChannel, getAgentWithdrawChannel, agentWithdraw, withdraw } from '@/api/modules/capital/withdraw'
import { getStorage } from '@/utils/storage'

const { t } = useI18n()

interface Props {
  visible: boolean
  channelId?: number
  channelInfo?: {
    id: number
    symbol?: string
    currency?: {
      symbol: string

    }
  }
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}

interface WalletInfo {
  user_id: string
  amount: string
  commission_point_diff: string
  freeze: string
  risk: string
  service: string
  toucun_percent: string
  fee_handling_percent: string
  commission_fee_handling: string
  bail: string
  bail_stop_order: string
  bail_change_order: string
  risk_control_id: string
  fee_setting_id: string
  closing_profit: string
}

interface ChannelItem {
  id: number
  name: string
}

interface CalculatedItem {
  type: string
  typeLabel: string
  original: string
  deducted: string
  remaining: string
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const dialogVisible = ref(props.visible)
const currentStep = ref(1)
const withdrawAmount = ref('')
const submitLoading = ref(false)
const amountError = ref('')

// 处理金额输入
const handleAmountInput = (value: string) => {
  const numValue = parseFloat(value)
  if (isNaN(numValue)) {
    amountError.value = ''
    calculatedData.value = []
    return
  }

  if (numValue > totalWalletBalance.value) {
    amountError.value = `输入金额不能超过最大可取金额 ${totalWalletBalance.value.toFixed(2)}`
    calculatedData.value = []
    return
  }

  amountError.value = ''
  calculateWithdraw()
}

// 用户信息
const userInfo: any = getStorage('userInfo')
const roleId = userInfo?.role_id || 6

// 角色判断
const isAgent = computed(() => roleId >= 5)

// 当前货币类型（从渠道信息获取）
const currentCurrency = computed(() => props.channelInfo?.currency?.symbol || '-')

// 计算可用余额 = amount - freeze - (手续费 + 点差 + 服务费 + 风险金 + 头寸)
const availableBalance = computed(() => {
  const amount = parseFloat(walletInfo.value.amount || '0')
  const freeze = parseFloat(walletInfo.value.freeze || '0')
  // 钱包余额总和
  const walletSum =
    Math.max(0, parseFloat(walletInfo.value.commission_fee_handling || '0')) +
    Math.max(0, parseFloat(walletInfo.value.commission_point_diff || '0')) +
    Math.max(0, parseFloat(walletInfo.value.service || '0')) +
    Math.max(0, parseFloat(walletInfo.value.risk || '0')) +
    Math.max(0, parseFloat(walletInfo.value.closing_profit || '0'))
  return Math.max(0, amount - freeze - walletSum)
})

// 计算钱包余额总和（用于验证输入金额上限）
// roleId >= 5 时，totalWalletBalance 需要包含 availableBalance
const totalWalletBalance = computed(() => {
  const amount = parseFloat(walletInfo.value.amount || '0')
  const freeze = parseFloat(walletInfo.value.freeze || '0')

  // 钱包余额总和（手续费 + 点差 + 服务费 + 风险金 + 头寸）
  const walletSum =
    parseFloat(walletInfo.value.commission_fee_handling || '0') +
    parseFloat(walletInfo.value.commission_point_diff || '0') +
    parseFloat(walletInfo.value.service || '0') +
    parseFloat(walletInfo.value.risk || '0') +
    parseFloat(walletInfo.value.closing_profit || '0')

  if (roleId >= 5) {
    // roleId >= 5 时，总余额包含可用余额
    // availableBalance = amount - freeze - walletSum
    const availableBal = Math.max(0, amount - freeze - walletSum)
    return walletSum + availableBal
  }
  return walletSum
})


// 根据角色显示对应的费用项
const showRiskFee = computed(() => [1].includes(roleId))

// 费用项顺序
const feeOrder = computed(() => {
  const orders: Record<number, string[]> = {
    1: ['手续费', '点差', '服务费', '风险金', '头寸', '可用余额'], // 平台
    2: ['手续费', '点差', '服务费', '可用余额'], // 承包商
    3: ['手续费', '点差', '服务费', '头寸', '可用余额'], // 特殊做市商
    4: ['手续费', '点差', '服务费', '头寸', '可用余额'], // 普通做市商
    5: ['手续费', '点差', '可用余额'], // 代理
    6: ['手续费', '点差', '可用余额'], // 用户
  }
  return orders[roleId] ?? orders[6] ?? []
})

// 费用项对应的字段
const feeFieldMap: Record<string, keyof WalletInfo | 'available'> = {
  '手续费': 'commission_fee_handling',
  '点差': 'commission_point_diff',
  '服务费': 'service',
  '风险金': 'risk',
  '头寸': 'closing_profit',
  '可用余额': 'available', // 特殊处理，用 computed 计算
}

// 费用项标签映射
const feeLabelMap: Record<string, string> = {
  '手续费': '手续费佣金',
  '点差': '点差佣金',
  '服务费': '服务费',
  '风险金': '风险金',
  '头寸': '头寸',
  '可用余额': '可用余额',
}

// 钱包信息
const walletInfo = ref<WalletInfo>({
  user_id: '',
  amount: '',
  commission_point_diff: '0',
  freeze: '0',
  risk: '0',
  service: '0',
  toucun_percent: '0',
  fee_handling_percent: '0',
  commission_fee_handling: '0',
  bail: '0',
  bail_stop_order: '0',
  bail_change_order: '0',
  risk_control_id: '',
  fee_setting_id: '',
  closing_profit: '0',
})

// 渠道列表
const channelList = ref<ChannelItem[]>([])

// 计算后的扣除明细
const calculatedData = ref<CalculatedItem[]>([])

// 合计扣除
const totalDeducted = computed(() => {
  return calculatedData.value.reduce((sum, item) => sum + parseFloat(item.deducted || '0'), 0).toFixed(2)
})

// 快捷金额
const quickAmounts = ['100', '500', '1000', '5000']

// 表单数据
const formRef = ref<FormInstance>()
const formData = ref({
  channel_id: '',
  withdraw_address: '',
  // 代理取款字段
  withdraw_fee_handle: '',
  withdraw_point_diff: '',
  withdraw_service_fee: '',
  withdraw_head_fee: '',
  withdraw_risk_fee: '',
  withdraw_blance: '', // 可用余额使用量
  // 用户取款额外字段
  beneficiary_name: '',
  beneficiary_bank_name: '',
  swift_bic_code: '',
  beneficiary_bank_address: '',
  beneficiary_bank_account: '',
})

// 表单验证规则
const formRules: FormRules = {
  withdraw_address: [{ required: true, message: '请输入钱包地址', trigger: 'blur' }],
  beneficiary_name: [{ required: true, message: '请输入收款人姓名', trigger: 'blur' }],
  beneficiary_bank_name: [{ required: true, message: '请输入银行名称', trigger: 'blur' }],
  swift_bic_code: [{ required: true, message: '请输入SWIFT代码', trigger: 'blur' }],
  beneficiary_bank_address: [{ required: true, message: '请输入银行地址', trigger: 'blur' }],
  beneficiary_bank_account: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
}

// 监听 visible 变化
watch(() => props.visible, (val) => {
  dialogVisible.value = val
  if (val) {
    initData()
  }
})

// 初始化数据
const initData = async () => {
  currentStep.value = 1
  withdrawAmount.value = ''
  calculatedData.value = []

  // 获取钱包信息
  try {
    const res: any = await getWalletCapital()
    if (res) {
      walletInfo.value = {
        commission_fee_handling: res.commission_fee_handling || '0',
        commission_point_diff: res.commission_point_diff || '0',
        service: res.service || '0',
        risk: res.risk || '0',
        closing_profit: res.closing_profit || '0',
        toucun_percent: res.toucun_percent || '0',
        amount: res.amount || '0',
        user_id: res.user_id || '',
        freeze: res.freeze || '0',
        bail: res.bail || '0',
        bail_stop_order: res.bail_stop_order || '0',
        bail_change_order: res.bail_change_order || '0',
        risk_control_id: res.risk_control_id || '',
        fee_setting_id: res.fee_setting_id || '',
        fee_handling_percent: res.fee_handling_percent || '0',
      }
    }
  } catch (error) {
    console.error('获取钱包信息失败', error)
  }

  // 获取渠道列表
  try {
    const api = isAgent.value ? getWithdrawChannel : getAgentWithdrawChannel
    const res: any = await api()
    if (res && Array.isArray(res)) {
      channelList.value = res.map((item: any) => ({
        id: item.id,
        name: item.name,
      }))
    } else if (res?.data) {
      channelList.value = res.data.map((item: any) => ({
        id: item.id,
        name: item.name,
      }))
    }
  } catch (error) {
    console.error('获取渠道列表失败', error)
  }
}

// 计算扣除明细
const calculateWithdraw = () => {
  const amount = parseFloat(withdrawAmount.value) || 0
  if (amount <= 0) {
    calculatedData.value = []
    return
  }

  const results: CalculatedItem[] = []
  let remaining = amount

  for (const feeType of feeOrder.value) {
    const field = feeFieldMap[feeType]
    if (!field) continue

    // 获取原始值（特殊处理 available）
    let original: number
    if (field === 'available') {
      original = availableBalance.value
    } else {
      original = parseFloat(walletInfo.value[field] || '0')
    }
    
    if (original <= 0) continue

    const deducted = Math.min(remaining, original).toFixed(2)
    const newRemaining = Math.max(0, remaining - original)

    results.push({
      type: feeType,
      typeLabel: feeLabelMap[feeType] || feeType,
      original: original.toFixed(2),
      deducted: deducted,
      remaining: Math.max(0, original - parseFloat(deducted)).toFixed(2),
    })

    remaining = newRemaining
    if (remaining <= 0) break
  }

  calculatedData.value = results
}

// 快捷金额
const handleQuickAmount = (amount: string) => {
  withdrawAmount.value = amount
  calculateWithdraw()
}

// 关闭弹窗
const handleUpdateVisible = (val: boolean) => {
  emit('update:visible', val)
}

// 取消
const handleCancel = () => {
  dialogVisible.value = false
  emit('update:visible', false)
}

// 返回上一步
const handleBack = () => {
  currentStep.value = 1
}

// 下一步
const handleNextStep = () => {
  const amount = parseFloat(withdrawAmount.value)
  if (!withdrawAmount.value || amount <= 0) {
    ElMessage.warning('请输入取款金额')
    return
  }

  if (amount > totalWalletBalance.value) {
    ElMessage.warning(`输入金额不能超过最大可取金额 ${totalWalletBalance.value.toFixed(2)}`)
    return
  }

  // 填充表单数据
  formData.value.withdraw_fee_handle = calculatedData.value.find(item => item.type === '手续费')?.deducted || '0'
  formData.value.withdraw_point_diff = calculatedData.value.find(item => item.type === '点差')?.deducted || '0'
  formData.value.withdraw_service_fee = calculatedData.value.find(item => item.type === '服务费')?.deducted || '0'
  formData.value.withdraw_risk_fee = calculatedData.value.find(item => item.type === '风险金')?.deducted || '0'
  formData.value.withdraw_head_fee = calculatedData.value.find(item => item.type === '头寸')?.deducted || '0'
  formData.value.withdraw_blance = calculatedData.value.find(item => item.type === '可用余额')?.deducted || '0'

  currentStep.value = 2
}

// 提交
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
  } catch {
    return
  }

  submitLoading.value = true

  try {
    const params: any = {
      channel_id: props.channelId,
      amount: +withdrawAmount.value,
      withdraw_fee_handle: formData.value.withdraw_fee_handle,
      withdraw_point_diff: formData.value.withdraw_point_diff,
      withdraw_address: formData.value.withdraw_address,
    }

    if (isAgent.value) {
      // 用户取款
      params.withdraw_blance = formData.value.withdraw_blance
      params.beneficiary_name = formData.value.beneficiary_name
      params.beneficiary_bank_name = formData.value.beneficiary_bank_name
      params.swift_bic_code = formData.value.swift_bic_code
      params.beneficiary_bank_address = formData.value.beneficiary_bank_address
      params.beneficiary_bank_account = formData.value.beneficiary_bank_account

      await withdraw(params)
    } else {
      // 代理取款
      params.withdraw_service_fee = formData.value.withdraw_service_fee
      params.withdraw_head_fee = formData.value.withdraw_head_fee
      params.withdraw_risk_fee = formData.value.withdraw_risk_fee

      await agentWithdraw(params)
    }

    ElMessage.success('取款申请已提交')
    dialogVisible.value = false
    emit('update:visible', false)
    emit('success')
  } catch (error) {
    console.error('提交失败', error)
  } finally {
    submitLoading.value = false
  }
}
</script>

<style scoped lang="scss">
.step1-container {
  .section-label {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
  }
}

.wallet-section {
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: #fff;

  .section-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
  }

  .wallet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .wallet-item {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;

    .wallet-label {
      margin-bottom: 6px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
    }

    .wallet-value {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }
  }
}

.amount-section {
  margin-bottom: 16px;

  .section-label {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #303133;

    .max-balance {
      margin-left: 8px;
      font-size: 12px;
      color: #909399;
      font-weight: normal;
    }
  }

  .amount-error {
    margin-top: 8px;
    font-size: 12px;
    color: #f56c6c;
  }
}

.total-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin-bottom: 16px;
  background: #fef0f0;
  border-radius: 8px;
  border: 1px solid #fde2e2;

  .total-label {
    font-size: 14px;
    color: #606266;
  }

  .total-value {
    font-size: 18px;
    font-weight: 700;
    color: #f56c6c;
  }
}

.calculation-section {
  margin-bottom: 24px;

  .section-label {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
  }

  .calculation-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .calc-item {
    padding: 16px;
    background: #f5f7fa;
    border-radius: 8px;
    border: 1px solid #ebeef5;
  }

  .calc-type {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #303133;
  }

  .calc-values {
    display: flex;
    gap: 24px;
  }

  .calc-original,
  .calc-deducted,
  .calc-remaining {
    display: flex;
    flex-direction: column;

    .label {
      margin-bottom: 4px;
      font-size: 12px;
      color: #909399;
    }

    .value {
      font-size: 16px;
      font-weight: 600;
      color: #303133;

      &.deducted {
        color: #f56c6c;
      }
    }
  }

  .calc-summary {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #ebeef5;

    .label {
      font-size: 14px;
      color: #606266;
    }

    .total-value {
      margin-left: 8px;
      font-size: 20px;
      font-weight: 600;
      color: #f56c6c;
    }
  }
}

.quick-amounts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.step2-container {
  .amount-info {
    margin-bottom: 24px;
    padding: 16px;
    background: #f5f7fa;
    border-radius: 4px;

    .info-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

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

      .info-label {
        color: #606266;
      }

      .info-value {
        font-weight: 500;
        color: #303133;
      }
    }
  }
}
</style>
