<template>
    <ele-page flex-table>
        <ele-card
            flex-table
            header="访问限制规则"
            :body-style="{ overflow: 'auto' }"
        >
            <el-form
                ref="formRef"
                style="max-width: 600px"
                :model="form"
                label-width="220px"
            >
                <div
                    class="font-bold mb-4 text-gray-700 pl-4 border-l-4 border-blue-500"
                    >回收端限制</div
                >
                <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-divider />

                <div
                    class="font-bold mb-4 text-gray-700 pl-4 border-l-4 border-blue-500"
                    >商城端限制</div
                >
                <el-form-item
                    label="每人每日最多搜索次数"
                    prop="maxEverybodyEveryDaySearch"
                >
                    <el-input v-model="form.maxEverybodyEveryDaySearch">
                        <template #append>次</template>
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="每本书限制购买数量(ID限制)"
                    prop="maxEverybodyBookNum"
                >
                    <el-input v-model="form.maxEverybodyBookNum">
                        <template #append>本</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        style="min-width: 100px"
                        type="primary"
                        @click="submitShopForm(formRef)"
                        v-permission="'user:userRequestLimitShop: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: '',
        maxEverybodyEveryDaySearch: '',
        maxEverybodyBookNum: ''
    });

    // 获取数据
    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;
        // Only validate recycle fields if needed, or just validate all
        formEl.validate((valid, fields) => {
            if (valid) {
                // Pick only recycle fields to send? Or send all?
                // Assuming sending all is fine or backend ignores extras.
                // But better to be safe if backend is strict.
                const payload = {
                    maxEverybodyEveryDayScan: form.maxEverybodyEveryDayScan,
                    maxEverybodyEveryMonthNum: form.maxEverybodyEveryMonthNum,
                    maxEverybodyEveryDayNum: form.maxEverybodyEveryDayNum,
                    maxEverybodyScanUnSubmit: form.maxEverybodyScanUnSubmit,
                    maxEverybodyOrderDelete: form.maxEverybodyOrderDelete,
                    maxEverybodyEveryDayInput: form.maxEverybodyEveryDayInput
                };

                proxy.$http
                    .post('/user/userRequestLimit/update', payload)
                    .then(() => {
                        ElMessage.success('回收端配置保存成功');
                    })
                    .catch((error) => {
                        console.error('保存失败:', error);
                        ElMessage.error('保存失败');
                    });
            } else {
                console.log('error submit!', fields);
            }
        });
    };

    // 提交商城端表单
    const submitShopForm = (formEl) => {
        if (!formEl) return;
        formEl.validate((valid, fields) => {
            if (valid) {
                const payload = {
                    maxEverybodyEveryDaySearch: form.maxEverybodyEveryDaySearch,
                    maxEverybodyBookNum: form.maxEverybodyBookNum
                };

                proxy.$http
                    .post('/user/userRequestLimitShop/update', payload)
                    .then(() => {
                        ElMessage.success('商城端配置保存成功');
                    })
                    .catch((error) => {
                        console.error('保存失败:', error);
                        ElMessage.error('保存失败');
                    });
            } else {
                console.log('error submit!', fields);
            }
        });
    };

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