<template>
    <el-container>
        <el-main>
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
                <el-form-item :label="t('modules.payment.amount')" prop="amount">
                    <el-input-number v-model="form.amount" :min="1" :max="999999999" :precision="0" style="width: 100%"
                        :placeholder="t('modules.payment.enterAmount')" />
                </el-form-item>
                <el-form-item :label="t('common.status')" prop="status">
                    <el-select v-model="form.status" style="width: 100%" :placeholder="t('common.select')">
                        <el-option :label="t('common.enabled')" :value="1" />
                        <el-option :label="t('common.disabled')" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="t('modules.payment.sortNum')" prop="sortNum">
                    <el-input-number v-model="form.sortNum" :min="0" :max="999" :precision="0" style="width: 100%"
                        :placeholder="t('modules.payment.enterSortNum')" />
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer class="sa-footer--submit">
            <el-button v-if="modal.params.type == 'add'" type="primary" @click="confirm">
                {{ t('common.save') }}
            </el-button>
            <el-button v-if="modal.params.type == 'edit'" type="primary" @click="confirm">
                {{ t('common.update') }}
            </el-button>
        </el-footer>
    </el-container>
</template>

<script setup>
import { ref, reactive, onMounted, unref } from 'vue';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { cloneDeep } from 'lodash';
import api from '../../../api';

const { t } = useI18n();

const emit = defineEmits(['modalCallBack']);
const props = defineProps({
    modal: {
        type: Object,
        required: true,
    },
});

const formRef = ref();
const form = reactive({
    id: null,
    amount: null,
    status: 1,
    sortNum: 0,
    methodId: null,
});

const rules = reactive({
    amount: [
        { required: true, message: t('modules.payment.amountRequired'), trigger: 'blur' },
        { type: 'number', min: 1, message: t('modules.payment.amountValidation'), trigger: 'blur' },
    ],
    status: [
        { required: true, message: t('modules.payment.statusRequired'), trigger: 'change' },
    ],
    sortNum: [
        { type: 'number', min: 0, max: 999, message: t('modules.payment.sortNumValidation'), trigger: 'blur' },
    ],
});

// 获取详情
async function getDetail(id) {
    try {
        const { code, data } = await api.payment.goods.detail(id);
        if (code == '200' && data) {
            form.id = data.id;
            form.amount = data.amount;
            form.status = data.status;
            form.sortNum = data.sortNum;
            form.methodId = data.methodId;
        }
    } catch (error) {
        console.error('获取商品详情失败:', error);
        ElMessage.error(t('modules.payment.getGoodsDetailFailed'));
    }
}

// 表单提交确认
async function confirm() {
    unref(formRef).validate(async (valid) => {
        if (!valid) return;
        let submitForm = cloneDeep(form);
        const { code } = props.modal.params.type == 'add'
            ? await api.payment.goods.add(submitForm)
            : await api.payment.goods.update(submitForm);
        if (code == '200') {
            ElMessage.success(t('message.saveSuccess'));
            emit('modalCallBack', { event: 'confirm' });
        }
    });
}

// 初始化
async function init() {
    // 设置methodId
    form.methodId = props.modal.params.methodId;

    // 如果是编辑模式且有id，获取详情
    if (props.modal.params.id) {
        await getDetail(props.modal.params.id);
    }
}

onMounted(() => {
    init();
});
</script>

<style lang="scss" scoped>
// 表单样式优化
:deep(.el-form-item) {
    .el-form-item__label {
        font-weight: 500;
        color: var(--el-text-color-regular);
    }

    .el-form-item__content {
        .el-input-number {
            .el-input__inner {
                text-align: left;
            }
        }
    }
}
</style>