<template>
<div class="container-fluid">
    <section class="content">
        <div class="header pb-2">

          <div class="header-body">
            <div class="row align-items-center py-4">
              <div class="col-lg-6 col-md-7">
                <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4" >
                  <ol class="breadcrumb breadcrumb-links">
                    <li class="breadcrumb-item">
                      <a href="#"><i class="fas fa-home"></i></a>
                    </li>
                    <li class="breadcrumb-item">
                      <a href="#">Dashboards</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                      ນຳເຂົ້າຂໍ້ມູນ
                    </li>
                  </ol>
                </nav>
              </div>
              <div class="col-lg-6 col-md-5 text-right">
              </div>
            </div>
          </div>

      </div>

      <div class="row" v-if="isLoggedIn">
        <div class="col-lg-8">
          <div class="card">
        <!-- Card header -->
        <div class="card-header border-0">
          <div class="row d-flex justify-content-between px-2">
                <div >
                  <h3 class="mb-0">ຂໍ້ມູນການເຄື່ອນໄຫວ</h3>
                </div>


              </div>
        </div>
        <!-- Light table -->
        <div class="card-body">
          <div class="form-group">
            <label > ເລືອກຂໍ້ມູນທີ່ຕ້ອງການນຳເຂົ້າ </label>
            <input type="file" id="simg" name="file" @change="onSelected" >
          </div>
            <table class="table">
              <thead>
                <tr>
                  <th>trn_type</th>
                  <th>name</th>
                  <th>amount</th>
                  <th>count</th>
                  <th>month</th>
                  <th>year</th>
                  <th>user_id</th>

                </tr>
              </thead>
              <tbody>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
           
              </tbody>
            </table>
        </div>

      </div>
        </div>
      </div>

    </section>
</div>
</template>

<script>
//import moment from 'moment';

export default {
    name: "transection",

    components: {},
    directives: {},
    watch:{

    },
    data() {
        return {
          file_get:null,
          files:{
          file:null,
          max_size: 1000*1204,
          upmax:false,
          percenUp:0,
          shupload:false,
          isLoggedIn: false,
        },
        };
    },
    computed:{
      

    },
    mounted() {},

    methods: {
      loadNewTran(){
        this.GetAllTRN()
      },
        onSelected(event){
          //console.log(event.target.files[0])
        this.files.file = event.target.files[0]
        let reader  = new FileReader();
              reader.addEventListener("load", function () {
                  //this.imagePreview = reader.result;
                }.bind(this), false);
                if( this.files.file ){
                  if ( /\.(jpe?g|png|gif)$/i.test( this.files.file.name ) ) { }
                   // console.log(this.images.file.size+' | '+this.images.max_size)
                    if(this.files.file.size>this.files.max_size){
                      this.files.upmax = true
                    } else {
                      this.UploadImg()
                      this.files.upmax = false
                      reader.readAsDataURL( this.files.file );
                    }
                 
                } 
    },
    UploadImg(){
      console.log(this.files.file)
     // this.files.shupload = true
      let formData = new FormData();
      formData.append("file", this.files.file);
       // console.log(formData)
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios.post("/api/importtrn/import", formData, {
            headers: {"Content-Type": "multipart/form-data"},
            onUploadProgress: progressEvent => {
              //console.log('upload')
             // this.files.percenUp = Math.round(progressEvent.loaded / progressEvent.total * 100)
             // if(this.files.percenUp==100){ this.files.shupload = false; this.files.percenUp=0 }
             // console.log('Upload Progress:' + Math.round(progressEvent.loaded / progressEvent.total * 100) + '%')
            }
          }).then((response)=> {
              console.log(response.data.files)
              this.file_get = response.data.files

            }).catch((error)=> {
              this.$notify({ group: "error", title: "ບໍ່ສຳເລັດ!", text: 'ຜິດຜາດ: '+error.message }, 4000)
              ///currentObj.output = error;
              //console.log(error)
            });

         });

    },


    },
     created() {
    this.$axios.get(`/api/users/checkauth`).then((response) => {
      if (!response.data.isLogin) {
        window.location.href = "/";
      }
    });

    if(window.Laravel.isLoggedin){
           this.isLoggedIn = true
        }
  },
    beforeRouteEnter(to, from, next) {
        if (!window.Laravel.isLoggedin) {
            window.location.href = "/";
        }
        next();
    }
};
</script>

<style lang="scss" scoped>
.table td, .table th {
    padding: 10px;
}
</style>
