<template>
  <gz-dash
    icon="$ayiSplotch"
    :addUrl="'widgets/0'"
    :showMoreButton="true"
    :updateFrequency="60000"
    v-on:dash-refresh="getDataFromApi()"
    v-on:dash-more-click="moreClick()"
    v-on="$listeners"
    v-bind="$attrs"
  >
    <template slot="main">
      <div class="ml-4 mt-1">
        <template v-for="(item, i) in obj"
          ><span :key="i"
            >{{ localizedCurrency(item[1].v)
            }}<span class="ml-2"
              ><a :href="'/widgets/' + item[0].i"> {{ item[0].v }}</a>
              <br /></span></span
        ></template>
      </div>
    </template>
  </gz-dash>
</template>
<script>
/*
TODO: LINK TO LIST FROM HERE, GRID VIEW PREFILTERED AND SORTED

*/
import GzDash from "../components/dash-base.vue";
const LIST_VIEW = {
  offset: 0,
  limit: 10,
  dataListKey: "TestWidgetDataList",
  listView: '[{"fld":"widgetname"},{"fld":"widgetdollaramount","sort":"-"}]'
};
export default {
  components: {
    GzDash
  },
  data() {
    return {
      obj: [],
      currencyName: window.$gz.locale.getCurrencyName(),
      languageName: window.$gz.locale.getBrowserFirstLanguage()
    };
  },
  props: {
    maxListItems: { type: Number, default: 10 }
  },
  created() {},
  computed: {},
  methods: {
    moreClick() {
      const LIST_FORM_KEY = "widget-list";
      //get current settings for the form
      let formSettings = window.$gz.form.getFormSettings(LIST_FORM_KEY);

      //switch to an unsaved listview and substitute this dash widgets list view criteria
      formSettings.temp.page = 0;
      formSettings.saved.dataTable.listViewId = -1;
      formSettings.saved.dataTable.unsavedListView = LIST_VIEW.listView;

      //save back again
      window.$gz.form.setFormSettings(LIST_FORM_KEY, formSettings);

      //now navigate to the data table list view
      this.$router.push({
        name: "widget-list"
      });
    },
    async getDataFromApi() {
      let lv = LIST_VIEW;
      lv.limit = this.maxListItems;
      let res = await window.$gz.api.post("data-list", lv);
      if (!res.error) {
        this.obj = res.data;
      } else {
        this.obj = [];
      }
    },
    localizedCurrency(value) {
      return window.$gz.locale.currencyLocalized(
        value,
        this.languageName,
        this.currencyName
      );
    }
  }
};
</script>
