<template>
  <div class="dl">
    <div>
      Дата: <my-input v-model="date_query" class="input_date" :type_input="'date'"></my-input>
    </div>
    <div>
      <my-button @click="Query" >Загрузить</my-button>
    </div>

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

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

      <div  v-html="error_downloads.text">


      </div>


      <div>
        {{ error_downloads.post_data }}

      </div>


    </div>
    <div v-else>
      <result-downloads v-if="data_oper"  :data="data_oper"   :date_query="date_query"></result-downloads>
    </div>






  </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex'
import ResultDownloads from "./resultDownloads.vue";
export default {
  name:'downloads',
  components: {ResultDownloads},
  data() {
     return {
        date_query:null,
        data_oper:null,
        error_downloads: {text:null,post_data:null},
        error:false,
     }
  },
  computed:{
    ...mapState({
      kag: state => state.ApiClass.kag,
      data: state => state.ApiClass.data,
    }),

  },
  methods: {

    ...mapActions({

      queryApi: 'ApiClass/queryApi',

    }),
    ...mapMutations({
      dataSet:'ApiClass/dataSet',


    }),
    Query(){
      //this.kag.firma=this.kag.firma.toString();
      //this.kag.kag=this.kag.kag.toString();
      let param={kag:this.kag, method:'/api/shipment_barcodes/',date_query:this.date_query};
      //console.log(param);
      this.queryApi(param).then(
          (r)=>{
            console.log(r);
            if(typeof r.error!=='undefined' ){
              this.error_downloads={text:r.error, post_data: ''};
              this.error=true;

              return false;
            }

            // if(!r || typeof r.data==='undefined' ){
            //   this.error_downloads={text:'Ошибка данных с сервера api: cервер вернул пустой ответ', post_data: ''};
            //   this.error=true;
            //
            //   return false;
            // }


            if(r.result==0){


              this.error_downloads={text:r.server_error, post_data: r.post_data};
              this.error=true;

            }else{
                       this.error_downloads= null;
                       this.error=false;


                       this.data_oper= r.data_json; //передается массив актов.
                       //добавим сразу, если ничего нет
                       if(!this.data || !this.data.length){
                          localStorage.removeItem('id');
                          this.dataSet(r.data_json);
                       }else{



                         r.data_json.forEach(
                             item=>{
                               //делаем замену в загруженных актах, если найдем
                               let findId=this.data.findIndex(item_=>
                                   +item_.idoper==+item.idoper
                               );
                               if(findId){
                                 this.data.splice(findId,1);
                                 this.data.unshift(item); //добавляем в начало
                               }


                            }
                         );

                       }

            }






          }
      ) ;



    },

    date_(){ //первоначальная дата для выбора
     let now = new Date();
     let date = new Date(now.getFullYear(),now.getMonth(),now.getDate()+1);
      let m=''+(date.getMonth()+1);
      if(m.length==1){
        m='0'+m;
      }
      let d=''+(date.getDate());
      if(d.length==1){
        d='0'+d;
      }
      return date.getFullYear()+'-'+m+'-'+d;
    }

  },


mounted(){
   this.date_query=this.date_();
},



}
</script>

<style  scoped>
.dl{
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;

}
.error_downloads{
 display: flex;
  flex-direction: column;
  gap: 10px;
 padding: 20px;
 background: #d0b2b2;
 border-radius: 8px;
 color: #501717;
}
.error_downloads_m{

  margin-top: 20px;


}


.input_date{
  border: 1px solid #9d9d9d;
  border-radius: 5px;
  max-width: 150px;
}
.bt{
  border: 1px solid #d3d3d3 !important;
  max-width: 150px;
  display: flex;
  align-items: center;

}


</style>