<template>
    <w-title title="enter Each bottle details" :class="{'hidden': bottles.length == 0}"/>
    <div class="w-full mb-8  px-4" :class="{'hidden': bottles.length == 0}">
        <table class="w-full rounded-sm overflow-hidden shadow-lg">
            <thead>
                <tr>
                    <th >#</th>
                    <th align="left">Net Weight</th>
                    <th align="left">Bottle Weight</th>
                    <th align="left">Gross Weight</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="(bottle , k) in bottles" :key="k">
                    <td class="slno">
                        {{ k + 1 }}
                    </td>
                    <td>
                        <input type="number" class="w-full" @change="updateInput(k)" v-model="bottle.net_weight"/>
                    </td>
                    <td>
                        <input type="number" class="w-full" @change="updateInput(k)" v-model="bottle.bottle_wight"/>
                    </td>
                    <td>
                        <input type="number" class="w-full bg-gray-50" readonly   v-model="bottle.gross_weight"/>
                    </td>
                </tr>
            </tbody>
    </table>
    </div>

</template>


<script>
import WTitle from "@/components/Form/SectionTitle.vue"

export default {
    props:{
        bottles:{
            defualt:0
        }
    },

    components:{
        WTitle
    },

    data(){
        return{
            entry :[]
        }
    },

    methods:{
        updateInput(k) {
            this.bottles[k].gross_weight = parseFloat(this.bottles[k].net_weight) - parseFloat(this.bottles[k].bottle_wight)
        },
    }


}
</script>


<style scoped>
    td{
        padding: 0px;
    }
    .slno{
        border: 2px solid #d3d3d3;
        border-right: 0.5px;
        background: rgb(190, 190, 190);
        padding: 3px;

    }

    th{
        border: 1px solid #d3d3d3;
        border-bottom: 0px;
        background: rgb(107, 107, 107);
        padding: 5px 8px;
        color:rgba(255, 255, 255, 0.801)
    }

    input{
        border: 0.5px solid #d3d3d3;
    }
</style>
