<template>
    <div class="rechange-page table_form-container">
        <!-- 页面标题 -->
        <div class="page-title">存款</div>

        <!-- 存款渠道列表：每行提供一个"存款"按钮 -->
        <RechangeTable :table-data="channelList" :columns="tableColumns" :highlight-current-row="false"
            :loading="loading">
            <template #action="{ row }">
                <el-button type="primary" size="small" @click="handleOpenDialog(row)">
                    存款
                </el-button>
            </template>
        </RechangeTable>
    </div>

    <!-- 存款弹窗 -->
    <RechangeDialog class="rechange-pay-dialog" :visible="dialogVisible" title="存款" width="600px" :show-footer="false"
        @cancel="handleCancel" @close="handleClose">
        <!-- type === 8 时显示新样式（选择金额和支付方式） -->
        <template v-if="rechangeForm.type === 8">
            <!-- 步骤1：选择金额和支付方式 -->
            <template v-if="payStep === 1">
                <!-- 渠道信息 -->
                <div class="channel-card">
                    <div class="channel-info">
                        <div class="channel-name">{{ rechangeForm.channelName }}</div>
                    </div>
                    <div class="channel-meta">支持货币: AUD (澳元)</div>
                </div>

                <!-- 快捷金额选择 -->
                <div class="quick-amount">
                    <div class="section-title">选择充值金额</div>
                    <div class="amount-list">
                        <div v-for="(amount, index) in quickAmounts" :key="index" class="amount-item"
                            :class="{ active: rechangeForm.depositAmount === amount.toString() }"
                            @click="handleQuickAmount(amount)">
                            {{ amount }} AUD
                        </div>
                    </div>
                </div>

                <!-- 自定义金额 -->
                <el-form-item label="自定义金额">
                    <el-input v-model="rechangeForm.depositAmount" placeholder="请输入充值金额" size="large"
                        @input="handleAmountInput">
                        <template #suffix>
                            <span class="currency-suffix">AUD</span>
                        </template>
                    </el-input>
                </el-form-item>

                <!-- 支付方式选择 -->
                <div class="payment-methods">
                    <div class="section-title">选择支付方式</div>
                    <div class="method-list">
                        <div v-for="method in paymentMethods" :key="method.code" class="method-item"
                            :class="{ active: selectedMethod === method.code }" @click="handleSelectMethod(method.code)">
                            <div class="method-icon">
                                <img :src="method.icon" :alt="method.name" />
                            </div>
                            <span class="method-name">{{ method.name }}</span>
                            <div class="method-check" v-if="selectedMethod === method.code">
                                <el-icon>
                                    <Check />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 按钮区 -->
                <div class="dialog-actions">
                    <el-button size="large" @click="handleCancel">取消</el-button>
                    <el-button type="primary" size="large" :loading="submitLoading"
                        :disabled="!rechangeForm.depositAmount || !selectedMethod" @click="handleCreateOrder">
                        确认支付
                    </el-button>
                </div>
            </template>

            <!-- 步骤2：支付中/跳转 -->
            <template v-else-if="payStep === 2">
                <!-- 移动端：直接跳转 -->
                <template v-if="isMobileDevice">
                    <div class="loading-section">
                        <el-icon class="is-loading" size="48">
                            <Loading />
                        </el-icon>
                        <div class="loading-text">正在跳转支付页面...</div>
                    </div>
                </template>
                <!-- 桌面端：显示二维码 -->
                <template v-else>
                    <div class="qrcode-section">
                        <div class="section-title">请使用{{ getMethodName(selectedMethod) }}扫码支付</div>
                        <div class="qrcode-container">
                            <div v-show="qrcodeLoading">
                                <el-icon class="is-loading" size="48">
                                    <Loading />
                                </el-icon>
                            </div>
                            <div v-show="!qrcodeLoading">
                                <img v-if="qrcodeImageUrl" :src="qrcodeImageUrl" alt="支付二维码" class="qrcode-image" />
                                <div v-else ref="qrcodeRef" class="qrcode"></div>
                            </div>
                        </div>
                        <div class="qrcode-tip">请使用{{ getMethodName(selectedMethod) }}扫描上方二维码完成支付</div>
                    </div>
                </template>
            </template>
        </template>

        <!-- type !== 8 时显示老样式（银行卡信息 + 上传凭证） -->
        <template v-else>
            <el-form ref="rechangeFormRef" :model="rechangeForm" :rules="rechangeFormRules" label-position="top">
                <!-- 渠道信息 -->
                <div class="channel-card">
                    <div class="channel-info">
                        <div class="channel-name">{{ rechangeForm.channelName }}</div>
                        <div class="channel-meta">
                            <span></span>
                        </div>
                    </div>
                    <div class="channel-meta">支持货币: {{ rechangeForm.currencySymbol }}</div>
                </div>

                <!-- 银行卡信息（channel_code = BANK 时显示） -->
                <template v-if="rechangeForm.channelCode === 'BANK'">
                    <div class="info-section">
                        <div class="section-title">收款信息</div>
                        <div class="info-grid">
                            <div class="info-item">
                                <span class="label">账户持有人姓名</span>
                                <span class="value">{{ rechangeForm.beneficiaryName }}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">银行名称</span>
                                <span class="value">{{ rechangeForm.beneficiaryBankName }}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">银行识别代码</span>
                                <span class="value">{{ rechangeForm.swiftBicCode }}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">收款人银行账号</span>
                                <span class="value">{{ rechangeForm.beneficiaryBankAccount }}</span>
                            </div>
                            <div class="info-item full-width">
                                <span class="label">银行地址</span>
                                <span class="value">{{ rechangeForm.beneficiaryBankAddress }}</span>
                            </div>
                        </div>
                    </div>
                </template>

                <!-- 钱包地址信息（其他渠道显示） -->
                <template v-else>
                    <div class="info-section">
                        <div class="section-title">收款信息</div>
                        <div class="info-item full-width">
                            <span class="label">钱包收款地址</span>
                            <span class="value address-value">{{ rechangeForm.address }}</span>
                        </div>
                    </div>
                </template>

                <!-- 充值金额 -->
                <el-form-item label="充值金额" prop="depositAmount">
                    <el-input v-model="rechangeForm.depositAmount" placeholder="请输入充值金额" size="large" @input="handleAmountInput">
                        <template #suffix>
                            <span class="currency-suffix">{{ rechangeForm.currencySymbol }}</span>
                        </template>
                    </el-input>
                </el-form-item>

                <!-- 上传凭证 -->
                <el-form-item label="上传凭证" prop="voucherUrl">
                    <el-upload class="voucher-uploader" action="" :show-file-list="false"
                        :http-request="handleUpload" :before-upload="beforeAvatarUpload" :loading="uploadLoading">
                        <img v-if="voucherUrl" :src="voucherUrl" class="voucher-image" />
                        <div v-else class="upload-placeholder">
                            <el-icon class="upload-icon">
                                <Plus />
                            </el-icon>
                            <span class="upload-text">点击上传凭证</span>
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>

            <!-- 按钮区 -->
            <div class="dialog-actions">
                <el-button size="large" @click="handleCancel">取消</el-button>
                <el-button type="primary" size="large" :loading="submitLoading" @click="handleOldSubmit">
                    确认充值
                </el-button>
            </div>
        </template>
    </RechangeDialog>
