<template>

 <div class="main" v-if="oper_barcode.length">
   <div>Акт: {{ id }} от {{ oper_current.date_q || '' }}</div>
                 <div class="collect">

                   <my-input  id="main_search_barcodes" @keyup.enter="Search"   @input="Search" v-focus class="collect__search" v-model="search" :placeholder="'Поиск по штрихкоду'"></my-input>

                   <div v-if="show_result">
                     {{ text_dialog }}
                   </div>

                 </div>



                 <div class="collect__stat">
                   <div><div class="collect__value collect__value_m1">Собрано:</div> <div class="collect__value collect__value_m">{{ data_collect.length }}</div></div>
                   <div><div @click="show_dialog_barcodes=true" class="collect__value collect__value_m1 collect__value_m2">Не собрано:</div> <div class="collect__value collect__value_m">{{ oper_barcode.length-data_collect.length }}</div></div>
                   <div><div class="collect__value collect__value_m1">Всего в акте:</div> <div class="collect__value collect__value_m">{{ oper_barcode.length }}</div></div>

                 </div>

                <div>

                  <my-button  @click="show_dialog_delete=!show_dialog_delete" >Удалить сборку</my-button>
                  <my-dialog  :css="{top:true}" v-model:show="show_dialog_delete"  >
                         <div class="delete_collect">

                           Удалить сборку?
                           <div  class="delete_collect__bt">
                                 <my-button  @click="deleteCollect">Да</my-button>
                                 <my-button  @click="show_dialog_delete=!show_dialog_delete">Нет</my-button>
                           </div>

                         </div>

                  </my-dialog>

                </div>

                 <my-dialog v-model:show="show_dialog">

                   <div  class="collect__dialog collect__dialog_m">

                         <div>{{ this.text_dialog }}</div>
                         <div>{{ this.text_status }}</div>

                     <my-button class="collect__bt" @click="addResult">{{ text_btn }}</my-button>

                   </div>


                 </my-dialog>

   <my-dialog  :css="{top:true}" v-model:show="show_dialog_barcodes"   >

    <collect-barcodes :barcodes_obj="barcodesNotCollect"></collect-barcodes>


   </my-dialog>


 </div>
 <div v-else>
   Акт не выбран
 </div>
  <div  @click="error=false" class="error_downloads" v-if="error">

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

          <div>
            {{ error_downloads.text }}
          </div>
          <div  v-html="error_downloads.html">
          </div>

  </div>


</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex'
import CollectBarcodes from "./CollectBarcodes.vue";
import MyButton from "../UI/MyButton.vue";





