<template>
      <div> 
              <div class="input-group date" >
                  <select class="form-control" style="width: 100%" v-model="Supselect">
                    <option value="">ເລືອກຜູ້ສະໜອງ ສິນຄ້າ</option>
                    <option :value="sup.id" v-for="sup in ListSupplier.data" :key="sup.index" > {{sup.sup_name}} </option>
                  </select>
                  
                </div>
                

                <div class="row p-3" v-if="Supselect!=''">
                  <div class="col flex justify-center mb-2">
                    <span class="avatar avatar-xl rounded-circle">
                      <img
                        alt="Image placeholder"
                        :src="SupDetail.images"
                      />
                    </span>
                  </div>
                  <div class="ml-3">
                    <i class="fas fa-warehouse"></i>: {{SupDetail.name}}<br />
                    <i class="fas fa-mobile-alt"></i>: {{SupDetail.tel}}<br />
                    <i class="fas fa-map-marked-alt"></i>: {{SupDetail.address}}
                   
                  </div>
                </div>
  </div>
        
</template>

<script>
export default {
    name: 'MyAppVueSuplier',
    props:{
      supplierData:{
        type: Object,
        required: true,
      },
      supplierBack:{
        type: Number
      }
    },
    data() {
        return {
            ListSupplier:[],
            Supselect:'',
            SupDetail:{
              images:'',
              name:'',
              tel:'',
              address:''
            },
            polling: null,
        };
    },

   watch:{
     Supselect(){
       this.supplierData.SupplierID = this.Supselect;
       let item = this.ListSupplier.data.find((i)=>i.id == this.Supselect)
       if(item){
       this.SupDetail.images = window.location.origin+'/images/avatars/'+item.sup_images;
       this.SupDetail.name = item.sup_name;
       this.SupDetail.tel = item.sup_tel;
       this.SupDetail.address = item.sup_address;
       }

     },
     supplierBack(){
       //console.log(this.supplierBack);
       //this.Supselect = this.supplierBack;
       this.polling = setInterval(() => {
        //this.$refs.service_name.focus();
        //console.log(this.supplierBack);
        this.Supselect = this.supplierBack;
        clearInterval(this.polling);
      }, 800);
     }
   },

    methods: {
        GetSup(bpage) {
      this.loading = true;
      this.$Progress.start();
      if (typeof bpage == "undefined") {
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios.get( `/api/supplier?page=${this.ListSupplier.current_page}` )
            .then((response) => {
              this.loading = false
              if(response.data.success){
                if (response.data.supplier.data.length < 1) {
                    let bp = this.ListSupplier.current_page - 1;
                    if (bp >= 1) {
                    this.GetSup(bp);
                    } else {
                    this.ListSupplier = response.data.supplier;
                    }
                } else {
                    this.ListSupplier = response.data.supplier;
                    this.$Progress.finish();
              }
              } else {
                 this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.response.data.message, }, 4000 );
                 this.$Progress.fail();
               }
            }).catch((error) => {
              this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
              this.loading = false;
              //this.AllProduct = "";
              console.error(error);
              this.$Progress.fail();
            });
        });
      } else {
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios.get( `/api/supplier?page=${bpage}` )
            .then((response) => {
              this.loading = false;
              if(response.data.success){
              this.ListSupplier = response.data.supplier;
              this.$Progress.finish();
              } else {
                 this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.response.data.message, }, 4000 );
                 this.$Progress.fail();
               }
            })
            .catch((error) => {
              this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
              this.loading = false;
              this.$Progress.fail();
            });
        });
      }
    },
    },
    created(){
      this.GetSup();
    }
};
</script>

<style lang="scss" scoped>

</style>