<template>
    <div class="default-main ba-table-box">
        <el-card shadow="never" class="reward-form-card" v-loading="pageLoading">
            <template #header>
                <span class="card-title">{{ t('game.rewardConfigForm.title') }}</span>
            </template>

            <el-alert
                v-if="showTemplateIntro"
                class="intro-alert"
                type="info"
                :closable="false"
                show-icon
            >
                <template #title>{{ t('game.rewardConfigForm.intro') }}</template>
            </el-alert>

            <el-form
                ref="formRef"
                class="reward-form-body"
                @submit.prevent=""
                :model="formModel"
                :label-position="config.layout.shrink ? 'top' : 'right'"
                :label-width="formLabelWidth + 'px'"
                :rules="rules"
            >
                <template v-if="isSuperAdmin">
                    <el-form-item :label="t('game.rewardConfigForm.super_scope_label')">
                        <el-radio-group v-model="superEditScope" @change="onSuperScopeChange">
                            <el-radio-button value="template">{{ t('game.rewardConfigForm.super_scope_template') }}</el-radio-button>
                            <el-radio-button value="channel">{{ t('game.rewardConfigForm.super_scope_channel') }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-alert
                        v-if="superEditScope === 'channel'"
                        class="scope-hint"
                        type="warning"
                        :closable="false"
                        :title="t('game.rewardConfigForm.super_scope_hint')"
                    />
                    <div v-if="superEditScope === 'channel'" class="channel-bar">
                        <div class="channel-picker">
                            <FormItem
                                :label="t('game.rewardConfig.game_channel_id')"
                                type="remoteSelect"
                                v-model="formModel.game_channel_id"
                                prop="game_channel_id"
                                :input-attr="channelRemoteAttr"
                                :placeholder="t('Please select field', { field: t('game.rewardConfig.game_channel_id') })"
                            />
                        </div>
                        <el-button type="primary" @click="loadData" :disabled="!formModel.game_channel_id">{{ t('Refresh') }}</el-button>
                    </div>
                </template>

                <template v-if="showInner">
                    <el-form-item :label="t('game.rewardConfig.tier_reward_form')" prop="tier_reward_form">
                        <div class="block-editor tier-editor">
                            <div class="line line-head">
                                <span>{{ t('game.rewardConfig.grid_number') }}</span>
                                <span>{{ t('game.rewardConfig.ui_text') }}</span>
                                <span>{{ t('game.rewardConfig.ui_text_en') }}</span>
                                <span>{{ t('game.rewardConfig.real_ev') }}</span>
                                <span>{{ t('game.rewardConfig.tier') }}</span>
                                <span>{{ t('game.rewardConfig.remark') }}</span>
                            </div>
                            <div v-for="(row, idx) in tierRows" :key="'tier-' + idx" class="line">
                                <el-input v-model="row.grid_number" disabled />
                                <el-input
                                    v-model="row.ui_text"
                                    :placeholder="t('Please input field', { field: t('game.rewardConfig.ui_text') })"
                                    @input="syncPayload"
                                />
                                <el-input
                                    v-model="row.ui_text_en"
                                    :placeholder="t('Please input field', { field: t('game.rewardConfig.ui_text_en') })"
                                    @input="syncPayload"
                                />
                                <el-input
                                    v-model="row.real_ev"
                                    :placeholder="t('Please input field', { field: t('game.rewardConfig.real_ev') })"
                                    @input="syncPayload"
                                />
                                <el-select v-model="row.tier" style="width: 100px" @change="syncPayload">
                                    <el-option :label="t('game.rewardConfig.tier_t1')" value="T1" />
                                    <el-option :label="t('game.rewardConfig.tier_t2')" value="T2" />
                                    <el-option :label="t('game.rewardConfig.tier_t3')" value="T3" />
                                    <el-option :label="t('game.rewardConfig.tier_t4')" value="T4" />
                                    <el-option :label="t('game.rewardConfig.tier_t5')" value="T5" />
                                </el-select>
                                <el-input
                                    v-model="row.remark"
                                    :placeholder="t('Please input field', { field: t('game.rewardConfig.remark') })"
                                    @input="syncPayload"
                                />
                            </div>
                            <div class="form-help">{{ t('game.rewardConfig.tier_reward_form_help') }}</div>
                        </div>
                    </el-form-item>

                    <el-form-item :label="t('game.rewardConfig.bigwin_form')" prop="bigwin_form">
                        <div class="block-editor bigwin-editor">
                            <div class="line line-head">
                                <span>{{ t('game.rewardConfig.grid_number') }}</span>
                                <span>{{ t('game.rewardConfig.ui_text') }}</span>
                                <span>{{ t('game.rewardConfig.real_ev') }}</span>
                                <span>{{ t('game.rewardConfig.tier') }}</span>
                            </div>
                            <div v-for="(row, idx) in bigwinRows" :key="'bigwin-' + idx" class="line">
                                <el-input v-model="row.grid_number" disabled />
                                <el-input
                                    v-model="row.ui_text"
                                    :placeholder="t('Please input field', { field: t('game.rewardConfig.ui_text') })"
                                    @input="syncPayload"
                                />
                                <el-input
                                    v-model="row.real_ev"
                                    :placeholder="t('Please input field', { field: t('game.rewardConfig.real_ev') })"
                                    @input="syncPayload"
                                />
                                <el-input v-model="row.tier" disabled style="width: 120px" />
                            </div>
                            <div class="form-help">{{ t('game.rewardConfig.bigwin_form_help') }}</div>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" :loading="submitLoading" @click="onSubmit">{{ t('game.rewardConfigForm.btn_add') }}</el-button>
                        <el-button @click="onReset">{{ t('game.rewardConfigForm.btn_reset') }}</el-button>
                        <el-button v-auth="'generateTierBoard'" @click="openGenTierDialog">{{ t('game.rewardConfigForm.btn_gen_tier') }}</el-button>
                        <el-button v-auth="'generateRewardWeight'" :loading="genWeightSubmitting" @click="onGenWeightClick">{{
                            t('game.rewardConfigForm.btn_gen_weight')
                        }}</el-button>
                    </el-form-item>
                </template>
            </el-form>
        </el-card>

        <el-dialog
            v-model="genTierDialogVisible"
            class="gen-tier-dialog"
            :title="t('game.rewardConfigForm.gen_tier_title')"
            :width="genTierDialogWidth"
            :fullscreen="genTierDialogFullscreen"
            :align-center="!genTierDialogFullscreen"
            append-to-body
            :close-on-click-modal="false"
            destroy-on-close
        >
            <el-scrollbar :max-height="genTierScrollMaxHeight" class="gen-tier-scroll">
                <div class="gen-rule">{{ t('game.rewardConfigForm.gen_tier_rule') }}</div>
                <el-form
                    :model="genTierForm"
                    class="gen-tier-form"
                    :label-position="genTierFormLabelPosition"
                    :label-width="genTierFormLabelWidth"
                >
                <div class="gen-tier-block">
                    <div class="gen-tier-block-title">{{ t('game.rewardConfigForm.gen_t1_label') }}</div>
                    <el-form-item :label="t('game.rewardConfigForm.gen_t1_fixed') + '（' + t('game.rewardConfigForm.gen_dir_cw') + '）'">
                        <el-input-number v-model="genTierForm.t1_fixed_cw" :min="0" :max="26" :step="1" controls-position="right" />
                    </el-form-item>
                    <el-form-item :label="t('game.rewardConfigForm.gen_t1_fixed') + '（' + t('game.rewardConfigForm.gen_dir_ccw') + '）'">
                        <el-input-number v-model="genTierForm.t1_fixed_ccw" :min="0" :max="26" :step="1" controls-position="right" />
                    </el-form-item>
                    <el-form-item :label="t('game.rewardConfigForm.gen_settlement')">
                        <el-input-number v-model="genTierForm.amt_t1" :min="0" :step="1" controls-position="right" />
                    </el-form-item>
                </div>
                <div class="gen-tier-block">
                    <div class="gen-tier-block-title">{{ t('game.rewardConfigForm.gen_t2_label') }}</div>
                    <el-form-item :label="t('game.rewardConfigForm.gen_t2_min') + '（' + t('game.rewardConfigForm.gen_dir_cw') + '）'">
                        <el-input-number v-model="genTierForm.t2_min_cw" :min="0" :max="26" :step="1" controls-position="right" />
                    </el-form-item>
                    <el-form-item :label="t('game.rewardConfigForm.gen_t2_min') + '（' + t('game.rewardConfigForm.gen_dir_ccw') + '）'">
                        <el-input-number v-model="genTierForm.t2_min_ccw" :min="0" :max="26" :step="1" controls-position="right" />
                    </el-form-item>
                    <el-form-item :label="t('game.rewardConfigForm.gen_settlement')">
                        <el-input-number v-model="genTierForm.amt_t2" :min="0" :precision="2" :step="0.1" controls-position="right" />
                    </el-form-item>
                </div>
                <div class="gen-tier-block">
                    <div class="gen-tier-block-title">{{ t('game.rewardConfigForm.gen_t3_label') }}</div>
                    <el-form-item :label="t('game.rewardConfigForm.gen_t3_amt_only')">
                        <el-input-number v-model="genTierForm.amt_t3" :min="0" :precision="2" :step="0.1" controls-position="right" />
                    </el-form-item>
                </div>
                <div class="gen-tier-block">
                    <div class="gen-tier-block-title">{{ t('game.rewardConfigForm.gen_t4_label') }}</div>
                    <el-form-item :label="t('game.rewardConfigForm.gen_t4_fixed') + '（' + t('game.rewardConfigForm.gen_dir_cw') + '）'">
                        <el-input-number v-model="genTierForm.t4_fixed_cw" :min="0" :max="26" :step="1" controls-position="right" />
                    </el-form-item>
                    <el-form-item :label="t('game.rewardConfigForm.gen_t4_fixed') + '（' + t('game.rewardConfigForm.gen_dir_ccw') + '）'">
                        <el-input-number v-model="genTierForm.t4_fixed_ccw" :min="0" :max="26" :step="1" controls-position="right" />
                    </el-form-item>
                    <el-form-item :label="t('game.rewardConfigForm.gen_settlement')">
                        <el-input-number v-model="genTierForm.amt_t4" :precision="2" :step="0.1" controls-position="right" />
                    </el-form-item>
                </div>
                <div class="gen-tier-block">
                    <div class="gen-tier-block-title">{{ t('game.rewardConfigForm.gen_t5_label') }}</div>
                    <el-form-item :label="t('game.rewardConfigForm.gen_t5_fixed') + '（' + t('game.rewardConfigForm.gen_dir_cw') + '）'">
                        <el-input-number v-model="genTierForm.t5_fixed_cw" :min="0" :max="26" :step="1" controls-position="right" />
                    </el-form-item>
                    <el-form-item :label="t('game.rewardConfigForm.gen_t5_fixed') + '（' + t('game.rewardConfigForm.gen_dir_ccw') + '）'">
                        <el-input-number v-model="genTierForm.t5_fixed_ccw" :min="0" :max="26" :step="1" controls-position="right" />
                    </el-form-item>
                    <el-form-item :label="t('game.rewardConfigForm.gen_settlement')">
                        <el-input-number :model-value="0" disabled />
                    </el-form-item>
                </div>
                </el-form>
                <div class="gen-tier-footer-hint">{{ t('game.rewardConfigForm.gen_tier_footer_hint') }}</div>
            </el-scrollbar>
            <template #footer>
                <div class="gen-tier-dialog-footer">
                    <el-button @click="genTierDialogVisible = false">{{ t('game.rewardConfigForm.gen_tier_cancel') }}</el-button>
                    <el-button v-auth="'generateTierBoard'" type="primary" :loading="genTierSubmitting" @click="onGenTierSubmit">{{
                        t('game.rewardConfigForm.gen_tier_submit')
                    }}</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useWindowSize } from '@vueuse/core'
