<script>
import Vue from 'vue';
import SidebarConversion from './Sidebar/SidebarItemConversion.vue';

export default {
    data: function() {
        return {
            options: {
              category: [],
              unit: []
            },
            data: {},
            sidebarConversion: SidebarConversion,
            conversion: {},
            list: [],
            sync: [false, false]
        };
    },
    created: function() {
        this.$sidebar.setComponent(SidebarConversion);
    },
    mounted: function() {
        var vm = this;

        console.log('mounted', this.sync);

        vm.load();
    },
    computed: {
        // Create units thats selected
        cAvailUnits: function() {
            // Selected unit
            var unitsId = this.data.units;
            // List units
            var units = this.options.unit;

            var temp = [];
            if(unitsId && unitsId.length > 0) {
                temp = _.filter(units, function(x) {
                    var found = _.contains(unitsId, x.id);

                    /*
                    if(found)
                        console.log('found', found, unitsId, x);
                    */

                    return found;
                });
            }

            // console.log('computed xx', temp, unitsId);

            return temp;
        },
        cShow: function() {
            return _.every(this.sync, function(x) { return x; });
        }
    },
    watch: {
        $route: function(to, from){
          var vm = this;

          vm.load();
        },

        'data.units': function() {
            console.log('data.units', this.data.units);
        }
    },
    methods: {
        load: function() {
            //this method for formatting data based on route to avoid undefined
            var vm = this;

            if (vm.$route.params.id) {
                vm.create();
            } else {
                vm.createEmptyData();
            }

            vm.newConversion();
            vm.loadCategory();
        },
        createEmptyData: function() {
            var vm = this;

            var data = {
                id: null,
                item_category_id: null,
                ref_no: null,
                name: null,

                conversion: [],
                _delete_conversion: [],

                units: []
            };

            vm.data = Object.assign({}, data);
        },
        create: function() {
            var vm = this;
            vm.createEmptyData();

            vm.$loading.on('loading');
            vm.$api.Category.all({page: 'all', group_by: 'unit'}).then(function(resp) {
                var data = resp.data.data;

                var unit = _.map(data, function(row) {
                            return { id: row.id, text: row.label };
                          });

                vm.options.unit = unit;

                Vue.set(vm.sync, 1, true);

            vm.$api.Item.get(vm.$route.params.id).then(function(resp) {
                if (!resp.data.is_error) {
                    var data = resp.data.data;

                    data.item_category_id = String(data.item_category_id);

                    for (var i = 0; i < data.conversion.length; i++) {
                        data.conversion[i]._hash = Math.getRandomHash();
                        data.conversion[i].unit_id_from = String(data.conversion[i].unit_id_from);
                        data.conversion[i].unit_id_to = String(data.conversion[i].unit_id_to);
                    }

                    for (var i = 0; i < data.units.length; i++) {
                        // data.units[i] = data.units[i];
                    }

                    data._delete_conversion = [];

                    vm.data = Object.assign({}, data);
                    console.log('create', vm.data);
                } else {
                    vm.$flash.error(resp.data.message);
                }

                vm.$loading.off('loading');
            });
            });
        },
        submit: function() {
            var vm = this;

            vm.$loading.on('loading');

            var data = vm._createPostData(vm.data);
            console.log(data);
            vm.$api.Item.create(data).then(function(resp) {
                if(!resp.data.is_error) {
                    if (vm.$route.params.id) {
                        vm.create();
                    } else {
                        vm.$router.push({ name: 'item-detail', params: { id: resp.data.data } });
                    }

                    vm.$flash.success(resp.data.message);
                } else {
                    vm.$flash.error(resp.data.message);
                }

                vm.$loading.off('loading');
            });
        },
        _createPostData: function(data) {
            var vm = this;

            return data;
        },
        newConversion: function() {
            var vm = this;

            var conversion = {
                id: null,
                item_id: null,
                unit_id_from: null,
                unit_id_to: null,
                qty: 1,

                _hash: Math.getRandomHash()
            };

            vm.conversion = Object.assign({}, conversion);
        },
        addConversion: function(conversion) {
            var vm = this;

            var isNew = true;

            // Check if this job update
            for(var i=0; i<vm.data.conversion.length; i++) {
                if(vm.data.conversion[i]._hash === conversion._hash) {
                    isNew = false;
                    conversion.id = vm.data.conversion[i].id;
                    vm.data.conversion[i] = conversion;
                }
            }

            if(isNew)
                // If new just push to conversion
                vm.data.conversion.push(conversion);

            vm.newConversion();
        },
        editConversion: function(conversion) {
            var vm = this;

            vm.conversion = Object.assign({}, conversion);
            vm.$sidebar.show();
        },
        deleteConversion: function(conversion) {
            var vm = this;

            if(conversion.id)
                vm.data._delete_conversion.push(conversion.id);

            for (var i = 0; i < vm.data.conversion.length; i++) {
              if (vm.data.conversion[i]._hash === conversion._hash) {
                vm.data.conversion.splice(i, 1);
              }
            }
        },
        loadCategory: function() {
            var vm = this;

            vm.$api.Category.item().then(function(resp) {
                var data = resp.data.data;

                var item = data;

                var category = _.map(item, function(row) {
                    return { id: row.id, text: row.label };
                });

                vm.options.category = category;
                Vue.set(vm.sync, 0, true);
            });

            setTimeout(function() {

            }, 3000);

            /*
            vm.options.unit = [
                { id: 1, text: 'Satu'},
                { id: 2, text: 'Dua'},
            ];
            */

        }
    }
}
</script>
<template>
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="card card-primary card-outline card-tabs">
              <box-overlay v-if="$loading.get('loading')" />
                <div class="card-header p-0 pt-1 border-bottom-0">
                  <ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active" id="custom-tabs-two-home-tab" data-toggle="pill" href="#custom-tabs-two-home" role="tab" aria-controls="custom-tabs-two-home" aria-selected="true">Detail</a>
                    </li>
                    <li class="nav-item" v-if="$route.params.id">
                      <a class="nav-link" id="custom-tabs-two-profile-tab" data-toggle="pill" href="#custom-tabs-two-profile" role="tab" aria-controls="custom-tabs-two-profile" aria-selected="false">Rumus Konversi</a>
                    </li>
                  </ul>
                </div>
                <div class="card-body">
                <div class="tab-content" id="custom-tabs-two-tabContent">
                  <div class="tab-pane fade show active" id="custom-tabs-two-home" role="tabpanel" aria-labelledby="custom-tabs-two-home-tab">
                    <form action="#" role="form" v-on:submit.prevent="submit()">
                      <div class="row">
                        <div class="form-group col-sm-2">
                          <label>No. Ref</label>
                          <input type="text" class="form-control" id="ref_no" placeholder="Masukkan No. Ref" v-model="data.ref_no"/>
                        </div>
                        <div class="form-group col-sm-5">
                          <label>Kategori</label>
                          <select2 v-bind:options="options.category"
                                   v-model="data.item_category_id"
                                   placeholder="Pilih kategori"
                                   name="category">
                          </select2>
                        </div>
                        <div class="form-group col-sm-5">
                          <label>Satuan</label>
                          <!-- Render when data.units is ready -->
                          <select2 v-bind:options="options.unit"
                                   v-model="data.units"
                                   placeholder="Pilih Satuan"
                                   v-bind:tags="true"
                                   castTo="integer"
                                   name="satuan">
                          </select2>
                        </div>
                        <div class="form-group col-sm-12">
                          <label>Nama</label>
                          <input type="text" class="form-control" id="name" placeholder="Masukkan Nama" v-model="data.name"/>
                        </div>
                        <div class="col-sm-12">
                          <div class="text-right">
                            <button type="button" class="btn btn-default" @click="load()">Batal</button>
                            <button type="submit" class="btn btn-primary">Simpan</button>
                          </div>
                        </div>
                    </div>
                  </form>
                  </div>
                  <div class="tab-pane fade" id="custom-tabs-two-profile" role="tabpanel" aria-labelledby="custom-tabs-two-profile-tab" v-if="$route.params.id">
                    <div class="row">
                      <div class="col-sm-12">
                          <table class="table table-bordered">
                            <thead>
                              <tr>
                                <th style="width: 10px" rowspan="2" class="align-top">No.</th>
                                <th colspan="2">Unit</th>
                                <th rowspan="2" class="align-top">Action</th>
                              </tr>
                              <tr>
                                <th>Satuan(Dari)</th>
                                <th>Satuan(Ke)</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr v-for="(tr, $index) in data.conversion">
                                <td>{{ $index + 1 }}</td>
                                <td>1 {{ tr.unit_from }}</td>
                                <td>= {{ tr.qty }} {{ tr.unit_to }}</td>
                                <td>
                                    <sidebar-button class="btn-warning"
                                          v-bind:sidebar="sidebarConversion"
                                          v-bind:conversions="data.conversion"
                                          v-model="data.conversion[$index]"
                                          v-bind:success="addConversion"
                                          v-bind:data="{ units: cAvailUnits }"><i class="fas fa-pencil-alt"></i></sidebar-button>

                                  <button type="button" class="btn btn-danger" @click="deleteConversion(tr)"><i class="fas fa-trash-alt"></i></button>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <div class="col-sm-12">
                          <sidebar-button class="btn-primary"
                                          v-bind:sidebar="sidebarConversion"
                                          v-model="conversion"
                                          v-bind:success="addConversion"
                                          v-bind:data="{ units: cAvailUnits }">Tambah Konversi</sidebar-button>
                        </div>
                        <div class="col-sm-12">
                          <div class="text-right">
                            <button type="button" class="btn btn-default" @click="load()">Batal</button>
                            <button type="button" class="btn btn-primary" @click="submit()">Simpan</button>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
</template>