</template>

<script setup lang="ts">
import { Check, Loading, Plus } from '@element-plus/icons-vue'

defineOptions({
    name: 'Rechange'
})
import type { FormInstance, FormRules, UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
import { nextTick, onMounted, ref, computed } from 'vue'
import { useUserStore } from '@/stores/modules/user'
import RechangeTable from '@/components/common/Table.vue'
import RechangeDialog from '@/components/common/Dialog.vue'
import { usePageLoading } from '@/composables/useLoading'
import { rechangeTableColumns } from './options'
import { getRechargeChannelList, getApplyCustomerRef, getKycDetail, createBuyEx, rechargeApi } from '@/api/modules/capital/rechangeChanl'
import { uploadImageApi } from '@/api/modules/upload'
import QRCode from 'qrcode'
import alipayIcon from '@/assets/images/zfb.png'
import wechatIcon from '@/assets/images/wx.png'
import unionpayIcon from '@/assets/images/ylzf.png'

// 上传凭证相关
const voucherUrl = ref('')
const uploadLoading = ref(false)

// 获取用户信息
const userStore = useUserStore()
const userInfo = userStore.userInfo as any
const bhVal = ref(userInfo?.username || '')
const passVal = ref('')

// 支付方式类型
interface PaymentMethod {
    code: string
    name: string
    icon: string
}

// 支付方式列表
const paymentMethods = ref<PaymentMethod[]>([
    { code: 'alipay', name: '支付宝', icon: alipayIcon },
    { code: 'wechat', name: '微信支付', icon: wechatIcon },
    { code: 'unionpay', name: '银联支付', icon: unionpayIcon },
])

// 获取支付方式名称
const getMethodName = (code: string): string => {
    const method = paymentMethods.value.find(m => m.code === code)
    return method?.name || ''
}

// 快捷金额列表
const quickAmounts = ref<number[]>([3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000])

// 支付步骤：1-选择金额和支付方式，2-支付中
const payStep = ref(1)
const selectedMethod = ref('')

// 表格列配置
const tableColumns = ref(rechangeTableColumns)

// 检测是否为移动设备
const isMobileDevice = computed(() => {
    // console.log('navigator.userAgent:', navigator.userAgent);
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
})

// 二维码容器引用
const qrcodeRef = ref<HTMLElement | null>(null)

// 二维码加载状态
const qrcodeLoading = ref(false)

// 二维码图片URL
const qrcodeImageUrl = ref('')

// 生成二维码
const generateQRCode = async (url: string) => {
    await nextTick()
    if (qrcodeRef.value) {
        try {
            const dataUrl = await QRCode.toDataURL(url, {
                width: 200,
                margin: 2,
            })
            qrcodeImageUrl.value = dataUrl 
        } catch (error) {
            console.error('生成二维码失败:', error)
            ElMessage.error('生成二维码失败')
        } finally {
            qrcodeLoading.value = false
        }
    }
}

// 弹窗基础状态
const dialogVisible = ref(false)
const rechangeFormRef = ref<FormInstance>()
const submitLoading = ref(false)

const { loading, startLoading, stopLoading } = usePageLoading()
// 渠道列表数据
const channelList = ref<ChannelRow[]>([])

// 弹窗表单数据
interface RechangeFormData {
    id: number
    type: number
    channelName: string
    channelCode: string
    currencySymbol: string
    channelFee: string
    depositAmount: string
    voucherUrl: string
    beneficiaryName: string
    beneficiaryBankName: string
    swiftBicCode: string
    beneficiaryBankAddress: string
    beneficiaryBankAccount: string
    address: string
}

const createDefaultForm = (): RechangeFormData => ({
    id: 0,
    type: 0,
    channelName: '',
    channelCode: '',
    currencySymbol: '',
    channelFee: '0',
    depositAmount: '',
    voucherUrl: '',
    beneficiaryName: '',
    beneficiaryBankName: '',
    swiftBicCode: '',
    beneficiaryBankAddress: '',
    beneficiaryBankAccount: '',
    address: '',
})

const rechangeForm = ref<RechangeFormData>(createDefaultForm())

// 表单校验规则
const rechangeFormRules = ref<FormRules<RechangeFormData>>({
    depositAmount: [
        { required: true, message: '请输入充值金额', trigger: ['blur', 'change'] },
        { pattern: /^\d+$/, message: '请输入整数金额', trigger: ['blur', 'change'] },
    ],
    voucherUrl: [
        { required: true, message: '请上传充值凭证', trigger: ['change'] },
    ],
})

// 渠道数据接口
interface ChannelCurrency {
    id: number
    symbol: string
    rate: string
}

interface ChannelRow {
    id: number
    name: string
    channel_fee: string
    type: number
    beneficiary_name: string | null
    beneficiary_bank_name: string | null
    swift_bic_code: string | null
    beneficiary_bank_address: string | null
    beneficiary_bank_account: string | null
    channel_code: string
    currency: ChannelCurrency
    address?: string
}

// 获取渠道列表
const fetchChannelList = async () => {
    startLoading()
    try {
        const res = await getRechargeChannelList() as ChannelRow[]
        stopLoading()
        channelList.value = res || []
    } catch (error) {
        stopLoading()
        console.error('获取充值渠道列表失败', error)
    }
}

// 打开弹窗
const handleOpenDialog = async (row: any) => {
    rechangeForm.value = {
        id: row.id,
        type: row.type,
        channelName: row.name,
        channelCode: row.channel_code,
        currencySymbol: row.currency?.symbol || 'AUD',
        channelFee: row.channel_fee || '0',
        depositAmount: '',
        voucherUrl: '',
        beneficiaryName: row.beneficiary_name || '',
        beneficiaryBankName: row.beneficiary_bank_name || '',
        swiftBicCode: row.swift_bic_code || '',
        beneficiaryBankAddress: row.beneficiary_bank_address || '',
        beneficiaryBankAccount: row.beneficiary_bank_account || '',
        address: (row as any).address || '',
    }
    // 重置支付状态
    payStep.value = 1
    selectedMethod.value = ''
    voucherUrl.value = ''

    dialogVisible.value = true
    await nextTick()
    rechangeFormRef.value?.clearValidate()
}

// 选择快捷金额
const handleQuickAmount = (amount: number) => {
    rechangeForm.value.depositAmount = amount.toString()
}

// 金额输入处理：只允许整数
const handleAmountInput = (value: string) => {
    const filtered = value.replace(/\D/g, '')
    rechangeForm.value.depositAmount = filtered
}

// 选择支付方式
const handleSelectMethod = (code: string) => {
    selectedMethod.value = code
}

// 创建支付订单并跳转支付页面
const handleCreateOrder = async () => {
    try {
        await rechangeFormRef.value?.validate()
        submitLoading.value = true
        qrcodeLoading.value = true
        payStep.value = 2

        // 第一步：调用支付申请引用接口
        await getApplyCustomerRef()

        // 第二步：获取KYC详情
        const kycD: any = await getKycDetail()
        if (kycD.status !== 'approved') {
            ElMessage.error('订单创建失败')
            return
        }
        // 第三步：创建买入订单获取跳转URL
        const res: any = await createBuyEx({
            channel_id: rechangeForm.value.id,
            amount: rechangeForm.value.depositAmount,
            payment_method: selectedMethod.value,
            bh: bhVal.value,
        })

        // 获取跳转URL并打开支付页面
        const payUrl = res.payment_urls[1]
        if (payUrl) {
            if (isMobileDevice.value) {
                // 移动端：直接跳转支付页面
                ElMessage.success('正在跳转支付页面...')
                setTimeout(() => {
                    window.location.href = payUrl
                    // 重置状态
                    handleCancel()
                }, 500)
            } else {
                // 桌面端：生成二维码
                ElMessage.success('正在生成支付二维码...')
                await generateQRCode(payUrl)
            }
        } else {
            ElMessage.error('获取支付链接失败')
            payStep.value = 1
        }
    } catch (error: any) {
        console.log('error:', error);
        ElMessage.error(error?.msg || '创建支付订单失败')
        payStep.value = 1
    } finally {
        submitLoading.value = false
    }
}

// 上传凭证相关
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
        ElMessage.error('图片格式必须为 JPG 或 PNG!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
    }
    uploadLoading.value = true
    return true
}