import { computed, onMounted, reactive, ref, useTemplateRef, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import { useConfig } from '/@/stores/config'
import { useAdminInfo } from '/@/stores/adminInfo'
import createAxios from '/@/utils/axios'

defineOptions({
    name: 'game/rewardConfig',
})

type RewardRow = {
    grid_number: string
    ui_text: string
    ui_text_en: string
    real_ev: string
    tier: string
    remark: string
}

const { t } = useI18n()
const config = useConfig()
const adminInfo = useAdminInfo()
const { width: windowWidth } = useWindowSize()

/** 生成弹窗：窄屏全屏/宽百分比，宽屏固定最大宽度 */
const genTierDialogFullscreen = computed(() => windowWidth.value <= 520)
const genTierDialogWidth = computed(() => {
    if (windowWidth.value <= 520) {
        return '100%'
    }
    if (windowWidth.value <= 768) {
        return '92%'
    }
    return '720px'
})

const genTierFormLabelPosition = computed(() => (windowWidth.value < 640 ? 'top' : 'right'))
const genTierFormLabelWidth = computed(() => (windowWidth.value < 640 ? 'auto' : '150px'))

const genTierScrollMaxHeight = computed(() => (genTierDialogFullscreen.value ? 'calc(100vh - 140px)' : 'min(70vh, 640px)'))
const formRef = useTemplateRef<FormInstance>('formRef')

const TIER_GRIDS = Array.from({ length: 26 }, (_v, i) => String(i + 5))
const BIGWIN_GRIDS = ['5', '10', '15', '20', '25', '30']

const isSuperAdmin = computed(() => adminInfo.super === true)
const formLabelWidth = computed(() => (config.layout.shrink ? 100 : 140))
const channelRemoteAttr = { pk: 'game_channel.id', field: 'name', remoteUrl: '/admin/game.Channel/index' }

const pageLoading = ref(false)
const submitLoading = ref(false)
const genTierDialogVisible = ref(false)
const genTierSubmitting = ref(false)
const genWeightSubmitting = ref(false)
const channelChangeSilent = ref(false)
const lastAutoLoadChannelId = ref<number | null>(null)

const genTierForm = reactive({
    t1_fixed_cw: 3,
    t1_fixed_ccw: 3,
    t2_min_cw: 5,
    t2_min_ccw: 5,
    t4_fixed_cw: 1,
    t4_fixed_ccw: 1,
    t5_fixed_cw: 1,
    t5_fixed_ccw: 1,
    amt_t1: 3,
    amt_t2: 1.5,
    amt_t3: 0.5,
    amt_t4: -0.4,
})
/** 超管：template = game_channel_id 0 默认模板；channel = 编辑指定渠道 */
const superEditScope = ref<'template' | 'channel'>('template')
/** 仅超管维护「全渠道默认模板」（game_channel_id=0、未绑定具体渠道）时展示顶部说明；渠道管理员或超管选「指定渠道」时不展示 */
const showTemplateIntro = computed(() => isSuperAdmin.value && superEditScope.value === 'template')

const formModel = reactive({
    id: null as number | string | null,
    game_channel_id: 0 as number | string,
    tier_reward_form: '',
    bigwin_form: '',
})

const tierRows = ref<RewardRow[]>(
    TIER_GRIDS.map((g) => ({ grid_number: g, ui_text: '', ui_text_en: '', real_ev: '', tier: 'T1', remark: '' }))
)
const bigwinRows = ref<RewardRow[]>(
    BIGWIN_GRIDS.map((g) => ({ grid_number: g, ui_text: '', ui_text_en: '', real_ev: '', tier: 'BIGWIN', remark: '' }))
)

const showInner = computed(() => {
    if (!isSuperAdmin.value) {
        return true
    }
    if (superEditScope.value === 'template') {
        return true
    }
    return !!formModel.game_channel_id
})

function parseRows(raw: unknown): RewardRow[] {
    if (typeof raw !== 'string' || raw.trim() === '') return []
    try {
        const parsed = JSON.parse(raw) as unknown
        if (!Array.isArray(parsed)) return []
        const out: RewardRow[] = []
        for (const item of parsed) {
            if (item === null || typeof item !== 'object' || Array.isArray(item)) continue
            const obj = item as Record<string, unknown>
            out.push({
                grid_number: String(obj.grid_number ?? ''),
                ui_text: String(obj.ui_text ?? ''),
                ui_text_en: String(obj.ui_text_en ?? ''),
                real_ev: String(obj.real_ev ?? ''),
                tier: String(obj.tier ?? ''),
                remark: String(obj.remark ?? ''),
            })
        }
        return out
    } catch {
        return []
    }
}

function toTierRows(raw: unknown): RewardRow[] {
    const parsed = parseRows(raw)
    const map = new Map<string, RewardRow>()
    for (const r of parsed) map.set(r.grid_number, r)
    return TIER_GRIDS.map((g) => {
        const row = map.get(g)
        return {
            grid_number: g,
            ui_text: row?.ui_text ?? '',
            ui_text_en: row?.ui_text_en ?? '',
            real_ev: row?.real_ev ?? '',
            tier: row?.tier && row.tier !== 'BIGWIN' ? row.tier : 'T1',
            remark: row?.remark ?? '',
        }
    })
}

function toBigwinRows(raw: unknown): RewardRow[] {
    const parsed = parseRows(raw)
    const map = new Map<string, RewardRow>()
    for (const r of parsed) map.set(r.grid_number, r)
    return BIGWIN_GRIDS.map((g) => {
        const row = map.get(g)
        return {
            grid_number: g,
            ui_text: row?.ui_text ?? '',
            ui_text_en: row?.ui_text_en ?? '',
            real_ev: row?.real_ev ?? '',
            tier: 'BIGWIN',
            remark: row?.remark ?? '',
        }
    })
}

function syncPayload() {
    formModel.tier_reward_form = JSON.stringify(tierRows.value)
    formModel.bigwin_form = JSON.stringify(bigwinRows.value)
}

function applyRowToForm(row: Record<string, unknown>) {
    channelChangeSilent.value = true
    formModel.id = (row.id as number | string | null | undefined) ?? null
    formModel.game_channel_id = (row.game_channel_id as number | string) ?? 0
    tierRows.value = toTierRows(row.tier_reward_form)
    bigwinRows.value = toBigwinRows(row.bigwin_form)
    syncPayload()
    channelChangeSilent.value = false
}

function validateForms(): string | undefined {
    if (tierRows.value.length !== 26 || bigwinRows.value.length !== 6) {
        return t('Parameter error')
    }
    for (let i = 0; i < tierRows.value.length; i++) {
        const row = tierRows.value[i]
        if (row.grid_number !== TIER_GRIDS[i]) return t('Parameter error')
        if (row.ui_text.trim() === '' || row.real_ev.trim() === '') return t('Please input field', { field: t('game.rewardConfig.ui_text') })
        if (!Number.isFinite(Number(row.real_ev))) return t('game.rewardConfig.real_ev')
        if (!['T1', 'T2', 'T3', 'T4', 'T5'].includes(row.tier)) return t('Parameter error')
    }
    for (let i = 0; i < bigwinRows.value.length; i++) {
        const row = bigwinRows.value[i]
        if (row.grid_number !== BIGWIN_GRIDS[i]) return t('Parameter error')
        if (row.tier !== 'BIGWIN') return t('Parameter error')
        if (row.ui_text.trim() === '' || row.real_ev.trim() === '') return t('Please input field', { field: t('game.rewardConfig.ui_text') })
        if (!Number.isFinite(Number(row.real_ev))) return t('game.rewardConfig.real_ev')
    }
    return undefined
}

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    game_channel_id: [
        {
            validator: (_rule, _val, callback) => {
                if (!isSuperAdmin.value || superEditScope.value !== 'channel') {
                    callback()
                    return
                }
                if (!_val && _val !== 0) {
                    callback(new Error(t('Please select field', { field: t('game.rewardConfig.game_channel_id') })))
                    return
                }
                if (_val === 0 || _val === '0') {
                    callback(new Error(t('Please select field', { field: t('game.rewardConfig.game_channel_id') })))
                    return
                }
                callback()
            },
            trigger: ['change', 'blur'],
        },
    ],
    tier_reward_form: [
        {
            validator: (_rule, _val, callback) => {
                const err = validateForms()
                if (err) return callback(new Error(err))
                callback()
            },
            trigger: ['blur', 'change'],
        },
    ],
    bigwin_form: [
        {
            validator: (_rule, _val, callback) => {
                const err = validateForms()
                if (err) return callback(new Error(err))
                callback()
            },
            trigger: ['blur', 'change'],
        },
    ],
})