export default {
  name:'Collect',
  components: {MyButton, CollectBarcodes},

  data() {
     return {
       show_dialog_delete:false,
       id:localStorage.id || null,
       search:'',
       data_collect:[],
       result_s:null,
       result_obj:null,
       show_dialog:false,
       text_dialog:'',
       text_btn:'',
       text_status:'',
       show_result:false,
       show_dialog_barcodes:false,
       error_downloads: {text:null,post_data:null,html:''},
       error:false,
       block_button:false,

     }
  },

  computed: {
    ...mapState({
      kag: state => state.ApiClass.kag,
      data: state => state.ApiClass.data,
      url_api:state => state.ApiClass.url_api,

    }),


    oper_current(){
      if(!this.data){
        return [];
      }
      if(!localStorage.id){
        return [];
      }

       //console.log(this.data,localStorage.id);


      let arr=this.data.find(item => item.idoper== +localStorage.id);


      if(!arr || !arr.data_json || !arr.data_json.barcodes){
        //console.log("не найдено для сборки из главного массива data",arr);
        //localStorage.removeItem ('id');
        //console.log("возвращаю пусто",arr.data_json.barcodes);
        return [];
      }


      return arr;

    },


    oper_barcode(){
            if(!this.data){
              return [];
            }
            if(!localStorage.id || !this.oper_current.data_json || !this.oper_current.data_json.barcodes){
              return [];
            }

            return this.oper_current.data_json.barcodes;
    },

    barcodesNotCollect(){

      //this.data_collect
      if(!this.data){
        return {name:'Не собрано',barcodes:[]};
      }
      if(!localStorage.id || !this.oper_current.data_json || !this.oper_current.data_json.barcodes){
        return [];
      }

      let barcodes=structuredClone(this.oper_barcode); //из этого массива последовательно удаляем все что собрали, это несобранный остаток
      //let collect_barcodes = structuredClone(this.data_collect); //найдем нестыковки, когда собрано больше чем надо
      //console.log(barcodes);
      this.data_collect.forEach(
          barcode=>{
          //console.log(barcode);
          //найдем индекс и удалим из массива
          let index=barcodes.findIndex(item=>
              {
                 if(typeof item === 'object' && JSON.stringify(item).indexOf(barcode)!=-1){
                   return true;
                 }else{
                  if(item==barcode){
                    return true;
                  }
                 }
                return false;
              }
          );



            barcodes.splice(index,1);

        }

      );




      return [{name:'Не собрано',barcodes:barcodes},{name:'Излишек', excess:[]}];
    },


  },



  methods:{


    ...mapActions({

      pushCollect: 'ApiClass/pushCollect',
      getCollect: 'ApiClass/getCollect',
      postingStatus: 'ApiClass/postingStatus',
      loadData:'ApiClass/loadData',
    }),


    deleteCollect(){


      // console.log({
      //   oper:this.id,
      //   firma:this.kag.firma,
      //   ff:this.oper_current.data_collect.collect,
      //
      //
      // });

      // if(typeof this.oper_current.data_collect!=='undefined' && typeof this.oper_current.data_collect.collect!=='undefined'){
      //   this.data_collect=[];
      //   this.oper_current.data_collect.collect=[];
      // }
          this.loadData(
              {     method:'post',
                    url:this.url_api+'/api/delete_collect.php',
                    json:{
                     oper:this.id,
                     firma:this.kag.firma,
                   },



              }
          ).then(
               (r)=>{
                     console.log(r);

                     if(typeof r.result!=='undefined' && parseInt(r.result)===1){
                          this.show_dialog_delete=!this.show_dialog_delete;
                       if(typeof this.oper_current.data_collect!=='undefined' && typeof this.oper_current.data_collect.collect!=='undefined'){
                             this.data_collect=[];
                              this.oper_current.data_collect.collect=[];
                       }
                     }
              }
          );












    },




    Search(){
      if(!this.oper_barcode.length){
        return false;
      }
      if(this.search.length < this.kag.barcode_length && this.kag.barcode_length!=0){
        return false;
      }





      this.show_result=false;
      let r=this.oper_barcode.find(item => {
       // console.log(JSON.stringify(item));
        if(typeof item === 'object' && JSON.stringify(item).indexOf(this.search)!=-1){
          this.result_obj=item;//для озона передается сразу много баркодов. После перезапуска приложения или если пробить 2 баркода на одной посылке, то запишутся 2 сборки!!!
          this.result_s=this.search;
          return true;
        }else{
          if(item==this.search){
            this.result_obj={barcode:item};//просто записываем один баркод
            this.result_s=this.search;
            return true;
          }

        }
          return false;
      });

      let r2=this.data_collect.find(item => {

        if(typeof item === 'object' && JSON.stringify(item).indexOf(this.search)!=-1){
         // console.log(item,'  1');
          this.result_s=this.search;
          return true;
        }else{
          if(item==this.search){
           // console.log(item,'  2');
            this.result_s=this.search;
            return true;
          }

        }
        return false;
      });
     // console.log(r2);
         if(r && this.search.length && !r2){ //найден в несобранном и отсутсвует в собранном
          // console.log(r);
           //сделать запрос к api о текущем статусе отправления
           //https://marketplace.book-online.ru/api/posting_status/
           //{"kag": 219807, "posting_number": "49017365-0012-7"}


          this.postingStatus({
            kag:this.kag.kag,
            posting_number:r.posting_number || r,
          }).then(
              (res)=>{

                //console.log(res);
                //this.result_s=r;
                //res=null;
                if(res){
                  this.text_dialog="Найдено "+ this.result_s;
                  this.text_btn="Добавить в сборку";
                  this.text_status=res.status || 'статус не определен';
                  this.show_dialog=true;
                  this.search='';



                }else{
                  this.error=true;
                  this.error_downloads.text='Ошибка получения данных о статусе отправления!';
                }


              }

          ).catch(

          )



        }
       if(r2 && this.search.length){ // найден в собранном, повтор
           this.text_dialog="Повтор "+ this.search;
           this.result_s=null;
           this.text_btn="Закрыть";
           this.show_dialog=true;
           this.search='';
       }
      if(!r2 && !r && this.search.length ){ // ничего не найдено, вывести в блоке под инпутом поиска
            this.text_dialog="Штрихкод "+ this.search +" не найден";
            this.result_s=null;
            this.show_dialog=false;
            this.show_result=true;
            this.search='';
      }


      //return r;

    },

    addResult(){

      if(this.block_button){
        return false;//блокировать двойное нажатие
      }


      this.block_button=true; //блокировать двойное нажатие


      if(!this.result_s){
        this.search='';
        this.show_dialog=false;
        document.getElementById('main_search_barcodes').focus();
        document.getElementById('main_search_barcodes').select();
        return false;
      }

    //отправить в сборку --------->

      let options={
        'idoper':this.id,
        'barcode':this.result_s,
        'barcode_json':this.result_obj,
        'user':0,
        'date_query':this.oper_current.date_query,
        'kag':this.kag,
      };

      this.pushCollect(options).then(
          (r)=>{
             console.log(r);
            if(!r || typeof r.result=='undefined' ||  r.result==0){


              if(r && typeof r.error!=='undefined'){
                this.error_downloads={text:r.error};
              }
              if(r){
                this.error_downloads.html='<div>API не отвечает! Ошибка получения данных!</div>'+r;
              }
              this.error=true;
            }else{
              this.data_collect.push(this.result_s);
              this.result_s=null;
              this.search='';
              this.show_dialog=false;
              this.error_downloads=null;
              this.error=false;

            }





            this.block_button=false;


          }
      )

      document.getElementById('main_search_barcodes').focus();
      document.getElementById('main_search_barcodes').select();



    },

    getCollect(){//обновим сборку, если случилась перезагрузка приложения

     if(!this.oper_current || !this.oper_current.data_collect || !this.oper_current.data_collect.collect || !this.oper_current.data_collect.collect.length){
      // console.log("не дало зайти в акт");
       return [];
     }

      let data=this.oper_current.data_collect.collect;
      this.data_collect=[];
      data.forEach(
          item=>{
            this.data_collect.push(item.barcode);
         }

      );
      //this.data_collect=structuredClone(this.oper_current.data_collect.collect);//клонируем

    }



  },

mounted(){

  //console.log("из mounted");
  this.getCollect();
    //this.getCollect({id:}).then( ).catch();


},

watch:{
  show_dialog(){
    document.getElementById('main_search_barcodes').focus();
    document.getElementById('main_search_barcodes').select();

  } ,


},



  }