// 自定义上传方法
const handleUpload = async (options: any) => {
    const { file, onSuccess, onError } = options
    try {
        const res: any = await uploadImageApi(file)
        voucherUrl.value = res.url
        rechangeForm.value.voucherUrl = res.url
        onSuccess(res)
        // 上传成功后手动清除该字段的验证状态
        nextTick(() => {
            rechangeFormRef.value?.clearValidate('voucherUrl')
        })
    } catch (error) {
        onError(error)
        uploadLoading.value = false
    }
}

// 老表单提交（type !== 8 时使用）
const handleOldSubmit = async () => {
    try {
        await rechangeFormRef.value?.validate()
        submitLoading.value = true
        await rechargeApi({
            channel_id: rechangeForm.value.id,
            amount: rechangeForm.value.depositAmount,
            img: rechangeForm.value.voucherUrl,
        })
        ElMessage.success('充值提交成功')
        dialogVisible.value = false
        fetchChannelList()
    } catch (error: any) {
        ElMessage.error(error?.msg || '充值提交失败')
    } finally {
        submitLoading.value = false
    }
}

// 取消弹窗
const handleCancel = () => {
    dialogVisible.value = false
    rechangeFormRef.value?.resetFields()
    rechangeForm.value = createDefaultForm()
    qrcodeImageUrl.value = ''
    qrcodeLoading.value = false
    payStep.value = 1
    selectedMethod.value = ''
    voucherUrl.value = ''
}