function resolveRequestChannelId(): number | null {
    if (!isSuperAdmin.value) {
        return null
    }
    if (superEditScope.value === 'template') {
        return 0
    }
    const v = formModel.game_channel_id
    if (!v && v !== 0) return null
    const n = Number(v)
    if (!Number.isFinite(n) || n <= 0) return null
    return n
}

async function loadData() {
    if (isSuperAdmin.value && superEditScope.value === 'channel' && !formModel.game_channel_id) {
        return
    }
    pageLoading.value = true
    try {
        const params: Record<string, number> = {}
        const cid = resolveRequestChannelId()
        if (cid !== null) {
            params.game_channel_id = cid
        }
        const res = await createAxios<{ row?: Record<string, unknown> }>(
            {
                url: '/admin/game.RewardConfig/index',
                method: 'get',
                params,
            },
            { showErrorMessage: true, loading: false }
        )
        const row = res.data?.row
        if (row && typeof row === 'object' && !Array.isArray(row)) {
            applyRowToForm(row as Record<string, unknown>)
        }
    } catch (error: unknown) {
        const err = error as { code?: string; message?: string }
        if (err.code === 'ERR_CANCELED' || String(err.message ?? '').toLowerCase().includes('canceled')) {
            return
        }
    } finally {
        pageLoading.value = false
    }
}

