<script setup>
import ItemProposal from './ItemProposal.vue';
import { useDialogPluginComponent } from 'quasar';
const $props = defineProps({
    itemLack: {
        type: Object,
        required: true,
        default: () => {},
    },
    filter: {
        type: Object,
        required: true,
        default: () => {},
    },
    replaceAction: {
        type: Boolean,
        required: false,
        default: false,
    },
    sales: {
        type: Array,
        required: false,
        default: () => [],
    },
});

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
    useDialogPluginComponent();
const emit = defineEmits([
    'onDialogClosed',
    'onDialogOk',
    'itemReplaced',
    ...useDialogPluginComponent.emits,
]);
defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
const itemReplaced = (data) => {
    onDialogOK(data);
    dialogRef.value.hide();
};
</script>
<template>
    <QDialog ref="dialogRef" transition-show="scale" transition-hide="scale">
        <QCard class="dialog-width">
            <QCardSection class="row items-center q-pb-none">
                <span class="text-h6 text-grey" v-text="$t('itemProposal')" />
                <QSpace />
                <QBtn icon="close" flat round dense v-close-popup />
            </QCardSection>
            <QCardSection>
                <ItemProposal v-bind="$props" @item-replaced="itemReplaced"
            /></QCardSection>
        </QCard>
    </QDialog>
</template>
<style lang="scss" scoped>
.dialog-width {
    max-width: $width-lg;
}
</style>