// 关闭弹窗
const handleClose = () => {
    handleCancel()
}

// 页面加载时获取渠道列表
onMounted(() => {
    fetchChannelList()
})
</script>

<style scoped lang="scss">
.rechange-page {
    max-height: 100%;
    height: 100%;

    .page-title {
        margin-bottom: 16px;
        font-size: 28px;
        font-weight: 600;
        color: #303133;
    }
}

.channel-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    color: #fff;

    .channel-info {
        .channel-name {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .channel-meta {
            display: flex;
            gap: 16px;
            font-size: 14px;
            opacity: 0.9;
        }
    }
}

// 快捷金额选择
.quick-amount {
    margin-bottom: 20px;

    .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 16px;
    }

    .amount-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;

        .amount-item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px;
            border: 2px solid #e4e7ed;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            color: #606266;
            transition: all 0.3s ease;

            &:hover {
                border-color: #409eff;
                background: #f0f7ff;
            }

            &.active {
                border-color: #409eff;
                background: #ecf5ff;
                color: #409eff;
                font-weight: 600;
            }
        }
    }
}

// 支付方式样式
.payment-methods {
    margin-bottom: 20px;

    .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 16px;
    }

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

        .method-item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px;
            border: 2px solid #e4e7ed;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
                border-color: #409eff;
                background: #f0f7ff;
            }

            &.active {
                border-color: #409eff;
                background: #ecf5ff;
            }

            .method-icon {
                width: 48px;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }

            .method-name {
                font-size: 14px;
                color: #606266;
                font-weight: 500;
            }

            .method-check {
                position: absolute;
                top: 8px;
                right: 8px;
                width: 20px;
                height: 20px;
                background: #409eff;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 12px;
            }
        }
    }
}

