{include file="/shopro/common/script" /}

<div id="recharge" class="user-recharge" v-cloak style="padding: 16px;">
    <el-container class="panel-block" v-loading="state.loading">
        <el-main style="padding: 0 8px 16px 8px;">
            <!-- 会员简要信息与四大资产全景卡片 -->
            <div v-if="state.user" style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px;">
                <div class="sa-flex sa-row-between mb-3" style="display: flex; justify-content: space-between; align-items: center;">
                    <div class="sa-flex" style="display: flex; align-items: center;">
                        <sa-image :url="state.user.avatar" size="42" radius="21"></sa-image>
                        <div style="margin-left: 10px;">
                            <div style="font-weight: 600; font-size: 14px; color: #1e293b;">{{ state.user.nickname || '未命名会员' }}</div>
                            <div style="font-size: 12px; color: #64748b;">会员ID: #{{ state.user.id }} <span v-if="state.user.mobile">({{ state.user.mobile }})</span></div>
                        </div>
                    </div>
                    <div>
                        <el-tag v-if="state.user.identity_text" type="success" size="small">{{ state.user.identity_text }}</el-tag>
                    </div>
                </div>

                <!-- 四大资产当前存量栅格展示 -->
                <el-row :gutter="8">
                    <el-col :span="6">
                        <div style="background: #ffffff; padding: 8px 10px; border-radius: 6px; border: 1px solid #edf2f7; text-align: center;">
                            <div style="font-size: 11px; color: #64748b;">商城余额</div>
                            <div style="font-size: 13px; font-weight: 600; color: #2563eb; margin-top: 2px;">¥{{ state.user.money || '0.00' }}</div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="background: #ffffff; padding: 8px 10px; border-radius: 6px; border: 1px solid #edf2f7; text-align: center;">
                            <div style="font-size: 11px; color: #64748b;">分红马豆</div>
                            <div style="font-size: 13px; font-weight: 600; color: #16a34a; margin-top: 2px;">{{ state.user.madow || '0' }} <span style="font-size: 10px;">颗</span></div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="background: #ffffff; padding: 8px 10px; border-radius: 6px; border: 1px solid #edf2f7; text-align: center;">
                            <div style="font-size: 11px; color: #64748b;">商城积分</div>
                            <div style="font-size: 13px; font-weight: 600; color: #d97706; margin-top: 2px;">{{ state.user.score || 0 }}</div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="background: #ffffff; padding: 8px 10px; border-radius: 6px; border: 1px solid #edf2f7; text-align: center;">
                            <div style="font-size: 11px; color: #64748b;">可用兑换券</div>
                            <div style="font-size: 13px; font-weight: 600; color: #ea580c; margin-top: 2px;">¥{{ state.user.voucher_available || '0.00' }}</div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!-- 充值操作表单 -->
            <el-form ref="formRef" :model="form.model" :rules="form.rules" label-width="110px" label-position="right">
                <el-form-item label="充值资产类型" prop="type">
                    <el-radio-group v-model="form.model.type" @change="onTypeChange">
                        <el-radio-button label="money">余额 (元)</el-radio-button>
                        <el-radio-button label="madow">马豆 (颗)</el-radio-button>
                        <el-radio-button label="score">积分 (分)</el-radio-button>
                        <el-radio-button label="voucher">兑换券 (元)</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="当前可用持有">
                    <div style="font-size: 15px; font-weight: 600; color: #334155;">
                        <span v-if="form.model.type === 'money'">¥{{ currentBalance }}</span>
                        <span v-else-if="form.model.type === 'madow'">{{ currentBalance }} 颗 (实时估值 ¥{{ state.user ? state.user.madow_value : '0.00' }})</span>
                        <span v-else-if="form.model.type === 'score'">{{ currentBalance }} 积分</span>
                        <span v-else-if="form.model.type === 'voucher'">¥{{ currentBalance }} (计划总额 ¥{{ state.user ? state.user.voucher_total : '0.00' }})</span>
                    </div>
                </el-form-item>

                <el-form-item :label="`变动${assetLabel}`" prop="amount">
                    <el-input 
                        v-model="form.model.amount" 
                        type="number" 
                        :step="form.model.type === 'madow' ? '0.00000001' : (form.model.type === 'score' ? '1' : '0.01')"
                        :placeholder="form.model.type === 'madow' ? '正数为充值，负数为扣除 (支持8位小数)' : '正数为充值，负数为扣除'"
                        clearable>
                        <template #append>{{ assetUnit }}</template>
                    </el-input>
                </el-form-item>

                <!-- 动态变动试算与防呆预警 -->
                <el-form-item v-if="previewBalance !== null" label="变动试算">
                    <div style="width: 100%; padding: 8px 12px; border-radius: 6px;" :style="{ background: isOverdrawn ? '#fef2f2' : '#f0fdf4', border: isOverdrawn ? '1px solid #fecaca' : '1px solid #bbf7d0' }">
                        <div style="font-size: 13px;" :style="{ color: isOverdrawn ? '#dc2626' : '#15803d' }">
                            <span>变动后预计持有：<b>{{ previewBalance }} {{ assetUnit }}</b></span>
                            <span v-if="isOverdrawn" style="margin-left: 8px; font-weight: bold;">(⚠️ 扣除超出当前持有量，提交将被拦截)</span>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="操作备注" prop="memo">
                    <el-input v-model="form.model.memo" placeholder="请输入充值或扣除原因（可追溯审计）" maxlength="100" show-word-limit></el-input>
                </el-form-item>
            </el-form>
        </el-main>

        <el-footer class="sa-footer--submit sa-flex sa-row-right" style="display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid #f1f5f9;">
            <el-button @click="onCancel">取消</el-button>
            <el-button type="primary" :loading="state.submitting" :disabled="isOverdrawn" @click="onConfirm">
                确认{{ form.model.amount && parseFloat(form.model.amount) < 0 ? '扣除' : '充值' }}
            </el-button>
        </el-footer>
    </el-container>
</div>