Untitled

<template>
  <div class="grid grid-cols-12 gap-4">
    <div class="col-span-4">
      <label for="" class="block mb-1">Merchant</label>
      <select
        v-model="merchant_id"
        :class="[
          'w-full',
          'border',
          'rounded-md',
          'text-base',
          'px-4',
          'py-2',
          'font-normal',
          'mb-2',
        ]"
      >
        <option v-for="item in merchants" :key="item.id" :value="item.id">
          {{ item.merchant_name }}
        </option>
      </select>
    </div>
    <div class="col-span-4">
      <label for="" class="block mb-1">Bulan</label>
      <select
        v-model="form.month"
        :class="[
          'w-full',
          'border',
          'rounded-md',
          'text-base',
          'px-4',
          'py-2',
          'font-normal',
          'mb-2',
        ]"
      >
        <option v-for="(item, index) in bulans" :key="index" :value="item.id">
          {{ item.name }}
        </option>
      </select>
    </div>
    <div class="col-span-4">
      <label for="" class="block mb-1">Tahun</label>
      <select
        v-model="form.year"
        :class="[
          'w-full',
          'border',
          'rounded-md',
          'text-base',
          'px-4',
          'py-2',
          'font-normal',
          'mb-2',
        ]"
      >
        <option v-for="(item, index) in tahuns" :key="index" :value="item">
          {{ item }}
        </option>
      </select>
    </div>
    <div class="col-span-12">
      <button
        :class="[
          'inline-block',
          'py-2.5',
          'px-6',
          'rounded-md',
          'text-white',
          'bg-secondary',
          'text-sm',
          'mr-2',
          {
            'pointer-events-none': form.month === null || form.year === null,
          },
          {
            'bg-opacity-60': form.month === null || form.year === null,
          },
        ]"
        @click="getGR()"
      >
        Get Data
      </button>
      <button
        :class="[
          'inline-block',
          'py-2.5',
          'px-6',
          'rounded-md',
          'text-white',
          'bg-third',
          'text-sm',
          'mr-2',
          {
            'pointer-events-none': form.month === null || form.year === null,
          },
          {
            'bg-opacity-60': form.month === null || form.year === null,
          },
        ]"
        @click="downloadGeneral()"
      >
        Download General
      </button>
      <!-- <button
        :class="[
          'inline-block',
          'py-2.5',
          'px-6',
          'rounded-md',
          'text-white',
          'bg-primary',
          'text-sm',
          {
            'pointer-events-none': form.month === null || form.year === null,
          },
          {
            'bg-opacity-60': form.month === null || form.year === null,
          },
        ]"
        @click="downloadDetail()"
      >
        Download Detail
      </button> -->
    </div>
    <div class="col-span-12">
      <vue-good-table
        :columns="columns"
        :rows="rows"
        :line-numbers="true"
        :total-rows="totalRecords"
        :pagination-options="{
          enabled: true,
          mode: 'records',
        }"
        @on-page-change="onPageChange"
        @on-per-page-change="onPerPageChange"
      >
      </vue-good-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoadReportUsage',
  props: {},
  data() {
    return {
      merchant_id: null,
      bulans: [
        {
          id: '1',
          name: 'Januari',
        },
        {
          id: '2',
          name: 'Februari',
        },
        {
          id: '3',
          name: 'Maret',
        },
        {
          id: '4',
          name: 'April',
        },
        {
          id: '5',
          name: 'Mei',
        },
        {
          id: '6',
          name: 'Juni',
        },
        {
          id: '07',
          name: 'Juli',
        },
        {
          id: '8',
          name: 'Agustus',
        },
        {
          id: '9',
          name: 'September',
        },
        {
          id: '10',
          name: 'Oktober',
        },
        {
          id: '11',
          name: 'November',
        },
        {
          id: '12',
          name: 'Desember',
        },
      ],
      tahuns: [],
      form: {
        month: null,
        year: null,
        page: 1,
        limit: 10,
      },
      columns: [
        {
          label: 'Date',
          field: 'created_at',
        },
        {
          label: 'Total Sent',
          field: 'sent',
        },
        {
          label: 'Verified',
          field: 'verified',
        },
        {
          label: 'Delivered',
          field: 'delivered',
        },
      ],
      rows: [],
      totalRecords: 0,
      merchants: [],
      timeZone: '',
    }
  },
  mounted() {
    this.getListMerchant()
    this.generateArrayOfYears()
    this.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
  },
  methods: {
    generateArrayOfYears() {
      const max = new Date().getFullYear()
      const min = max - (max - '2015')

      for (let i = max; i >= min; i--) {
        this.tahuns.push(i)
      }
    },
    async getListMerchant() {
      await this.$axios
        .$get(`/v1/r/merchant`)
        .then((data) => {
          if (data.status) {
            this.merchants = data.data
          } else {
            this.merchants = []
          }
        })
        .catch(() => {})
        .finally(() => {})
    },
    async getGR() {
      const params = this.form

      await this.$axios
        .$get(`/v1/r/report/general`, {
          params,
          headers: {
            'X-Merchant-ID': Number(this.merchant_id),
            'X-Timezone': `${this.timeZone}`,
          },
        })
        .then((data) => {
          if (data.status) {
            this.rows = data.data[0].general ? data.data[0].general : []
            this.totalRecords = data.data[0].paging.total_page * params.limit
          } else {
            this.rows = []
          }
        })
        .catch(() => {})
        .finally(() => {})
    },
    onPageChange(params) {
      this.form.page = params.currentPage
      this.getGR()
    },
    onPerPageChange(params) {
      this.form.limit = params.currentPerPage
      this.getGR()
    },
    async downloadGeneral() {
      await this.$axios
        .$post(
          `/v1/r/report/general/download`,
          {
            month: this.form.month,
            year: String(this.form.year),
            email: this.$auth.user.pic_email,
          },
          {
            headers: {
              'X-Merchant-ID': Number(this.merchant_id),
              'X-Timezone': `${this.timeZone}`,
            },
          }
        )
        .then((data) => {
          if (data.status) {
            this.$toasts(
              'success',
              `Download General telah dikirim ke Email Akun anda!`
            )
          }
        })
        .catch((err) => {
          this.$toasts('error', err)
        })
        .finally(() => {})
    },
  },
}
</script>