<template>
  <gz-dash
    :count="obj.length"
    icon="$ayiConciergeBell"
    :show-context-button="true"
    :update-frequency="300000"
    v-bind="[$props, $attrs]"
    @dash-refresh="getDataFromApi()"
    @dash-context="showContext()"
    v-on="$listeners"
  >
    <template slot="main">
      <v-sheet height="400" class="mt-1 overflow-y-auto">
        <div
          v-if="obj.length == 0"
          class="ml-6 mt-6 text-h4 grey--text text--lighten-1"
        >
          {{ $ay.t("NoData") }}
        </div>
        <template v-for="(item, i) in obj">
          <v-list-item :key="i" two-line :to="'/svc-csr/' + item.id">
            <v-list-item-content>
              <v-list-item-title>
                <v-icon :color="priorityColor(item.priority)">
                  $ayiCircle
                </v-icon>
                <span class="ml-4">{{ $ay.dt(item.daterequested) }}</span>
                <span class="ml-4">{{
                  item.customername
                }}</span></v-list-item-title
              >
              <v-list-item-subtitle>{{ item.csrname }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </template>
      </v-sheet>
    </template>

    <template slot="settings">
      <div></div>
      <v-col v-if="context" cols="12">
        <v-dialog
          v-model="context"
          scrollable
          max-width="400px"
          data-cy="dashSettings"
          @keydown.esc="cancel"
        >
          <v-card elevation="24">
            <v-card-title class="text-h5 lighten-2" primary-title>
              <span> {{ $ay.t("Settings") }} </span>
            </v-card-title>

            <v-card-text>
              <gz-tag-picker
                v-model="localSettings.custtags"
                class="mt-4"
                :label="$ay.t('Tags') + ' - ' + $ay.t('Customer')"
              ></gz-tag-picker>
              <v-radio-group
                v-if="localSettings.custtags.length > 1"
                v-model="localSettings.custtagsany"
                row
                class="mt-n3"
              >
                <v-radio
                  :label="$ay.t('GridFilterDialogAndRadioText')"
                  :value="false"
                ></v-radio>
                <v-radio
                  :label="$ay.t('GridFilterDialogOrRadioText')"
                  :value="true"
                ></v-radio>
              </v-radio-group>

              <v-text-field
                v-model="localSettings.customTitle"
                class="mt-4"
                :label="$ay.t('Name')"
              ></v-text-field>
            </v-card-text>

            <v-divider></v-divider>
            <v-card-actions>
              <v-btn color="primary" text @click.native="context = false">{{
                $ay.t("Cancel")
              }}</v-btn>
              <v-spacer></v-spacer>
              <v-btn
                color="primary"
                text
                class="ml-4"
                @click="updateSettings"
                >{{ $ay.t("Save") }}</v-btn
              >
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-col>
    </template>
  </gz-dash>
</template>
<script>
import GzDash from "./dash-base.vue";
export default {
  components: {
    GzDash
  },
  props: {
    settings: { type: Object, default: null }
  },
  data() {
    return {
      obj: {},
      context: false,
      localSettings: {}
    };
  },
  computed: {},
  async created() {
    await initWidget();
  },
  async mounted() {
    //must be called from mounted to have refs available
    await this.getDataFromApi();
  },
  methods: {
    priorityColor: function(priority) {
      switch (priority) {
        case 1: //asap
          return "warning";
        case 2: //emergency
          return "error";
        default:
          return "success";
      }
    },
    showContext: function() {
      this.localSettings = window.$gz.util.deepCopySkip(this.settings);
      this.context = true;
    },
    updateSettings: function() {
      this.settings.customTitle = this.localSettings.customTitle;
      this.settings.custtags = this.localSettings.custtags;
      this.settings.custtagsany = this.localSettings.custtagsany;
      this.$emit("dash-change");
      this.context = false;
      this.getDataFromApi();
    },

    async getDataFromApi() {
      try {
        this.errorMessage = null;
        const res = await window.$gz.api.post("kpi", {
          KPIName: "CSROpenList",
          criteria: {
            custtags: this.settings.custtags,
            custtagsany: this.settings.custtagsany
          },
          clientTimeStamp: undefined
        });
        if (res.error) {
          this.errorMessage = res.error;
        } else {
          this.obj = res.data;
        }
      } catch (error) {
        this.errorMessage = error.toString();
      }
    }
  }
};

/////////////////////////////////
//
//
async function initWidget() {
  await fetchTranslatedText();
}

//////////////////////////////////////////////////////////
//
// Ensures UI translated text is available
//
async function fetchTranslatedText() {
  await window.$gz.translation.cacheTranslations([
    "Name",
    "Customer",
    "NoData",
    "GridFilterDialogAndRadioText",
    "GridFilterDialogOrRadioText"
  ]);
}
</script>
