<template>
  <gz-dash
    icon="$ayiTools"
    :count="obj.length"
    :add-url="'svc-workorders/0'"
    :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="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-workorders/' + item.id">
            <v-list-item-content>
              <v-list-item-title
                ><span class="text-h6 primary--text"
                  >{{ item.serial }}
                  <v-icon :color="statusColor(item.laststatusid)"
                    >$ayiFlag</v-icon
                  ></span
                ><span class="ml-4">{{ $ay.dt(item.completebydate) }}</span>
                <span class="ml-4">{{ item.name }}</span></v-list-item-title
              >
              <v-list-item-subtitle>{{ item.notes }}</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.wotags"
                class="mt-4"
                :label="$ay.t('Tags') + ' - ' + $ay.t('WorkOrder')"
              ></gz-tag-picker>
              <v-radio-group
                v-if="localSettings.wotags.length > 1"
                v-model="localSettings.wotagsany"
                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>

              <gz-tag-picker
                v-model="localSettings.woitemtags"
                class="mt-4"
                :label="$ay.t('Tags') + ' - ' + $ay.t('WorkOrderItem')"
              ></gz-tag-picker>
              <v-radio-group
                v-if="localSettings.woitemtags.length > 1"
                v-model="localSettings.woitemtagsany"
                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: {},
      selectLists: {
        wostatus: []
      }
    };
  },
  computed: {},
  async created() {
    await initWidget(this);
  },
  async mounted() {
    //must be called from mounted to have refs available
    await this.getDataFromApi();
  },
  methods: {
    statusColor: function(statusId) {
      let ret = this.selectLists.wostatus.filter(z => z.id == statusId);
      if (ret && ret.length > 0) {
        return ret[0].color;
      }
    },
    showContext: function() {
      this.localSettings = window.$gz.util.deepCopySkip(this.settings);
      this.context = true;
    },
    updateSettings: function() {
      //copy settings from local to parent settings, need to do it this way or get error about mutating prop directly which is vexing and has no easy solution seemingly
      this.settings.customTitle = this.localSettings.customTitle;
      this.settings.wotags = this.localSettings.wotags;
      this.settings.wotagsany = this.localSettings.wotagsany;
      this.settings.woitemtags = this.localSettings.woitemtags;
      this.settings.woitemtagsany = this.localSettings.woitemtagsany;

      this.$emit("dash-change"); //trigger save to server
      this.context = false;
      this.getDataFromApi();
    },

    async getDataFromApi() {
      try {
        this.errorMessage = null;
        const res = await window.$gz.api.post("kpi", {
          KPIName: "WorkOrderOverduePersonalList",
          criteria: {
            wotags: this.settings.wotags,
            wotagsany: this.settings.wotagsany,
            woitemtags: this.settings.woitemtags,
            woitemtagsany: this.settings.woitemtagsany
          },
          clientTimeStamp: window.$gz.locale.clientLocalZoneTimeStamp()
        });
        if (res.error) {
          this.errorMessage = res.error;
        } else {
          this.obj = res.data;
        }
      } catch (error) {
        this.errorMessage = error.toString();
      }
    }
  }
};

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

async function fetchWorkorderStatusList(vm) {
  let res = await window.$gz.api.get("work-order-status/list");
  if (res.error) {
    vm.formState.serverError = res.error;
    window.$gz.form.setErrorBoxErrors(vm);
  } else {
    vm.selectLists.wostatus = res.data.all;
    let noStatus = window.$gz.form.getNoSelectionItem(true);
    noStatus.color = "#eeeeeeff";
    noStatus.locked = false;
    noStatus.completed = false;
    vm.selectLists.wostatus.unshift(noStatus);
  }
}
//////////////////////////////////////////////////////////
//
// Ensures UI translated text is available
//
async function fetchTranslatedText() {
  await window.$gz.translation.cacheTranslations([
    "Name",
    "WorkOrder",
    "WorkOrderItem",
    "NoData",
    "GridFilterDialogAndRadioText",
    "GridFilterDialogOrRadioText"
  ]);
}
</script>
