<template>
    <div class="default-main ba-table-box streak-reward-page">
        <el-alert type="info" :closable="false" show-icon>
            {{ t('config.streakWinReward.desc') }}
        </el-alert>

        <div class="toolbar">
            <el-button v-if="canSave" type="success" :loading="saving" :disabled="loading" @click="onSave">
                {{ t('config.streakWinReward.btn_save') }}
            </el-button>
        </div>

        <el-table
            v-loading="loading"
            border
            stripe
            :data="rows"
            max-height="720"
            class="streak-reward-table"
            header-align="center"
        >
            <el-table-column prop="streak" :label="t('config.streakWinReward.streak')" width="110" align="center" header-align="center" />
            <el-table-column :label="t('config.streakWinReward.odds_factor')" min-width="200" align="center" header-align="center">
                <template #default="{ row }">
                    <div class="cell-center">
                        <el-input-number v-model="row.odds_factor" :min="1" :max="999" :step="1" :controls="true" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column :label="t('config.streakWinReward.is_jackpot')" min-width="90" align="center" header-align="center">
                <template #default="{ row }">
                    <div class="cell-center">
                        <el-switch v-model="row.is_jackpot" />
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import createAxios from '/@/utils/axios'
import { auth } from '/@/utils/common'

defineOptions({
    name: 'config/streakWinReward',
})

const { t } = useI18n()
const canSave = auth('save')

type Row = {
    streak: number
    odds_factor: number
    is_jackpot: boolean
}

const loading = ref(false)
const saving = ref(false)
const rows = ref<Row[]>([])

async function load() {
    loading.value = true
    try {
        const res = await createAxios({
            url: '/admin/config.StreakWinReward/index',
            method: 'get',
        })
        if (res.code === 1 && res.data && Array.isArray(res.data.rows)) {
            rows.value = res.data.rows.map((r: Row) => ({
                streak: typeof r.streak === 'number' ? r.streak : 1,
                odds_factor: typeof r.odds_factor === 'number' ? r.odds_factor : 1,
                is_jackpot: !!r.is_jackpot,
            }))
        }
    } finally {
        loading.value = false
    }
}

async function onSave() {
    if (!auth('save')) {
        return
    }
    for (let i = 0; i < rows.value.length; i++) {
        const row = rows.value[i]
        if (row.odds_factor < 1) {
            ElMessage.warning(t('config.streakWinReward.err_factor', { no: i + 1 }))
            return
        }
    }
    saving.value = true
    try {
        await createAxios({
            url: '/admin/config.StreakWinReward/save',
            method: 'post',
            data: {
                rows: rows.value.map((r) => ({
                    streak: r.streak,
                    odds_factor: r.odds_factor,
                    is_jackpot: r.is_jackpot,
                })),
            },
            showSuccessMessage: true,
        })
        await load()
    } finally {
        saving.value = false
    }
}

onMounted(() => {
    void load()
})
</script>

<style scoped lang="scss">
.streak-reward-page {
    .toolbar {
        margin: 12px 0;
        display: flex;
        gap: 12px;
    }
}

.streak-reward-table {
    :deep(.el-table__header th),
    :deep(.el-table__body td) {
        text-align: center;
    }
}

.cell-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
</style>