function onSuperScopeChange(val: string | number | boolean | undefined) {
    if (val === 'template') {
        formModel.game_channel_id = 0
        loadData()
    } else {
        formModel.game_channel_id = ''
        lastAutoLoadChannelId.value = null
        formRef.value?.clearValidate(['game_channel_id'])
    }
}

async function onSubmit() {
    const form = formRef.value
    if (!form) return
    syncPayload()
    await form.validate(async (valid) => {
        if (!valid) return
        submitLoading.value = true
        try {
            const body: Record<string, string | number> = {
                tier_reward_form: formModel.tier_reward_form,
                bigwin_form: formModel.bigwin_form,
            }
            const cid = resolveRequestChannelId()
            if (cid !== null) {
                body.game_channel_id = cid
            }
            await createAxios(
                {
                    url: '/admin/game.RewardConfig/save',
                    method: 'post',
                    data: body,
                },
                { showSuccessMessage: true, loading: false }
            )
            await loadData()
        } finally {
            submitLoading.value = false
        }
    })
}

async function onReset() {
    formRef.value?.clearValidate()
    await loadData()
}

function openGenTierDialog() {
    genTierDialogVisible.value = true
}

async function onGenTierSubmit() {
    genTierSubmitting.value = true
    try {
        const body: Record<string, string | number> = {
            t1_fixed_cw: genTierForm.t1_fixed_cw,
            t1_fixed_ccw: genTierForm.t1_fixed_ccw,
            t2_min_cw: genTierForm.t2_min_cw,
            t2_min_ccw: genTierForm.t2_min_ccw,
            t4_fixed_cw: genTierForm.t4_fixed_cw,
            t4_fixed_ccw: genTierForm.t4_fixed_ccw,
            t5_fixed_cw: genTierForm.t5_fixed_cw,
            t5_fixed_ccw: genTierForm.t5_fixed_ccw,
            amt_t1: genTierForm.amt_t1,
            amt_t2: genTierForm.amt_t2,
            amt_t3: genTierForm.amt_t3,
            amt_t4: genTierForm.amt_t4,
        }
        const cid = resolveRequestChannelId()
        if (cid !== null) {
            body.game_channel_id = cid
        }
        await createAxios(
            {
                url: '/admin/game.RewardConfig/generateTierBoard',
                method: 'post',
                data: body,
            },
            { showSuccessMessage: true, loading: false }
        )
        genTierDialogVisible.value = false
        await loadData()
    } finally {
        genTierSubmitting.value = false
    }
}

