<template>
    <ele-page flex-table>
        <ele-card flex-table header="访问限制规则">
            <el-form
                ref="formRef"
                style="max-width: 520px"
                :model="form"
                label-width="220px"
            >
                <el-form-item
                    label="每人每日最多扫描"
                    prop="maxEverybodyEverydayScan"
                >
                    <el-input v-model="form.maxEverybodyEveryDayScan">
                        <template #append>次</template>
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="每人每月最多可卖"
                    prop="maxEverybodyEveryMonthNum"
                >
                    <el-input v-model="form.maxEverybodyEveryMonthNum">
                        <template #append>单</template>
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="每人每日最多可卖"
                    prop="maxEverybodyEveryDayNum"
                >
                    <el-input v-model="form.maxEverybodyEveryDayNum">
                        <template #append>单</template>
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="未提交订单每人最多可扫描"
                    prop="maxEverybodyScanUnSubmit"
                >
                    <el-input v-model="form.maxEverybodyScanUnSubmit">
                        <template #append>次</template>
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="单个订单删除本数"
                    prop="maxEverybodyOrderDelete"
                >
                    <el-input v-model="form.maxEverybodyOrderDelete">
                        <template #append>本</template>
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="每人每日最多输入ISBN(次数）"
                    prop="maxEverybodyEveryDayInput"
                >
                    <el-input v-model="form.maxEverybodyEveryDayInput">
                        <template #append>本</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        style="min-width: 100px"
                        type="primary"
                        @click="submitForm(formRef)"
                        v-permission="'recycleLogistics:abnormalSetting:update'"
                    >
                        确认修改
                    </el-button>
                </el-form-item>
            </el-form>
        </ele-card>
    </ele-page>
</template>

<script setup>
    import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
    import { ElMessage } from 'element-plus';

    const { proxy } = getCurrentInstance();
    const formRef = ref(null);
    const form = reactive({
        maxEverybodyEveryDayScan: '',
        maxEverybodyEveryMonthNum: '',
        maxEverybodyEveryDayNum: '',
        maxEverybodyScanUnSubmit: '',
        maxEverybodyOrderDelete: '',
        maxEverybodyEveryDayInput: ''
    });

    // 获取数据
    const fetchData = () => {
        proxy.$http
            .get('/user/userRequestLimit/getSet')
            .then((res) => {
                if (res.data.code === 200) {
                    Object.assign(form, res.data.data);
                }
            })
            .catch((error) => {
                console.error('获取数据失败:', error);
                ElMessage.error('获取数据失败');
            });
    };

    // 提交表单
    const submitForm = (formEl) => {
        if (!formEl) return;
        formEl.validate((valid, fields) => {
            if (valid) {
                proxy.$http
                    .post('/user/userRequestLimit/update', form)
                    .then(() => {
                        ElMessage.success('保存成功');
                    })
                    .catch((error) => {
                        console.error('保存失败:', error);
                        ElMessage.error('保存失败');
                    });
            } else {
                console.log('error submit!', fields);
            }
        });
    };

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