<template>
  <div class="notCollect">

    <div  >{{ not_collect.name }}  {{ not_collect.barcodes.length }}</div>
<div class="notCollect__table">
          <div class="notCollect_item"  v-for="(item, index) in not_collect.barcodes">
                    <div>
                     <b>{{ index+1 }}</b>
                    </div>

                    <div class="notCollect__values" v-html="ItemV(item)"></div>

          </div>
  <div class="excess" v-if="excess_collect.excess.length">
  {{ excess_collect.name }}:
      <div class="notCollect_item"  v-for="(item, index) in excess_collect.excess">
        <div>
          <b>{{ index+1 }}</b>
        </div>

        <div class="notCollect__values" v-html="ItemV(item)"></div>

      </div>
  </div>

</div>


  </div>
</template>

<script>
export default {
  name:'CollectBarcodes',
  data() {
    return {}
  },

  props:{
    barcodes_obj:Object,

  },

methods:{


  ItemV(item){

    if(typeof item === 'object'){
      let str='';
      for(const [key, value] of Object.entries(item)) {
        //console.log(key, value);
        str+='<div>'+key+':</div><div>'+value+'</div>';
      }

      return str;
    }else{

      return item;
    }




  }



},


  computed:{

    not_collect(){

      return this.barcodes_obj[0];

    },
    excess_collect(){

      return this.barcodes_obj[1];
    },

  },



}
</script>

<style  scoped>

.notCollect{
  display: flex;
  flex-direction: column;
  gap:20px;
  height:100vh;
  overflow:hidden;
}


.notCollect__table{
  display: flex;
  flex-direction: column;
  gap:10px;
  height:80vh;
  overflow-y: scroll;
  padding: 2px;
  border-radius: 5px;
  border: 1px solid #dadada;
  scrollbar-width:inherit;

}

.notCollect__values{
  display: grid !important;
  grid-template-columns: 120px 1fr  ;
  gap:5px;
}
.notCollect__values >div {
  font-size: 0.7em;
}

.notCollect__table::-webkit-scrollbar {
  width: 20px;
}
.notCollect_item{
  background: #f8f7f7;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #dadada;
  display: grid;
  grid-template-columns: 30px 1fr  ;

}

.notCollect_item > div{
  display: flex;
  align-items: center;
  font-size: 0.8em;
}


</style>