<template>
    <div class="row align-items-center">
        <div class="col">
            <div class="row bg-white b-a b-grey rounded padding-10" v-if="!isEdit">
                <div class="col">
                    <div class="row align-items-center">
                        <div class="col-auto"><div class="icon-thumbnail icon-35 mr-0 bg-master-lightest light">{{index + 1}}</div></div>
                        <div class="col">
                            <p class="m-b-0 small muted">Name</p>
                            <p class="m-b-0 bold">{{product.name}}</p>
                        </div>
                        <div class="col">
                            <p class="m-b-0 small muted">Unit Price</p>
                            <p class="m-b-0 bold">{{product.price}}</p>
                        </div>
                        <div class="col">
                            <p class="m-b-0 small muted">Quantity</p>
                            <p class="m-b-0 bold">{{product.quantity}}</p>
                        </div>
                        <div class="col">
                            <p class="m-b-0 small muted">Total</p>
                            <p class="m-b-0 bold text-success">{{currency}} {{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2)}}</p>
                        </div>
                        <div class="col-auto" :class="{ 'invisible': ['SHIPPING_FEE', 'OVER_WEIGHT_CHARGES', 'MIN_CBM_CHARGES'].includes(product.reference) }">
                            <div @click="isEdit = !isEdit" class="pointer">
                                <i class="fa fa-pencil" />
                            </div>
                        </div>
                        <div class="col-auto" :class="{ 'invisible': ['SHIPPING_FEE', 'OVER_WEIGHT_CHARGES', 'MIN_CBM_CHARGES'].includes(product.reference) }">
                            <div @click="$emit('remove')" class="pointer">
                                <i class="fa fa-close" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="isEdit">
                <div class="col padding-25 bg-master-lightest">
                    <div class="row">
                        <div class="col">
                            <validation-wrapper-component :validator="$v.product.name">
                                <label>Name</label>
                                <input class="form-control" v-model="product.name">
                            </validation-wrapper-component>
                        </div>
                        <div class="col">
                            <validation-wrapper-component :validator="$v.product.price">
                                <label>Unit Price</label>
                                <input class="form-control" v-model="product.price">
                                <!-- <input class="form-control" v-model="product.price" v-money="{decimal: '.',thousands: '', precision: 2}"> -->
                            </validation-wrapper-component>
                        </div>
                        <div class="col">
                            <validation-wrapper-component :validator="$v.product.quantity">
                                <label>Quantity</label>
                                <!-- <input class="form-control" v-model="product.quantity" v-money="{decimal: '.',thousands: '', precision: 2}"> -->
                                <input class="form-control" v-model="product.quantity" >
                            </validation-wrapper-component>
                        </div>
                    </div>

                    <div class="row m-t-15">
                        <div class="col">
                            <p class="m-b-0 small">Total</p>
                            <h6 class="no-margin bold text-complete">{{currency}} {{productTotal.toFixed(3)}}</h6>
                        </div>
                        <div class="col text-right">
                            <button class="btn btn-lg btn-secondary b-rad-none" @click="cancelUpdate()">Cancel</button>
                            <button class="btn btn-lg btn-outline-success b-rad-none" @click="updateProduct()">Save Changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import formHandler from '../../../general/mixins/formHandler';
    import { required } from "vuelidate/lib/validators";

    export default {
        props: {
            editable: {
                type: Boolean,
                default: false
            },
            currency:{
                type: String,
                required: true
            },
            index:{
                type: Number,
                // required: true
                default: 0
            },
        },
        data(){
            return {
                isEdit: false,
                product: {
                    name: '',
                    quantity: 0,
                    price: 0,
                    amount: 0,
                },
                products: []
            }
        },
        validations: {
            product: {
                name: { required },
                quantity: { required },
                price: { required },
            }
        },
        created() {
            if (this.data) {
                this.product = this.data;
            } else {
                this.isEdit = true;
            }
            this.product.amount = (Math.round((this.product.amount+ Number.EPSILON) * 1000) / 1000).toFixed(3);
        },
        computed: {
            productTotal(){
                return this.product.quantity * parseFloat((this.product.price).toString().replace(',', ''));
            },
        },
        methods: {
            clearInterval(){
                clearInterval(this.interval);
                this.interval = false;
            },
            updateProduct(){
                if (!this.data) {
                    this.$emit('add', {
                        name: this.product.name,
                        quantity: this.product.quantity,
                        reference: 'CUSTOM_CHARGES',
                        price: parseFloat((this.product.price).toString().replace(',', '')),
                        amount: this.productTotal
                    });

                } else {
                    this.isEdit = !this.isEdit;

                    console.log(this.data.reference);

                    this.$emit('change', {
                        name: this.product.name,
                        quantity: this.product.quantity,
                        reference: this.data.reference,
                        price: parseFloat((this.product.price).toString().replace(',', '')),
                        amount: this.productTotal
                    }, this.index);
                }
            },
            cancelUpdate() {
                if (!this.data) {
                    this.$emit('change', 'cancelAddProduct', true);
                } else {
                    this.isEdit = !this.isEdit;
                    this.product = this.data;
                }
            }
        },
        mixins: [formHandler]
    }
</script>