async function onGenWeightClick() {
    if (isSuperAdmin.value && superEditScope.value === 'channel' && !formModel.game_channel_id) {
        ElMessage.warning(t('game.rewardConfigForm.gen_weight_need_channel'))
        return
    }
    try {
        await ElMessageBox.confirm(
            t('game.rewardConfigForm.gen_weight_confirm_body'),
            t('game.rewardConfigForm.gen_weight_confirm_title'),
            {
                type: 'warning',
                confirmButtonText: t('game.rewardConfigForm.gen_weight_confirm_ok'),
                cancelButtonText: t('Cancel'),
            }
        )
    } catch {
        return
    }
    genWeightSubmitting.value = true
    try {
        const body: Record<string, number> = {}
        const cid = resolveRequestChannelId()
        if (cid !== null) {
            body.game_channel_id = cid
        }
        await createAxios(
            {
                url: '/admin/game.RewardConfig/generateRewardWeight',
                method: 'post',
                data: body,
            },
            { showSuccessMessage: true, loading: false }
        )
    } finally {
        genWeightSubmitting.value = false
    }
}

onMounted(() => {
    if (isSuperAdmin.value) {
        superEditScope.value = 'template'
        formModel.game_channel_id = 0
        loadData()
    } else {
        loadData()
    }
})

