<template>
  <div class="history history_m">

    <div>
      Загруженные Акты

    </div>


            <div v-if="data && loads">
                         <div class="history__table">

                           <div class="table__row" >
                             <div>Код акта</div>
                             <div>Дата</div>
                             <div >К.п./C</div>
                             <div style="margin-left:auto; "></div>
                           </div>

                           <div class="table__row" :class="{Active: item.idoper==this.active_row}" v-for="item in data">
                             <div>{{ item.idoper || 0 }}</div>
                             <div>{{ item.date_q }}</div>
                             <div >{{  infoBarcodes(item) }} / {{ collect(item) }}</div>
                             <div style="margin-left:auto; "><my-button @click="selectAct(item.idoper)" class="btn">выбор</my-button></div>
                           </div>


                         </div>
            </div>
            <div class="info_" v-else-if="!loads" >
              идет загрузка ...

            </div>
            <div class="info_" v-else >
              нет загруженных актов

            </div>

            <div v-if="data && !data.length && loads">
              Нет ни одного загруженного акта, войдите в "Загрузка"
            </div>

              <div class="error_downloads" v-if="error">

                <div>
                  <b>Ошибка:</b>
                </div>

                <div>
                  {{ error_text }}

                </div>


              </div>




  </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex'
import UAParser from 'ua-parser-js';
export default {
  name:'History',
  data() {
     return {
       data:null,
       active_row: localStorage.id || null,
       loads:false,
       error:false,
       error_text:'',

     }
  },

  computed: {
    ...mapState({
      kag: state => state.ApiClass.kag,
    }),





  },


methods:{

  ...mapActions({

    queryHistory: 'ApiClass/queryHistory',

  }),



  Query(){

    let param={limit:10,kag:this.kag};
    this.loads=false;
    this.queryHistory(param).then(
        (r)=>{
         // console.log(r);
          this.data= r.data;
          this.loads=true;


        }
    ).catch(
        ()=>{
          this.loads=true;
          this.error=true;
          this.error_text='ошибка получения данных';
        }

    );



  },

  selectAct(id){
    //let parser = new UAParser();
    //console.log(parser.getResult());

     localStorage.id = id;
     localStorage.menu = JSON.stringify({id:+id,kag:this.kag.kag});
     this.active_row = id;
  },


  collect(item){
   // if(item.)
   if(!item.data_collect || !item.data_collect.collect || !item.data_collect.collect.length){
     return 0;
   }
    return item.data_collect.collect.length;

  },


  infoBarcodes(item){

    if(!item.data_json || !item.data_json.barcodes){
      return 0;
    }


    return item.data_json.barcodes.length;


  },



},

created(){
  this.Query();


},
mounted(){
  this.loads=false;
  this.error=false;
}


}
</script>

<style  scoped>
.info_{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  color: #112107;
}
.info_m{

  margin-top: 20px;


}
.history{
  display: flex;
  flex-direction: column;
  gap:15px;

}
.history_m{
  margin-top:15px ;

}
.history__table{

}
.Active{
  border:1px solid #727272;

}


.table__row{
  padding: 0px 8px 0px 8px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 70px 70px 85px 1fr ;
  grid-template-rows: 40px;
  gap:10px;

}

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

}


.btn{
  border: 1px solid #9d9d9d;
  border-radius: 5px;
}


</style>