<template>
    <SimpleFormModal
        ref="modalRef"
        :items="formItems"
        :submitHandler="handleSubmit"
        @success="handleSuccess"
        title="规格"
        width="520px"
        labelWidth="100px"
    />
</template>

<script setup>
    import { ref, computed } from 'vue';
    import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
    import request from '@/utils/request';

    const emit = defineEmits(['success']);
    const modalRef = ref(null);

    const formItems = computed(() => [
        {
            label: '规格名称',
            prop: 'conditionName',
            type: 'input',
            required: true,
            attrs: {
                placeholder: '请输入规格名称'
            }
        },
        {
            label: '规格值',
            prop: 'conditionValue',
            type: 'input',
            required: true,
            attrs: {
                placeholder: '请输入规格值'
            }
        },
        {
            label: '是否启用',
            prop: 'status',
            type: 'select',
            options: [
                { label: '关闭', value: '0' },
                { label: '启用', value: '1' }
            ]
        }
    ]);

    const handleOpen = (data) => {
        modalRef.value.handleOpen(data);
    };

    const handleSuccess = (data) => {
        emit('success', data);
    };

    const handleSubmit = (data) => {
        const payload = {
            ...data,
            id: data.id || 0,
            status: String(data.status)
        };

        return request.post('/shop/shopbook/updateConditionType', payload);
    };

    defineExpose({
        handleOpen
    });
</script>
