var VPWAHistory = (function () {
    let vp_template = `
    <div class="card-style">
          <div style="text-align:right">
            <button title="Filter" class="main-btn btn-sm primary-btn rounded-md btn-hover" data-bs-toggle="modal" data-bs-target="#modal-filter">
                <i class="fas fa-filter"></i>
            </button>
            &nbsp;
            <button class="main-btn btn-sm success-btn rounded-md btn-hover" @click="$refs[grid.ref].reload()" >
                <i class="lni lni-reload"></i>
            </button>
          </div>
  
          <div class="table-responsive">
            <grid :id="grid.id" :limits="true" :url="parsedURL" :ref="grid.ref" :columns="grid.columns" :ondataload="ondataload"></grid>
          </div>
      </div>



    <div class="modal fade" id="modal-filter" :ref="filter.ref" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered">
          <div class="modal-content card-style">
              <div class="modal-header px-0 border-0">
                  <h5 class="text-bold">Filter</h5>
                  <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
                      <i class="lni lni-cross-circle"></i>
                  </button>
              </div>
              <div class="modal-body px-0">
                  <div class="content">

                    <div class="select-style-1">
                        <label>Perangkat</label>
                        <div class="select-position">
                        <tomselect ref="devices" id="devices" :options="filter.device.options" :value="filter.device.value" @changed="filter.device.value=$event" placeholder="Pilih Perangkat" eltype="select" style="width: 100%;">
                        </tomselect>
                        </div>
                    </div>
                    <div class="select-style-1">
                        <label>Pengirim</label>
                        <div class="select-position">
                            <tomselect ref="senders" id="senders" :options="filter.sender.options" :value="filter.sender.value" @changed="filter.sender.value=$event" placeholder="Pilih Pengirim" eltype="select" style="width: 100%;">
                            </tomselect>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-style-1">
                                <label>Mulai Dari</label>
                                <input class="form-control" type="date" v-model="filter.date.start" placeholder="Masukkan Tanggal Awal">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-style-1">
                                <label>Sampai </label>
                                <input class="form-control" type="date" v-model="filter.date.end" placeholder="Masukkan Tanggal Akhir">
                            </div>
                        </div>
                    </div>

                  </div>
              </div>
          </div>
      </div>
  </div>
  
`
    let gridConf = {
        ready: false,
        data: [],
        id: "history-table",
        ref: "history-table",
        columns: [
            
            {
                id: 'device_name',
                name:"Nama Perangkat"
            },{
                id: 'sender_name',
                name:"Nama Pengirim"
            },{
                id: 'nomor',
                name:"Nomor Tujuan"
            },{
                id: 'message',
                name:"Pesan"
            },{
                id: 'created_at',
                name:"Dibuat Pada"
            },
        ]
    };

    return {
        name: "wahistory",
        template: vp_template,

        data() {
            return {
                grid: gridConf,
                filter:{
                    ref:"filter-modal",
                    device:{
                        value:'all',
                        options:[{value:'all',text:'Semua'}]
                    },
                    date:{
                        start:mm().subtract(7,'days').format("YYYY-MM-DD"),
                        end:mm().format("YYYY-MM-DD"),
                    },
                    sender:{
                        value:'all',
                        options:[{value:'all',text:'Semua'}]
                    },
                },
            }
        },
        mounted() {
            this.loadWhatsappDevice();
            this.loadStaff();
        },
        methods: {
            loadWhatsappDevice(){
               axios({
                   method: 'GET',
                   url: this.$store.state.config.base_url + "/panel/whatsapp/devices/all",
               }).then((response) => {
                   Swal.close()
                   if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                   let opt = response.data.data.map(v=>{
                    return {
                        value:v.id,
                        text:v.nama,
                    }
                   });
                   this.filter.device.options = [{value:'all',text:'Semua'}].concat(opt);
                }, (error) => {
                   if (typeof error.response == 'undefined') return;
                   let errMsg = gaem(error);
                   return Swal.fire('Gagal', errMsg, 'error')
               });
            },
            loadStaff(){
               axios({
                   method: 'GET',
                   url: this.$store.state.config.base_url + "/panel/users/staff/all",
               }).then((response) => {
                   if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                   let opt = response.data.data.map(v=>{
                    return {
                        value:v.id,
                        text:v.fullname,
                    }
                   });
                   this.filter.sender.options = [{value:'all',text:'Semua'}].concat(opt);
                }, (error) => {
                   if (typeof error.response == 'undefined') return;
                   let errMsg = gaem(error);
                   return Swal.fire('Gagal', errMsg, 'error')
               });
            },
            ondataload(data) {
                this.grid.data = data.data;
                this.grid.ready = true;
                console.log(data.data)
                return data.data.map(v=>{
                    v.created_at = mm({unix:v.created_at}).format('YYYY-MM-DD HH:mm:ss');
                    return v;
                });
            },
            FilterModal(e = 'show') {
                if (!this.filter.instance) {
                    this.filter.instance = new bootstrap.Modal(this.$refs[this.filter.ref]);
                }
                switch (e) {
                    case "hide":
                        this.filter.instance.hide();
                        break;
                    case "show":
                        this.filter.instance.show();
                        break;
                    case "toggle":
                        this.filter.instance.toggle();
                        break;
                    case "dispose":
                        this.filter.instance.dispose();
                        break;
                }
            },
        },
        computed: {
            parsedURL() {
                let url = window.location.href + '/all?';
                url += `&device=${this.filter.device.value}`;
                url += `&sender=${this.filter.sender.value}`;
                if(this.filter.date.start)url += `&start=`+moment(this.filter.date.start+" 00:00:00").unix();
                if(this.filter.date.end)url += `&end=`+moment(this.filter.date.end+" 23:59:59").unix();
                return url;
            },
        }
    }
})();
