<template>
    <div class="ns-box shadow-lg w-95vw md:w-3/5-screen lg:w-2/5-screen">
        <div class="popup-heading ns-box-header">
            <h3>{{ __( 'Product Price' ) }}</h3>
            <div>
                <ns-close-button @click="popupResolver( false )"></ns-close-button>
            </div>
        </div>
        <div class="flex flex-col ns-box-body">
            <div class="h-16 flex items-center justify-center elevation-surface info font-bold">
                <h2 class="text-2xl">{{ product.unit_price | currency }}</h2>
            </div>
            <ns-numpad v-if="options.ns_pos_numpad === 'default'" :floating="options.ns_pos_allow_decimal_quantities" @changed="updateProductPrice( $event )" @next="resolveProductPrice( $event )" :value="product.unit_price"></ns-numpad>
            <ns-numpad-plus v-if="options.ns_pos_numpad === 'advanced'" @changed="updateProductPrice( $event )" @next="resolveProductPrice( $event )" :value="product.unit_price"></ns-numpad-plus>
        </div>
    </div>
</template>
<script>
import nsNumpad from "@/components/ns-numpad.vue";
import nsNumpadPlus from "@/components/ns-numpad-plus.vue";
export default {
    name: 'ns-pos-product-price-product',
    components: {
        nsNumpad,
        nsNumpadPlus
    },
    computed: {
        // ...
    },
    data() {
        return {
            product: {},
            optionsSubscription: null,
            options: {},
        }
    },
    mounted() {
        this.popupCloser();

        this.product    =   this.$popupParams.product;

        this.optionsSubscription    =   POS.options.subscribe( options => {
            this.options    =   options;
        });
    },
    beforeDestroy() {
        this.optionsSubscription.unsubscribe();
    },
    methods: {
        popupResolver,
        popupCloser,
        __,

        updateProductPrice( price ) {
            this.product.unit_price     =   price;
        },

        resolveProductPrice( price ) {
            this.popupResolver( this.product.unit_price );
        }
    }
}
</script>