watch(
    () => formModel.game_channel_id,
    (val, oldVal) => {
        if (!isSuperAdmin.value || superEditScope.value !== 'channel') {
            return
        }
        if (channelChangeSilent.value) {
            return
        }
        const nextCid = Number(val)
        const prevCid = Number(oldVal)
        if (Number.isFinite(nextCid) && Number.isFinite(prevCid) && nextCid === prevCid) {
            return
        }
        if (!Number.isFinite(nextCid) || nextCid <= 0) {
            return
        }
        if (lastAutoLoadChannelId.value === nextCid) {
            return
        }
        lastAutoLoadChannelId.value = nextCid
        void loadData()
    }
)
</script>

<style scoped lang="scss">
.reward-form-card {
    max-width: 1280px;
}
.card-title {
    font-weight: 600;
}
.intro-alert {
    margin-bottom: 16px;
}
.scope-hint {
    margin-bottom: 12px;
}
.channel-bar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.channel-picker {
    flex: 1 1 360px;
    min-width: 320px;
    max-width: 520px;
}
.channel-picker :deep(.el-form-item) {
    margin-bottom: 0;
}
.channel-picker :deep(.el-select) {
    width: 100%;
}
.reward-form-body {
    margin-top: 8px;
}
.block-editor {
    width: 100%;
}
.tier-editor .line {
    display: grid;
    grid-template-columns: 64px minmax(88px, 1fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(96px, 110px) minmax(124px, 1fr);
    column-gap: 10px;
    row-gap: 8px;
    margin-bottom: 8px;
}
.bigwin-editor .line {
    display: grid;
    grid-template-columns: 110px 1fr 1fr 120px;
    gap: 8px;
    margin-bottom: 8px;
}
.line-head {
    margin-bottom: 6px;
    color: var(--el-text-color-secondary);
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
}
.form-help {
    margin-top: 6px;
    color: var(--el-text-color-secondary);
    font-size: 12px;
}

@media (max-width: 768px) {
    .reward-form-card :deep(.el-card__body) {
        padding: 12px 10px;
    }
    .reward-form-body :deep(.el-form-item) {
        margin-bottom: 12px;
    }
    .channel-picker {
        min-width: 100%;
        max-width: 100%;
    }
    .channel-bar {
        gap: 8px;
        margin-bottom: 10px;
    }
    .channel-bar > .el-button {
        width: 100%;
    }

    /* 移动端主配置表：保持列宽，允许左右滚动，避免被压扁 */
    .tier-editor,
    .bigwin-editor {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .tier-editor .line {
        min-width: 820px;
        grid-template-columns: 48px 80px 80px 80px 100px 130px;
        column-gap: 10px;
        row-gap: 8px;
    }
    .bigwin-editor .line {
        min-width: 560px;
        grid-template-columns: 48px 80px 80px 100px;
    }
    .line-head {
        font-size: 11px;
        line-height: 16px;
    }

    .reward-form-body :deep(.el-form-item:last-child .el-form-item__content) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .reward-form-body :deep(.el-form-item:last-child .el-button) {
        flex: 1 1 calc(50% - 8px);
        min-width: 128px;
        margin-left: 0;
    }
}
</style>

<!-- 弹窗 append-to-body 后不在当前组件 DOM 内，scoped 样式无法作用，单独写全局选择器 -->
<style lang="scss">
.gen-tier-dialog.el-dialog {
    box-sizing: border-box;
    max-width: 100vw;
}

.gen-tier-dialog .el-dialog__header {
    padding: 12px 14px;
    margin-right: 0;
}

.gen-tier-dialog .el-dialog__body {
    padding: 8px 12px 12px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.gen-tier-dialog .el-dialog__footer {
    padding: 10px 12px 14px;
}

.gen-tier-dialog .gen-tier-scroll {
    padding-right: 4px;
}

.gen-tier-dialog .gen-rule {
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--el-fill-color-light);
    padding: 12px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--el-text-color-regular);
}

.gen-tier-dialog .gen-tier-block {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--el-border-color-lighter);
}

.gen-tier-dialog .gen-tier-block:last-of-type {
    border-bottom: none;
}

.gen-tier-dialog .gen-tier-block-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--el-text-color-primary);
    font-size: 14px;
}

.gen-tier-dialog .gen-tier-form .el-form-item {
    margin-bottom: 14px;
}

.gen-tier-dialog .gen-tier-form.el-form--label-top .el-form-item__label {
    line-height: 1.4;
    margin-bottom: 6px;
    height: auto;
    white-space: normal;
    word-break: break-word;
}

.gen-tier-dialog .gen-tier-form .el-input-number {
    width: 100%;
    max-width: 320px;
}

.gen-tier-dialog .gen-tier-footer-hint {
    margin-top: 4px;
    padding: 0 2px 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--el-text-color-secondary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.gen-tier-dialog .gen-tier-dialog-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

@media (max-width: 639px) {
    .gen-tier-dialog .gen-tier-form .el-input-number {
        max-width: none;
    }
}
</style>