</script>

<style scoped>


.error_downloads_m{
  margin-top: 20px;
}


.main{
  margin-top:15px;
  display: flex;
  flex-direction: column;
  gap:15px;

}


.collect{

  display: flex;
  flex-direction: column;
  gap:10px;


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

.collect__stat > div {
  display: grid;
  grid-template-columns: 200px 1fr  ;
  grid-template-rows: 40px;
  gap:10px;


}

.collect__value{
  display: flex;
  align-items: center;
  justify-content: center;



}
.collect__value_m{
  background: #f6f6f6;
  min-width: 100px;
  justify-content: center;
}
.collect__value_m1{
   justify-content: left;
}

.collect__value_m2{
  text-decoration: underline;
  color:#2342C0;
  cursor: pointer;

}
.collect__value_m2:hover{
  color: #122262;
}

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


}

.collect__dialog{

  display: flex;
  flex-direction: column;
  gap:20px;
}
.collect__dialog_m{
  margin-top:20px ;
}

.collect__bt{
  height:50px !important;
  background: #313f77 !important;
  color:var(--white) !important;
  font-size: 1.2em !important;
}

.delete_collect{
  display: flex;
  flex-direction: column;
  gap:20px;
  max-width: 150px;
}

.delete_collect__bt{
  display: flex;
  flex-direction: row;
  gap:10px;
  justify-content: space-between;


}

</style>