<!-- 编辑弹窗 -->
<template>
    <ele-modal
        form
        :width="560"
        v-model="visible"
        title="设置独立参数"
        @open="handleOpen"
    >
        <el-form :model="form" ref="formRef" label-width="140px" :rules="rules">
            <el-form-item label="回收折扣" prop="recycleDiscount" required>
                <el-input
                    v-model="form.recycleDiscount"
                    @input="handleChange"
                />
            </el-form-item>
            <el-form-item label="最大回收数量" prop="recycleMax" required>
                <el-input v-model="form.recycleMax" @input="handleChange" />
            </el-form-item>
            <el-form-item
                label="单个订单回收数量"
                prop="recycleMaxPerOrder"
                required
            >
                <el-input
                    v-model="form.recycleMaxPerOrder"
                    @input="handleChange"
                />
            </el-form-item>
            <el-form-item label="状态" prop="settingStatus" required>
                <el-radio-group v-model="form.settingStatus">
                    <template v-for="item in dictData" :key="item.dictValue">
                        <el-radio :label="item.dictValue">{{
                            item.dictLabel
                        }}</el-radio>
                    </template>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="handleCancel">关闭</el-button>
            <el-button type="primary" @click="handleSumbit">确定</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, nextTick } from 'vue';
    import validators from '@/utils/validators';
    import request from '@/utils/request';
    import { useDictData } from '@/utils/use-dict-data';

    /** 弹窗是否打开 */
    const visible = defineModel({ type: Boolean });

    /** 字典数据 */
    const [dictData] = useDictData(['discount_status']);

    /** 关闭弹窗 */
    const handleCancel = () => {
        visible.value = false;
        nextTick(() => {
            formRef.value?.resetFields();
        });
    };

    // 监听输入框的值变化，改成状态为有效
    function handleChange(value) {
        if (form.settingStatus == '0') {
            form.settingStatus = '1';
        }
    }

    const form = reactive({
        isbn: '',
        recycleDiscount: '',
        recycleMax: '',
        recycleMaxPerOrder: '',
        settingStatus: '1'
    });

    // 表单校验规则
    const rules = {
        recycleDiscount: [
            { required: true, message: '请输入回收折扣', trigger: 'blur' },
            validators.decimalRange10
        ],
        recycleMax: [
            { required: true, message: '请输入最大回收数量', trigger: 'blur' },
            validators.nonNegativeInteger
        ],
        recycleMaxPerOrder: [
            {
                required: true,
                message: '请输入单个订单回收数量',
                trigger: 'blur'
            },
            validators.nonNegativeInteger
        ],
        settingStatus: [
            { required: true, message: '请选择状态', trigger: 'change' }
        ]
    };

    /** 弹窗打开事件 */
    const handleOpen = (data) => {
        visible.value = true;
        nextTick(() => {
            if (data?.isbn) {
                form.isbn = data.isbn;
                getParams(data.isbn);
            }
        });
    };

    //根据isbn获取参数
    const getParams = (isbn) => {
        request.get(`/book/bookRecycleInfo/getSepSet/${isbn}`).then((res) => {
            let data = res.data.data;
            console.log(data);
            form.recycleDiscount = data.recycleDiscount;
            form.recycleMax = data.recycleMax;
            form.recycleMaxPerOrder = data.recycleMaxPerOrder;
            form.settingStatus = data.settingStatus;
        });
    };

    const formRef = ref();

    const emit = defineEmits(['refresh']);
    const handleSumbit = () => {
        formRef.value?.validate((valid) => {
            if (valid) {
                const data = { ...form };
                request.post('/book/bookRecycleInfo/setSep', data).then(() => {
                    visible.value = false;
                    ElMessage.success('设置成功');
                    emit('refresh');
                });
            }
        });
    };

    defineExpose({
        handleOpen
    });
</script>