// 加载状态
.loading-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;

    .el-icon {
        margin-bottom: 20px;
        color: #409eff;
    }

    .loading-text {
        font-size: 16px;
        color: #606266;
    }
}

// 按钮区域
.dialog-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;

    .el-button {
        flex: 1;
        height: 44px;
        font-size: 16px;
        border-radius: 8px;
    }
}

// 深度覆盖 Element Plus Dialog 样式
:deep(.rechange-pay-dialog .el-dialog__header) {
    padding: 20px 24px;
    border-bottom: 1px solid #e4e7ed;
}

:deep(.rechange-pay-dialog .el-dialog__body) {
    padding: 24px;
}

:deep(.rechange-pay-dialog .el-dialog) {
    border-radius: 12px;
    overflow: hidden;
}

:deep(.el-form-item__label) {
    font-weight: 500;
}

.currency-suffix {
    font-size: 16px;
    font-weight: 500;
    color: #606266;
}

// 二维码样式
.qrcode-section {
    text-align: center;
    padding: 20px 0;
}

.qrcode-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24px 0;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.qrcode-image {
    width: 200px;
    height: 200px;
    display: block;
}

.qrcode {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;

    canvas {
        display: block;
    }
}

.qrcode-tip {
    color: #909399;
    font-size: 14px;
    margin-top: 16px;
}

// info-section 样式
.info-section {
    background: #f5f7fa;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;

    .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e4e7ed;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;

        .info-item {
            display: flex;
            flex-direction: column;
            gap: 6px;

            &.full-width {
                grid-column: span 2;
            }

            .label {
                font-size: 13px;
                color: #909399;
            }

            .value {
                font-size: 14px;
                color: #303133;
                word-break: break-all;

                &.address-value {
                    font-family: monospace;
                    background: #fff;
                    padding: 8px;
                    border-radius: 4px;
                }
            }
        }
    }

    .info-item.full-width {
        display: flex;
        flex-direction: column;
        gap: 6px;

        .label {
            font-size: 13px;
            color: #909399;
        }

        .value {
            font-size: 14px;
            color: #303133;
            word-break: break-all;

            &.address-value {
                font-family: monospace;
                background: #fff;
                padding: 8px;
                border-radius: 4px;
            }
        }
    }
}

// 上传凭证样式
.voucher-uploader {
    width: 100%;
    height: 160px;
    border: 1px dashed var(--el-border-color);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);

    &:hover {
        border-color: var(--el-color-primary);
    }

    :deep(.el-upload) {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .voucher-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .upload-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #909399;

        .upload-icon {
            font-size: 32px;
        }

        .upload-text {
            font-size: 14px;
        }
    }
}
</style>
