<template>
    <v-layout column >
        <v-card>
            <v-layout row>
                <v-flex xs12>
                    <v-subheader red--text text--lighten-1> BARCODE</v-subheader>
                    <v-divider></v-divider>
                    <v-layout row wrap>
                        <v-flex xs12 pt-2 pl-4 pr-4 pb-4>
                            <table>
                                <tr>
                                    <th style="text-align:center" width="5%">#</th>
                                    <th style="text-align:center"  width="30%">JENIS</th>
                                    <th style="text-align:center"   width="60%">NOMOR</th>
                                    <th style="text-align:center"  width="10%">QTY</th>
                                </tr>
                                <tr>
                                    <td class="mini-input" style="text-align:center;vertical-align:center;" align="center">
                                        <v-checkbox class="pa-0" ></v-checkbox>
                                    </td>
                                    <td>Serum</td>
                                    <td style="text-align:center">1212121281291</td>
                                    <td>
                                       <input type="text" class="fhm-input"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="mini-input" style="text-align:center;vertical-align:center;" align="center">
                                        <v-checkbox class="pa-0" ></v-checkbox>
                                    </td>
                                    <td>Serum</td>
                                    <td style="text-align:center">1212121281291</td>
                                    <td>
                                       <input type="text" class="fhm-input"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="mini-input" style="text-align:center;vertical-align:center;" align="center">
                                        <v-checkbox class="pa-0" ></v-checkbox>
                                    </td>
                                    <td>Serum</td>
                                    <td style="text-align:center">1212121281291</td>
                                    <td>
                                       <input type="text" class="fhm-input"/>
                                    </td>
                                </tr>
                            </table>
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-flex>          
        </v-card>
    </v-layout>
</template>

<style scoped>
table, td, th {  
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 5px;
}

.mini-input .v-input{
    margin-top: 0px; 
}

.mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
    margin-top: 0px; 
    margin-bottom:0px;
    margin-left:3px;
}
.mini-input .v-messages{
    min-height:0px;
}
input.fhm-input{
    border: 1px solid black; 
    border-radius: 2px;
    -webkit-box-shadow: 
      inset 0 0 2px  rgba(0,0,0,0.1),
            0 0 4px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 2px  rgba(0,0,0,0.1),
            0 0 4px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 2px  rgba(0,0,0,0.1),
            0 0 4px rgba(0,0,0,0.1); 
    padding: 2px 4px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 1px 0;
    width:30px;
    text-align:center;
}
</style>

<script>
module.exports = {
	components : {
        'one-field-verification-supply' : httpVueLoader('../../common/oneFieldVerificationSupply.vue')
    },
    data () {
        return {
            
        }
    },
   methods: {
        emailChange : function(val) {
            console.log(val);
        }
  },
    computed : {
        _email () {
            return this.$data._email;
        }
    }
}
</script>
