<template>
   <div id="pageTable">
    <v-container grid-list-xl fluid>
      <v-layout row wrap>
        <v-flex lg12>
          <v-card class="elevation-1 rounded-card">
            <v-card-text>

            </v-card-text>
          </v-card>

        </v-flex>
        <v-flex lg12>
          <v-card class="elevation-14">
            <v-toolbar card color="grey lighten-3">
            <v-card-title>
             <h3> Data Mutasi Lama</h3>
            </v-card-title>
            </v-toolbar>
            <v-divider></v-divider>
            <v-card-title>
              <v-text-field
                append-icon="search"
                :rules="nameRules"
                :counter="20"
                hint="Masukan Data Atau Nomor Handphone Pelanggan"
                v-model="search"
                label="Pencarian Data Atau Nomor Handphone"
                required
                clearable
              ></v-text-field>
              <v-text-field
                v-model="addIngAuto"
                append-icon="search"
                label="Pencarian Data Atau Nomor Handphone"
              ></v-text-field>
              <v-btn color="success" @click="test">text</v-btn>
            </v-card-title>
            <v-card-text class="pa-0 ">
              <v-data-table
                :headers="complex.headers"
                :items="oldMutations"
                :search="search"

                class="elevation-1"
              >
                <template slot="items" slot-scope="props">
                  <td class="text-md-left">{{ props.item.tanggal | formatDates}}</td>
                  <td class="text-md-left">{{ props.item.ket }}</td>
                  <td class="text-md-center"><b>Rp. </b><i>{{ props.item.debet | formatPrices }}</i></td>
                  <td class="text-md-center"><b>Rp. </b><i>{{ props.item.kredit | formatPrices }}</i></td>
                  <td class="text-md-center"><b>Rp. </b><i>{{ props.item.lastbalance | formatPrices }}</i></td>
                  <td class="text-md-center"><b>Rp. </b><i>{{ props.item.currbalance | formatPrices }}</i></td>
                </template>
                <template slot="no-data">
                <isLoadings></isLoadings>
                </template>
              </v-data-table>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import _ from 'lodash'
import moment from 'moment'
import isLoadings from '@/components/_tableAgents/dataLoadings'
import XLSX from 'xlsx'
var jsPDF = require('jspdf');
require('jspdf-autotable');
import axios from 'axios'
var CryptoJS = require("crypto-js");

export default {
  components :{
    isLoadings
  },
  created () {

  },
  mounted() {
    this._onMakeOldMUtations()
  },
  computed: {
  },
  methods: {

    test() {
       return  this.addIngAuto++
    },
   _onMakeOldMUtations () {
    let storages = JSON.parse(sessionStorage.getItem("key"))
    let bytes  = CryptoJS.AES.decrypt(storages, 'Updour-S0L4L3+L4L3|L45&C1NT4');
    let decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));

    let id = decryptedData.agenid
    let uri = 'https://localhost.biz:300/mutasi/' +id+ '/0/' + this.addIngAuto
    axios.get(uri).then(r => r.data).then(res => {
      console.log(res.data)
      this.oldMutations = res.data
    }).catch(err => alert(err))
  }
},
  watch: {

  },
  filters: {
    formatPrices(value) {
      let val = (value/1).toFixed().replace('.', '')
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
    },
    formatDates(value) {
      if (! value) return ''
        value = value.toString()
      return moment(value).format('DD/MM/YYYY HH:mm:ss')
    }
  },
  data () {
    return {
      addIngAuto : 0,
      oldMutations : [],
      startDate : null,
      startDates : null,
      endDate : null,
      endDates : null,
      modal: false,
      modals: false,
      dialog: false,
      dialogs: false,
      valid: false,
      search: '',
      name: '',
      nameRules: [
      v => !!v || 'Pencarian Nomor Handphone Pelanggan',
      ],
      //data Tables
      complex: {
        headers: [
        {
          text: 'Tanggal',
          sortable: true,
          value: 'tanggal'
        },
        {
          text: 'Keterangan',
          sortable: true,
          value: 'ket'
        },
        {
          text: 'Debet',
          sortable: true,
          value: 'debet'
        },
        {
          text: 'Kredit',
          sortable: true,
          value: 'kredit'
        },
        {
          text: 'Saldo Awal',
          sortable: true,
          value: 'currbalance'
        },
        {
          text: 'Saldo Akhir',
          sortable: true,
          value: 'lastbalance'
        },
        ],
      },
    }
  },

};
</script>

<style scoped lang="css">
.rounded-card{
  border-radius:15px;
}
</style>