<template>
    <div class="default-main ba-table-box">
        <MallPageIntro page-key="playxConfig" />

        <el-alert class="ba-table-alert" v-if="remark" :title="remark" type="info" show-icon />

        <el-card shadow="never" v-loading="loading">
            <el-form
                v-if="!loading"
                ref="formRef"
                :model="form"
                :rules="rules"
                label-position="top"
                @submit.prevent=""
                @keyup.enter="onSubmit()"
            >
                <el-form-item :label="t('mall.playxConfig.return_ratio')" prop="return_ratio">
                    <el-input-number
                        v-model="form.return_ratio"
                        :min="0"
                        :max="100"
                        :step="0.01"
                        :precision="2"
                        controls-position="right"
                        class="w100"
                    />
                    <div class="form-tip">{{ t('mall.playxConfig.return_ratio_tip') }}</div>
                </el-form-item>
                <el-form-item :label="t('mall.playxConfig.unlock_ratio')" prop="unlock_ratio">
                    <el-input-number
                        v-model="form.unlock_ratio"
                        :min="0"
                        :max="100"
                        :step="0.01"
                        :precision="2"
                        controls-position="right"
                        class="w100"
                    />
                    <div class="form-tip">{{ t('mall.playxConfig.unlock_ratio_tip') }}</div>
                </el-form-item>
                <el-form-item :label="t('mall.playxConfig.points_to_cash_ratio')" prop="points_to_cash_ratio">
                    <el-input-number
                        v-model="form.points_to_cash_ratio"
                        :min="0"
                        :max="100"
                        :step="0.01"
                        :precision="2"
                        controls-position="right"
                        class="w100"
                    />
                    <div class="form-tip">{{ t('mall.playxConfig.points_to_cash_ratio_tip') }}</div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="submitting" @click="onSubmit()">{{ t('Save') }}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { onMounted, reactive, ref, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import { index, save } from '/@/api/backend/mall/playxConfig'
import MallPageIntro from '/@/components/mall/MallPageIntro.vue'

defineOptions({
    name: 'mall/playxConfig',
})

const { t } = useI18n()
const formRef = useTemplateRef<FormInstance>('formRef')
const loading = ref(true)
const submitting = ref(false)
const remark = ref('')

const form = reactive({
    return_ratio: 0.1,
    unlock_ratio: 0.1,
    points_to_cash_ratio: 0.1,
})

const rules: FormRules = {
    return_ratio: [{ required: true, message: t('Please input field', { field: t('mall.playxConfig.return_ratio') }) }],
    unlock_ratio: [{ required: true, message: t('Please input field', { field: t('mall.playxConfig.unlock_ratio') }) }],
    points_to_cash_ratio: [{ required: true, message: t('Please input field', { field: t('mall.playxConfig.points_to_cash_ratio') }) }],
}

const loadData = () => {
    loading.value = true
    index()
        .then((res) => {
            remark.value = res.data.remark ?? ''
            const row = res.data.row ?? {}
            if (row.return_ratio !== undefined && row.return_ratio !== null) {
                form.return_ratio = parseFloat(String(row.return_ratio))
            }
            if (row.unlock_ratio !== undefined && row.unlock_ratio !== null) {
                form.unlock_ratio = parseFloat(String(row.unlock_ratio))
            }
            if (row.points_to_cash_ratio !== undefined && row.points_to_cash_ratio !== null) {
                form.points_to_cash_ratio = parseFloat(String(row.points_to_cash_ratio))
            }
        })
        .finally(() => {
            loading.value = false
        })
}

const onSubmit = () => {
    formRef.value?.validate((valid) => {
        if (!valid) return
        submitting.value = true
        save({
            return_ratio: form.return_ratio,
            unlock_ratio: form.unlock_ratio,
            points_to_cash_ratio: form.points_to_cash_ratio,
        })
            .then(() => {
                loadData()
            })
            .finally(() => {
                submitting.value = false
            })
    })
}

onMounted(() => {
    loadData()
})
</script>

<style scoped lang="scss">
.w100 {
    width: 100%;
}
.form-tip {
    margin-top: 6px;
    font-size: 12px;
    color: var(--el-text-color-secondary);
    line-height: 1.5;
}
</style>
