<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-divider content-position="left">{{ t('mall.playxConfig.section_daily_source') }}</el-divider>
                <el-form-item :label="t('mall.playxConfig.daily_points_enabled')" prop="daily_points_enabled">
                    <el-switch v-model="form.daily_points_enabled" />
                    <div class="form-tip">{{ t('mall.playxConfig.daily_points_enabled_tip') }}</div>
                </el-form-item>
                <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"
                        :disabled="!form.daily_points_enabled"
                    />
                    <div class="form-tip">{{ t('mall.playxConfig.return_ratio_tip') }}</div>
                </el-form-item>

                <el-divider content-position="left">{{ t('mall.playxConfig.section_lifetime_source') }}</el-divider>
                <el-form-item :label="t('mall.playxConfig.lifetime_points_enabled')" prop="lifetime_points_enabled">
                    <el-switch v-model="form.lifetime_points_enabled" />
                    <div class="form-tip">{{ t('mall.playxConfig.lifetime_points_enabled_tip') }}</div>
                </el-form-item>
                <el-form-item :label="t('mall.playxConfig.lifetime_points_ratio')" prop="lifetime_points_ratio">
                    <el-input-number
                        v-model="form.lifetime_points_ratio"
                        :min="0"
                        :max="100"
                        :step="0.01"
                        :precision="2"
                        controls-position="right"
                        class="w100"
                        :disabled="!form.lifetime_points_enabled"
                    />
                    <div class="form-tip">{{ t('mall.playxConfig.lifetime_points_ratio_tip') }}</div>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="warning"
                        :loading="calculating"
                        :disabled="!form.lifetime_points_enabled"
                        @click="onCalculateLifetime()"
                    >
                        {{ t('mall.playxConfig.calculate_lifetime_btn') }}
                    </el-button>
                    <div class="form-tip">{{ t('mall.playxConfig.calculate_lifetime_tip') }}</div>
                </el-form-item>

                <el-divider content-position="left">{{ t('mall.playxConfig.section_mall_open') }}</el-divider>
                <el-form-item :label="t('mall.playxConfig.mall_open_date')" prop="mall_open_date">
                    <el-date-picker
                        v-model="form.mall_open_date"
                        type="date"
                        value-format="YYYY-MM-DD"
                        class="w100"
                        :placeholder="t('Please select field', { field: t('mall.playxConfig.mall_open_date') })"
                    />
                    <div class="form-tip">{{ t('mall.playxConfig.mall_open_date_tip') }}</div>
                    <div v-if="activeMallOpenDate" class="form-tip">
                        {{ t('mall.playxConfig.active_mall_open_date') }}：{{ activeMallOpenDate }}
                    </div>
                </el-form-item>

                <el-divider content-position="left">{{ t('mall.playxConfig.section_other') }}</el-divider>
                <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 { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import { calculateLifetimePoints, 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 calculating = ref(false)
const remark = ref('')
const activeMallOpenDate = ref('')

const form = reactive({
    return_ratio: 0.1,
    unlock_ratio: 0.1,
    points_to_cash_ratio: 0.1,
    daily_points_enabled: true,
    lifetime_points_enabled: false,
    lifetime_points_ratio: 0.1,
    mall_open_date: '' as string | null,
})

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') }) }],
    lifetime_points_ratio: [{ required: true, message: t('Please input field', { field: t('mall.playxConfig.lifetime_points_ratio') }) }],
}

const loadData = () => {
    loading.value = true
    index()
        .then((res) => {
            remark.value = res.data.remark ?? ''
            const row = res.data.row ?? {}
            activeMallOpenDate.value = row.active_mall_open_date ?? ''
            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))
            }
            form.daily_points_enabled = Number(row.daily_points_enabled ?? 1) === 1
            form.lifetime_points_enabled = Number(row.lifetime_points_enabled ?? 0) === 1
            if (row.lifetime_points_ratio !== undefined && row.lifetime_points_ratio !== null) {
                form.lifetime_points_ratio = parseFloat(String(row.lifetime_points_ratio))
            }
            form.mall_open_date = row.mall_open_date ? String(row.mall_open_date).slice(0, 10) : null
        })
        .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,
            daily_points_enabled: form.daily_points_enabled ? 1 : 0,
            lifetime_points_enabled: form.lifetime_points_enabled ? 1 : 0,
            lifetime_points_ratio: form.lifetime_points_ratio,
            mall_open_date: form.mall_open_date || null,
        })
            .then(() => {
                loadData()
            })
            .finally(() => {
                submitting.value = false
            })
    })
}

const onCalculateLifetime = () => {
    ElMessageBox.confirm(t('mall.playxConfig.calculate_lifetime_confirm'), t('Reminder'), {
        type: 'warning',
    }).then(() => {
        calculating.value = true
        calculateLifetimePoints()
            .then((res) => {
                const stats = res.data ?? {}
                ElMessage.success(
                    t('mall.playxConfig.calculate_lifetime_success', {
                        processed: stats.processed ?? 0,
                        updated: stats.updated ?? 0,
                        skipped: stats.skipped ?? 0,
                    })
                )
                loadData()
            })
            .finally(() => {
                calculating.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>
