<template>
  <div>
    <gz-report-selector ref="reportSelector"></gz-report-selector>
    <div v-if="formState.ready">
      <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
      <v-form ref="form">
        <v-row dense>
          <v-col cols="12" sm="6" lg="4" xl="3">
            <v-select
              ref="pGroup"
              v-model="obj.pGroup"
              dense
              :items="selectLists.pGroups"
              item-text="name"
              item-value="id"
              :readonly="formState.readOnly"
              :label="$sock.t('ProductGroup')"
              data-cy="pGroup"
              :rules="[form().integerValid(this, 'pGroup')]"
              :error-messages="form().serverErrors(this, 'pGroup')"
              @input="fieldValueChanged('pGroup')"
            ></v-select>
          </v-col>

          <v-col cols="12" sm="6" lg="4" xl="3">
            <gz-date-time-picker
              ref="created"
              v-model="obj.created"
              :label="$sock.t('Created')"
              :rules="[form().required(this, 'created')]"
              :readonly="formState.readOnly"
              :error-messages="form().serverErrors(this, 'created')"
              data-cy="created"
              @input="fieldValueChanged('created')"
            ></gz-date-time-picker>
          </v-col>

          <v-col cols="12" sm="6" lg="4" xl="3">
            <gz-pick-list
              ref="customerId"
              v-model="obj.customerId"
              :aya-type="sockTypes().Customer"
              show-edit-icon
              :readonly="formState.readOnly"
              :label="$sock.t('Customer')"
              :error-messages="form().serverErrors(this, 'customerId')"
              @input="fieldValueChanged('customerId')"
              @update:name="customerChanged"
            ></gz-pick-list>
          </v-col>
          <v-col cols="12" sm="6" lg="4" xl="3">
            <v-text-field
              ref="regTo"
              v-model="obj.regTo"
              dense
              :readonly="formState.readOnly"
              :label="$sock.t('LicenseRegTo')"
              :rules="[form().required(this, 'regTo')]"
              :error-messages="form().serverErrors(this, 'regTo')"
              data-cy="regTo"
              @input="fieldValueChanged('regTo')"
            ></v-text-field>
          </v-col>

          <v-col cols="12" sm="6" lg="4" xl="3">
            <gz-email
              ref="fetchEmail"
              v-model="obj.fetchEmail"
              :readonly="formState.readOnly"
              :label="$sock.t('LicenseFetchEmail')"
              data-cy="fetchEmail"
              :error-messages="form().serverErrors(this, 'fetchEmail')"
              @input="fieldValueChanged('fetchEmail')"
            ></gz-email>
          </v-col>

          <v-col cols="12" sm="6" lg="4" xl="3">
            <v-row dense no-gutters>
              <template v-if="!formState.readOnly">
                <v-col cols="1">
                  <v-menu offset-y>
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn icon v-bind="attrs" v-on="on">
                        <v-icon small>$sockiPlus</v-icon>
                      </v-btn>
                    </template>
                    <v-list>
                      <v-list-item @click="dtAddOneWeek('licenseExpire')">
                        <v-list-item-icon>
                          <v-icon>$sockiPlus</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>One week</v-list-item-title>
                      </v-list-item>
                      <v-list-item @click="dtAddOneMonth('licenseExpire')">
                        <v-list-item-icon>
                          <v-icon>$sockiPlus</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>One month</v-list-item-title>
                      </v-list-item>
                      <v-list-item @click="dtAddOneYear('licenseExpire')">
                        <v-list-item-icon>
                          <v-icon>$sockiPlus</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>One year</v-list-item-title>
                      </v-list-item>
                    </v-list>
                  </v-menu>
                </v-col>
              </template>
              <v-col>
                <gz-date-picker
                  ref="licenseExpire"
                  v-model="obj.licenseExpire"
                  :label="$sock.t('LicenseExpiration')"
                  :readonly="formState.readOnly"
                  :error-messages="form().serverErrors(this, 'licenseExpire')"
                  data-cy="licenseExpire"
                  @input="fieldValueChanged('licenseExpire')"
                ></gz-date-picker>
              </v-col>
            </v-row>
          </v-col>

          <v-col cols="12" sm="6" lg="4" xl="3">
            <v-row dense no-gutters>
              <template v-if="!formState.readOnly">
                <v-col cols="1">
                  <v-menu offset-y>
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn icon v-bind="attrs" v-on="on">
                        <v-icon small>$sockiPlus</v-icon>
                      </v-btn>
                    </template>
                    <v-list>
                      <v-list-item @click="dtAddOneWeek('maintenanceExpire')">
                        <v-list-item-icon>
                          <v-icon>$sockiPlus</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>One week</v-list-item-title>
                      </v-list-item>
                      <v-list-item @click="dtAddOneMonth('maintenanceExpire')">
                        <v-list-item-icon>
                          <v-icon>$sockiPlus</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>One month</v-list-item-title>
                      </v-list-item>
                      <v-list-item @click="dtAddOneYear('maintenanceExpire')">
                        <v-list-item-icon>
                          <v-icon>$sockiPlus</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>One year</v-list-item-title>
                      </v-list-item>
                    </v-list>
                  </v-menu>
                </v-col>
              </template>
              <v-col>
                <gz-date-picker
                  ref="maintenanceExpire"
                  v-model="obj.maintenanceExpire"
                  :label="$sock.t('LicenseMaintenanceExpire')"
                  :rules="[form().required(this, 'maintenanceExpire')]"
                  :readonly="formState.readOnly"
                  :error-messages="
                    form().serverErrors(this, 'maintenanceExpire')
                  "
                  data-cy="maintenanceExpire"
                  @input="fieldValueChanged('maintenanceExpire')"
                ></gz-date-picker>
              </v-col>
            </v-row>
          </v-col>

          <v-col cols="12" sm="6" lg="4" xl="3">
            <v-checkbox
              ref="active"
              v-model="obj.active"
              dense
              :readonly="formState.readOnly"
              :label="$sock.t('Active')"
              data-cy="active"
              :error-messages="form().serverErrors(this, 'active')"
              @change="fieldValueChanged('active')"
            ></v-checkbox>
          </v-col>

          <v-col cols="12" sm="6" lg="4" xl="3">
            <v-checkbox
              ref="renewal"
              v-model="obj.renewal"
              dense
              :readonly="formState.readOnly"
              :label="$sock.t('LicenseRenewal')"
              data-cy="renewal"
              :error-messages="form().serverErrors(this, 'renewal')"
              @change="fieldValueChanged('renewal')"
            ></v-checkbox>
          </v-col>

          <v-col cols="12" sm="6" lg="4" xl="3">
            <v-checkbox
              ref="trialMode"
              v-model="obj.trialMode"
              dense
              :readonly="formState.readOnly"
              :label="$sock.t('LicenseTrialMode')"
              data-cy="trialMode"
              :error-messages="form().serverErrors(this, 'trialMode')"
              @change="fieldValueChanged('trialMode')"
            ></v-checkbox>
          </v-col>

          <v-col cols="12" sm="6" lg="4" xl="3">
            <v-checkbox
              ref="notificationSent"
              v-model="obj.notificationSent"
              dense
              :readonly="formState.readOnly"
              :label="$sock.t('NotificationSent')"
              data-cy="notificationSent"
              :error-messages="form().serverErrors(this, 'notificationSent')"
              @change="fieldValueChanged('notificationSent')"
            ></v-checkbox>
          </v-col>

          <template v-if="obj.pGroup == 0 || obj.pGroup == 4">
            <v-col cols="12">
              <div class="text-h1 error--text">
                DO NOT USE, NOT A VALID PRODUCT GROUP
              </div>
            </v-col>
          </template>

          <!-- AyaNova 7 group -->
          <template v-if="obj.pGroup == 1">
            <v-row dense no-gutters>
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-select
                  ref="users"
                  v-model="obj.users"
                  dense
                  :items="selectLists.v7Users"
                  label="Scheduleable users"
                  :error-messages="form().serverErrors(this, 'users')"
                  :rules="[form().required(this, 'users')]"
                  @input="fieldValueChanged('users')"
                ></v-select>
              </v-col>
              <!-- WBI V7 LICENSE ITEM -->
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-row dense no-gutters>
                  <v-checkbox
                    ref="wbi"
                    v-model="obj.wbi"
                    class="mr-2"
                    dense
                    :readonly="formState.readOnly"
                    label="WBI"
                    data-cy="wbi"
                    :error-messages="form().serverErrors(this, 'wbi')"
                    @change="fieldValueChanged('wbi')"
                  ></v-checkbox>
                  <template v-if="obj.wbi">
                    <template v-if="!formState.readOnly">
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon small>$sockiPlus</v-icon>
                          </v-btn>
                        </template>
                        <v-list>
                          <v-list-item @click="dtAddOneWeek('wbiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One week</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneMonth('wbiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One month</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneYear('wbiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One year</v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </template>
                    <gz-date-picker
                      ref="wbiExpires"
                      v-model="obj.wbiExpires"
                      :rules="[form().required(this, 'wbiExpires')]"
                      label="Expires"
                      :readonly="formState.readOnly"
                      :error-messages="form().serverErrors(this, 'wbiExpires')"
                      data-cy="wbiExpires"
                      @input="fieldValueChanged('wbiExpires')"
                    ></gz-date-picker>
                  </template>
                </v-row>
              </v-col>
              <!-- /wbi v7 license item -->

              <!-- RI V7 LICENSE ITEM -->
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-row dense no-gutters>
                  <v-checkbox
                    ref="ri"
                    v-model="obj.ri"
                    class="mr-2"
                    dense
                    :readonly="formState.readOnly"
                    label="RI"
                    data-cy="ri"
                    :error-messages="form().serverErrors(this, 'ri')"
                    @change="fieldValueChanged('ri')"
                  ></v-checkbox>
                  <template v-if="obj.ri">
                    <template v-if="!formState.readOnly">
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon small>$sockiPlus</v-icon>
                          </v-btn>
                        </template>
                        <v-list>
                          <v-list-item @click="dtAddOneWeek('riExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One week</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneMonth('riExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One month</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneYear('riExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One year</v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </template>
                    <gz-date-picker
                      ref="riExpires"
                      v-model="obj.riExpires"
                      :rules="[form().required(this, 'riExpires')]"
                      label="Expires"
                      :readonly="formState.readOnly"
                      :error-messages="form().serverErrors(this, 'riExpires')"
                      data-cy="riExpires"
                      @input="fieldValueChanged('riExpires')"
                    ></gz-date-picker>
                  </template>
                </v-row>
              </v-col>
              <!-- /ri v7 license item -->

              <!-- MBI V7 LICENSE ITEM -->
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-row dense no-gutters>
                  <v-checkbox
                    ref="mbi"
                    v-model="obj.mbi"
                    class="mr-2"
                    dense
                    :readonly="formState.readOnly"
                    label="MBI"
                    data-cy="mbi"
                    :error-messages="form().serverErrors(this, 'mbi')"
                    @change="fieldValueChanged('mbi')"
                  ></v-checkbox>

                  <template v-if="obj.mbi">
                    <template v-if="!formState.readOnly">
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon small>$sockiPlus</v-icon>
                          </v-btn>
                        </template>
                        <v-list>
                          <v-list-item @click="dtAddOneWeek('mbiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One week</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneMonth('mbiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One month</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneYear('mbiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One year</v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </template>

                    <gz-date-picker
                      ref="mbiExpires"
                      v-model="obj.mbiExpires"
                      :rules="[form().required(this, 'mbiExpires')]"
                      label="Expires"
                      :readonly="formState.readOnly"
                      :error-messages="form().serverErrors(this, 'mbiExpires')"
                      data-cy="mbiExpires"
                      @input="fieldValueChanged('mbiExpires')"
                    ></gz-date-picker>
                  </template>
                </v-row>
              </v-col>
              <!-- /mbi v7 license item -->

              <!-- QBI V7 LICENSE ITEM -->
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-row dense no-gutters>
                  <v-checkbox
                    ref="qbi"
                    v-model="obj.qbi"
                    class="mr-2"
                    dense
                    :readonly="formState.readOnly"
                    label="QBI"
                    data-cy="qbi"
                    :error-messages="form().serverErrors(this, 'qbi')"
                    @change="fieldValueChanged('qbi')"
                  ></v-checkbox>
                  <template v-if="obj.qbi">
                    <template v-if="!formState.readOnly">
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon small>$sockiPlus</v-icon>
                          </v-btn>
                        </template>
                        <v-list>
                          <v-list-item @click="dtAddOneWeek('qbiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One week</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneMonth('qbiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One month</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneYear('qbiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One year</v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </template>
                    <gz-date-picker
                      ref="qbiExpires"
                      v-model="obj.qbiExpires"
                      :rules="[form().required(this, 'qbiExpires')]"
                      label="Expires"
                      :readonly="formState.readOnly"
                      :error-messages="form().serverErrors(this, 'qbiExpires')"
                      data-cy="qbiExpires"
                      @input="fieldValueChanged('qbiExpires')"
                    ></gz-date-picker>
                  </template>
                </v-row>
              </v-col>
              <!-- /qbi v7 license item -->

              <!-- Import Export CSV Duplicate V7 LICENSE ITEM -->
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-row dense no-gutters>
                  <v-checkbox
                    ref="importExportCSVDuplicate"
                    v-model="obj.importExportCSVDuplicate"
                    class="mr-2"
                    dense
                    :readonly="formState.readOnly"
                    label="CSV Duplicate "
                    data-cy="importExportCSVDuplicate"
                    :error-messages="
                      form().serverErrors(this, 'importExportCSVDuplicate')
                    "
                    @change="fieldValueChanged('importExportCSVDuplicate')"
                  ></v-checkbox>

                  <template v-if="obj.importExportCSVDuplicate">
                    <template v-if="!formState.readOnly">
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon small>$sockiPlus</v-icon>
                          </v-btn>
                        </template>
                        <v-list>
                          <v-list-item
                            @click="
                              dtAddOneWeek('importExportCSVDuplicateExpires')
                            "
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One week</v-list-item-title>
                          </v-list-item>
                          <v-list-item
                            @click="
                              dtAddOneMonth('importExportCSVDuplicateExpires')
                            "
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One month</v-list-item-title>
                          </v-list-item>
                          <v-list-item
                            @click="
                              dtAddOneYear('importExportCSVDuplicateExpires')
                            "
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One year</v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </template>

                    <gz-date-picker
                      ref="importExportCSVDuplicateExpires"
                      v-model="obj.importExportCSVDuplicateExpires"
                      :rules="[
                        form().required(this, 'importExportCSVDuplicateExpires')
                      ]"
                      label="Expires"
                      :readonly="formState.readOnly"
                      :error-messages="
                        form().serverErrors(
                          this,
                          'importExportCSVDuplicateExpires'
                        )
                      "
                      data-cy="importExportCSVDuplicateExpires"
                      @input="
                        fieldValueChanged('importExportCSVDuplicateExpires')
                      "
                    ></gz-date-picker>
                  </template>
                </v-row>
              </v-col>
              <!-- /importExportCSVDuplicate v7 license item -->

              <!-- Quick Notification V7 LICENSE ITEM -->
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-row dense no-gutters>
                  <v-checkbox
                    ref="quickNotification"
                    v-model="obj.quickNotification"
                    class="mr-2"
                    dense
                    :readonly="formState.readOnly"
                    label="Quick Notification"
                    data-cy="quickNotification"
                    :error-messages="
                      form().serverErrors(this, 'quickNotification')
                    "
                    @change="fieldValueChanged('quickNotification')"
                  ></v-checkbox>
                  <template v-if="obj.quickNotification">
                    <template v-if="!formState.readOnly">
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon small>$sockiPlus</v-icon>
                          </v-btn>
                        </template>
                        <v-list>
                          <v-list-item
                            @click="dtAddOneWeek('quickNotificationExpires')"
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One week</v-list-item-title>
                          </v-list-item>
                          <v-list-item
                            @click="dtAddOneMonth('quickNotificationExpires')"
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One month</v-list-item-title>
                          </v-list-item>
                          <v-list-item
                            @click="dtAddOneYear('quickNotificationExpires')"
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One year</v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </template>
                    <gz-date-picker
                      ref="quickNotificationExpires"
                      v-model="obj.quickNotificationExpires"
                      :rules="[
                        form().required(this, 'quickNotificationExpires')
                      ]"
                      label="Expires"
                      :readonly="formState.readOnly"
                      :error-messages="
                        form().serverErrors(this, 'quickNotificationExpires')
                      "
                      data-cy="quickNotificationExpires"
                      @input="fieldValueChanged('quickNotificationExpires')"
                    ></gz-date-picker>
                  </template>
                </v-row>
              </v-col>
              <!-- /quickNotification v7 license item -->

              <!-- Export to XLS V7 LICENSE ITEM -->
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-row dense no-gutters>
                  <v-checkbox
                    ref="exportToXLS"
                    v-model="obj.exportToXLS"
                    class="mr-2"
                    dense
                    :readonly="formState.readOnly"
                    label="Export to XLS"
                    data-cy="exportToXLS"
                    :error-messages="form().serverErrors(this, 'exportToXLS')"
                    @change="fieldValueChanged('exportToXLS')"
                  ></v-checkbox>
                  <template v-if="obj.exportToXLS">
                    <template v-if="!formState.readOnly">
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon small>$sockiPlus</v-icon>
                          </v-btn>
                        </template>
                        <v-list>
                          <v-list-item
                            @click="dtAddOneWeek('exportToXLSExpires')"
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One week</v-list-item-title>
                          </v-list-item>
                          <v-list-item
                            @click="dtAddOneMonth('exportToXLSExpires')"
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One month</v-list-item-title>
                          </v-list-item>
                          <v-list-item
                            @click="dtAddOneYear('exportToXLSExpires')"
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One year</v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </template>
                    <gz-date-picker
                      ref="exportToXLSExpires"
                      v-model="obj.exportToXLSExpires"
                      :rules="[form().required(this, 'exportToXLSExpires')]"
                      label="Expires"
                      :readonly="formState.readOnly"
                      :error-messages="
                        form().serverErrors(this, 'exportToXLSExpires')
                      "
                      data-cy="exportToXLSExpires"
                      @input="fieldValueChanged('exportToXLSExpires')"
                    ></gz-date-picker>
                  </template>
                </v-row>
              </v-col>
              <!-- /exportToXLS v7 license item -->

              <!-- Outlook schedule V7 LICENSE ITEM -->
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-row dense no-gutters>
                  <v-checkbox
                    ref="outlookSchedule"
                    v-model="obj.outlookSchedule"
                    class="mr-2"
                    dense
                    :readonly="formState.readOnly"
                    label="Outlook schedule"
                    data-cy="outlookSchedule"
                    :error-messages="
                      form().serverErrors(this, 'outlookSchedule')
                    "
                    @change="fieldValueChanged('outlookSchedule')"
                  ></v-checkbox>
                  <template v-if="obj.outlookSchedule">
                    <template v-if="!formState.readOnly">
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon small>$sockiPlus</v-icon>
                          </v-btn>
                        </template>
                        <v-list>
                          <v-list-item
                            @click="dtAddOneWeek('outlookScheduleExpires')"
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One week</v-list-item-title>
                          </v-list-item>
                          <v-list-item
                            @click="dtAddOneMonth('outlookScheduleExpires')"
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One month</v-list-item-title>
                          </v-list-item>
                          <v-list-item
                            @click="dtAddOneYear('outlookScheduleExpires')"
                          >
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One year</v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </template>
                    <gz-date-picker
                      ref="outlookScheduleExpires"
                      v-model="obj.outlookScheduleExpires"
                      :rules="[form().required(this, 'outlookScheduleExpires')]"
                      label="Expires"
                      :readonly="formState.readOnly"
                      :error-messages="
                        form().serverErrors(this, 'outlookScheduleExpires')
                      "
                      data-cy="outlookScheduleExpires"
                      @input="fieldValueChanged('outlookScheduleExpires')"
                    ></gz-date-picker>
                  </template>
                </v-row>
              </v-col>
              <!-- /outlookSchedule v7 license item -->

              <!-- QBOI V7 LICENSE ITEM -->
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-row dense no-gutters>
                  <v-checkbox
                    ref="qboi"
                    v-model="obj.qboi"
                    class="mr-2"
                    dense
                    :readonly="formState.readOnly"
                    label="QBOI"
                    data-cy="qboi"
                    :error-messages="form().serverErrors(this, 'qboi')"
                    @change="fieldValueChanged('qboi')"
                  ></v-checkbox>
                  <template v-if="obj.qboi">
                    <template v-if="!formState.readOnly">
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon small>$sockiPlus</v-icon>
                          </v-btn>
                        </template>
                        <v-list>
                          <v-list-item @click="dtAddOneWeek('qboiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One week</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneMonth('qboiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One month</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneYear('qboiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One year</v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </template>
                    <gz-date-picker
                      ref="qboiExpires"
                      v-model="obj.qboiExpires"
                      :rules="[form().required(this, 'qboiExpires')]"
                      label="Expires"
                      :readonly="formState.readOnly"
                      :error-messages="form().serverErrors(this, 'qboiExpires')"
                      data-cy="qboiExpires"
                      @input="fieldValueChanged('qboiExpires')"
                    ></gz-date-picker>
                  </template>
                </v-row>
              </v-col>
              <!-- /qboi v7 license item -->

              <!-- PTI V7 LICENSE ITEM -->
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-row dense no-gutters>
                  <v-checkbox
                    ref="pti"
                    v-model="obj.pti"
                    class="mr-2"
                    dense
                    :readonly="formState.readOnly"
                    label="PTI"
                    data-cy="pti"
                    :error-messages="form().serverErrors(this, 'pti')"
                    @change="fieldValueChanged('pti')"
                  ></v-checkbox>
                  <template v-if="obj.pti">
                    <template v-if="!formState.readOnly">
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon small>$sockiPlus</v-icon>
                          </v-btn>
                        </template>
                        <v-list>
                          <v-list-item @click="dtAddOneWeek('ptiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One week</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneMonth('ptiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One month</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneYear('ptiExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One year</v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </template>
                    <gz-date-picker
                      ref="ptiExpires"
                      v-model="obj.ptiExpires"
                      :rules="[form().required(this, 'ptiExpires')]"
                      label="Expires"
                      :readonly="formState.readOnly"
                      :error-messages="form().serverErrors(this, 'ptiExpires')"
                      data-cy="ptiExpires"
                      @input="fieldValueChanged('ptiExpires')"
                    ></gz-date-picker>
                  </template>
                </v-row>
              </v-col>
              <!-- /pti v7 license item -->

              <!-- OLI V7 LICENSE ITEM -->
              <v-col cols="12" sm="6" lg="4" xl="3">
                <v-row dense no-gutters>
                  <v-checkbox
                    ref="oli"
                    v-model="obj.oli"
                    class="mr-2"
                    dense
                    :readonly="formState.readOnly"
                    label="OLI"
                    data-cy="oli"
                    :error-messages="form().serverErrors(this, 'oli')"
                    @change="fieldValueChanged('oli')"
                  ></v-checkbox>
                  <template v-if="obj.oli">
                    <template v-if="!formState.readOnly">
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn icon v-bind="attrs" v-on="on">
                            <v-icon small>$sockiPlus</v-icon>
                          </v-btn>
                        </template>
                        <v-list>
                          <v-list-item @click="dtAddOneWeek('oliExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One week</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneMonth('oliExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One month</v-list-item-title>
                          </v-list-item>
                          <v-list-item @click="dtAddOneYear('oliExpires')">
                            <v-list-item-icon>
                              <v-icon>$sockiPlus</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>One year</v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </template>
                    <gz-date-picker
                      ref="oliExpires"
                      v-model="obj.oliExpires"
                      :rules="[form().required(this, 'oliExpires')]"
                      label="Expires"
                      :readonly="formState.readOnly"
                      :error-messages="form().serverErrors(this, 'oliExpires')"
                      data-cy="oliExpires"
                      @input="fieldValueChanged('oliExpires')"
                    ></gz-date-picker>
                  </template>
                </v-row>
              </v-col>
              <!-- /oli v7 license item -->
            </v-row>
            <!-- /ayanova 7 group items -->
          </template>

          <!-- RavenPerpetual -->
          <template v-if="obj.pGroup == 2">
            <v-col cols="12" sm="6" lg="4" xl="3">
              <v-text-field
                ref="users"
                v-model="obj.users"
                dense
                :readonly="formState.readOnly"
                label="Users (inside)"
                :error-messages="form().serverErrors(this, 'users')"
                :rules="[form().required(this, 'users')]"
                data-cy="users"
                type="number"
                step="none"
                @input="fieldValueChanged('users')"
              ></v-text-field>
            </v-col>

            <v-col cols="12" sm="6" lg="4" xl="3">
              <v-text-field
                ref="dbId"
                v-model="obj.dbId"
                dense
                :readonly="formState.readOnly"
                :label="$sock.t('DatabaseID')"
                :rules="[form().required(this, 'dbId')]"
                :error-messages="form().serverErrors(this, 'dbId')"
                data-cy="dbId"
                @input="fieldValueChanged('dbId')"
              ></v-text-field>
            </v-col>
            <v-col cols="12" sm="6" lg="4" xl="3">
              <v-checkbox
                ref="trialMode"
                v-model="obj.trialMode"
                dense
                :readonly="formState.readOnly"
                :label="$sock.t('TrialLicenseRequest')"
                data-cy="trialMode"
                :error-messages="form().serverErrors(this, 'trialMode')"
                @change="fieldValueChanged('trialMode')"
              ></v-checkbox>
            </v-col>
          </template>
          <!-- RavenSubscription -->
          <template v-if="obj.pGroup == 3">
            <v-col cols="12" sm="6" lg="4" xl="3">
              <v-text-field
                ref="users"
                v-model="obj.users"
                dense
                :readonly="formState.readOnly"
                label="Users (inside)"
                :error-messages="form().serverErrors(this, 'users')"
                :rules="[form().required(this, 'users')]"
                data-cy="users"
                type="number"
                step="none"
                @input="fieldValueChanged('users')"
              ></v-text-field>
            </v-col>

            <v-col cols="12" sm="6" lg="4" xl="3">
              <v-text-field
                ref="customerUsers"
                v-model="obj.customerUsers"
                dense
                :readonly="formState.readOnly"
                label="Customer Users"
                :error-messages="form().serverErrors(this, 'customerUsers')"
                :rules="[form().required(this, 'customerUsers')]"
                data-cy="customerUsers"
                type="number"
                step="none"
                @input="fieldValueChanged('customerUsers')"
              ></v-text-field>
            </v-col>

            <v-col cols="12" sm="6" lg="4" xl="3">
              <v-text-field
                ref="maxDataGB"
                v-model="obj.maxDataGB"
                dense
                :readonly="formState.readOnly"
                label="Max Data GB"
                :error-messages="form().serverErrors(this, 'maxDataGB')"
                :rules="[form().required(this, 'maxDataGB')]"
                data-cy="maxDataGB"
                type="number"
                step="none"
                @input="fieldValueChanged('maxDataGB')"
              ></v-text-field>
            </v-col>
            <v-col cols="12" sm="6" lg="4" xl="3">
              <v-text-field
                ref="dbId"
                v-model="obj.dbId"
                dense
                :readonly="formState.readOnly"
                :label="$sock.t('DatabaseID')"
                :rules="[form().required(this, 'dbId')]"
                :error-messages="form().serverErrors(this, 'dbId')"
                data-cy="dbId"
                @input="fieldValueChanged('dbId')"
              ></v-text-field>
            </v-col>

            <v-checkbox
              ref="trialMode"
              v-model="obj.trialMode"
              dense
              :readonly="formState.readOnly"
              :label="$sock.t('TrialLicenseRequest')"
              data-cy="trialMode"
              :error-messages="form().serverErrors(this, 'trialMode')"
              @change="fieldValueChanged('trialMode')"
            ></v-checkbox>
          </template>

          <v-col cols="12" sm="6" lg="4" xl="3">
            <gz-date-time-picker
              ref="fetchedOn"
              v-model="obj.fetchedOn"
              readonly
              :label="$sock.t('LicenseFetchedOn')"
            ></gz-date-time-picker>
          </v-col>

          <v-col cols="12">
            <v-textarea
              ref="key"
              v-model="obj.key"
              dense
              readonly
              :label="$sock.t('LicenseKey')"
              auto-grow
            ></v-textarea>
          </v-col>
          <template v-if="obj.pGroup == 1">
            <v-col cols="12">
              <v-text-field
                ref="fetchCode"
                v-model="obj.fetchCode"
                dense
                readonly
                :label="$sock.t('LicenseFetchCode')"
                :error-messages="form().serverErrors(this, 'fetchCode')"
                data-cy="fetchCode"
                @input="fieldValueChanged('fetchCode')"
              ></v-text-field>
            </v-col>
          </template>
          <!-- --------------------------------- -->

          <v-col v-if="form().showMe(this, 'Tags')" cols="12">
            <gz-tag-picker
              ref="tags"
              v-model="obj.tags"
              :readonly="formState.readOnly"
              data-cy="tags"
              :error-messages="form().serverErrors(this, 'tags')"
              @input="fieldValueChanged('tags')"
            ></gz-tag-picker>
          </v-col>

          <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
            <gz-wiki
              ref="wiki"
              v-model="obj.wiki"
              :aya-type="sockType"
              :aya-id="obj.id"
              :readonly="formState.readOnly"
              @input="fieldValueChanged('wiki')"
            ></gz-wiki
          ></v-col>
        </v-row>
      </v-form>
    </div>
    <v-overlay :value="!formState.ready || formState.loading">
      <v-progress-circular indeterminate :size="64" />
    </v-overlay>
  </div>
</template>
<script>
const FORM_KEY = "license-edit";
const API_BASE_URL = "license/";
const FORM_CUSTOM_TEMPLATE_KEY = "License";
export default {
  data() {
    return {
      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
      obj: {
        id: 0,
        concurrency: 0,
        created: window.$gz.locale.nowUTC8601String(),
        active: false, //here, active means it's ready for pickup
        customerId: null,
        pGroup: 1, //default v7 since manually probably most common
        regTo: null,
        key: null,
        fetchCode: null,
        fetchEmail: null,
        fetchedOn: null, //here, non null fetchedOn is read only
        dbId: null,
        licenseExpire: null, //what it is in v8, "lockdate" in v7
        maintenanceExpire: null,
        notificationSent: false,
        wiki: null,
        tags: [],
        trialMode: false,
        renewal: false,
        //dto only props
        customerUsers: 250,
        maxDataGB: 20,
        users: 1,
        wbi: false,
        wbiExpires: null,
        mbi: false,
        mbiExpires: null,
        ri: false,
        riExpires: null,
        qbi: false,
        qbiExpires: null,
        qboi: false,
        qboiExpires: null,
        pti: false,
        ptiExpires: null,
        quickNotification: false,
        quickNotificationExpires: null,
        exportToXLS: false,
        exportToXLSExpires: null,
        outlookSchedule: false,
        outlookScheduleExpires: null,
        oli: false,
        oliExpires: null,
        importExportCSVDuplicate: false,
        importExportCSVDuplicateExpires: null
      },
      selectLists: {
        pGroups: [],
        v7Users: [1, 5, 10, 15, 20, 50, 999]
      },
      formState: {
        ready: false,
        dirty: false,
        valid: true,
        readOnly: false,
        loading: true,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      },
      rights: window.$gz.role.defaultRightsObject(),
      sockType: window.$gz.type.License,
      timeZoneName: window.$gz.locale.getResolvedTimeZoneName()
    };
  },
  watch: {
    formState: {
      handler: function(val) {
        if (this.formState.loading) {
          return;
        }

        if (val.dirty && val.valid && !val.readOnly) {
          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
        } else {
          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
        }

        if (!val.dirty && val.valid) {
          window.$gz.eventBus.$emit(
            "menu-enable-item",
            FORM_KEY + ":duplicate"
          );
          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
        } else {
          window.$gz.eventBus.$emit(
            "menu-disable-item",
            FORM_KEY + ":duplicate"
          );
          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
        }
      },
      deep: true
    }
  },
  async created() {
    const vm = this;
    try {
      await initForm(vm);
      vm.rights = window.$gz.role.getRights(window.$gz.type.License);
      vm.formState.readOnly = !vm.rights.change;
      window.$gz.eventBus.$on("menu-click", clickHandler);
      //---------------------------------
      let setDirty = false;
      //id 0 means create or duplicate to new
      if (vm.$route.params.recordid != 0) {
        //is there already an obj from a prior operation?
        if (this.$route.params.obj) {
          //yes, no need to fetch it
          this.obj = this.$route.params.obj;
        } else {
          await vm.getDataFromApi(vm.$route.params.recordid);
        }
      } else {
        //Might be a duplicate and contain another record
        if (this.$route.params.obj) {
          this.obj = this.$route.params.obj;
          this.obj.concurrency = undefined;
          this.obj.id = 0;
          this.obj.key = null;
          this.obj.active = false;
          this.obj.fetchedOn = null;
          this.obj.fetchCode = null;
          this.obj.licenseExpire = null;
          this.obj.created = window.$gz.locale.nowUTC8601String();
          this.obj.notificationSent = false;
          // this.obj.name = `${this.obj.name} - ${window.$gz.translation.get(
          //   "Copy"
          // )}`;
          setDirty = true;
        }
      }
      window.$gz.form.setFormState({
        vm: vm,
        loading: false,
        dirty: setDirty,
        valid: true
      });
      if (this.obj.fetchedOn != null) {
        this.formState.readOnly = true;
      }
      //----------------------------
      generateMenu(vm);
    } catch (error) {
      window.$gz.errorHandler.handleFormError(error, vm);
    } finally {
      vm.formState.ready = true;
    }
  },
  async beforeRouteLeave(to, from, next) {
    if (!this.formState.dirty || JUST_DELETED) {
      next();
      return;
    }
    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
      next();
    } else {
      next(false);
    }
  },
  beforeDestroy() {
    window.$gz.eventBus.$off("menu-click", clickHandler);
  },
  methods: {
    canSave: function() {
      return this.formState.valid && this.formState.dirty;
    },
    canDuplicate: function() {
      return this.formState.valid && !this.formState.dirty;
    },
    sockTypes: function() {
      return window.$gz.type;
    },
    form() {
      return window.$gz.form;
    },
    fieldValueChanged(ref) {
      if (ref == "fetchedOn") {
        window.$gz.form.setFormState({
          vm: this,
          readOnly: this.obj.fetchedOn != null
        });
        this.$nextTick(() => {
          generateMenu(this);
        });
      }
      if (
        this.formState.ready &&
        !this.formState.loading &&
        !this.formState.readOnly
      ) {
        window.$gz.form.fieldValueChanged(this, ref);
      }
    },
    async customerChanged() {
      const id = this.obj.customerId;
      if (!id || id == 0) {
        return;
      }
      const res = await window.$gz.api.get(`customer/${id}`);
      if (res.error) {
        window.$gz.eventBus.$emit(
          "notify-warning",
          window.$gz.errorHandler.errorToString(res, this)
        );
      } else {
        /*
         public enum ProductGroup
    {
        Misc = 0,
        AyaNova7 = 1,
        RavenPerpetual = 2,
        RavenSubscription = 3,
        NotSet = 4
    }
        */
        //Use customer record to update stuff here
        this.obj.fetchEmail = res.data.emailAddress;
        this.obj.regTo = res.data.name;
        if (this.pGroup == 3 || this.pGroup == 2) {
          //RAVEN
          this.obj.dbId = res.data.dbId;
        }
      }
    },
    dtAddOneWeek: function(propName) {
      addToDate(this, propName, {
        days: 7
      });
    },
    dtAddOneMonth: function(propName) {
      addToDate(this, propName, {
        months: 1
      });
    },
    dtAddOneYear: function(propName) {
      addToDate(this, propName, {
        years: 1
      });
    },
    dtAddToAll: function(span, revoke) {
      //iterate all the dates, if there is a value entered then add on to it's existing value time period
      //if no date entered then add on it now plus time period
      /*
      
          Misc = 0,
        AyaNova7 = 1,
        RavenPerpetual = 2,
        RavenSubscription = 3
      */
      //all pgroups have maint expire valid
      addToDate(this, "maintenanceExpire", span);

      if (this.obj.pGroup == 3 || revoke == true) {
        // RavenSubscription = 3
        addToDate(this, "licenseExpire", span);
      }

      if (this.obj.pGroup == 1) {
        //AyaNova7 = 1,
        if (this.obj.wbi != null) {
          addToDate(this, "wbiExpires", span);
        }
        if (this.obj.mbi) {
          addToDate(this, "mbiExpires", span);
        }
        if (this.obj.ri) {
          addToDate(this, "riExpires", span);
        }
        if (this.obj.qbi) {
          addToDate(this, "qbiExpires", span);
        }
        if (this.obj.qboi) {
          addToDate(this, "qboiExpires", span);
        }
        if (this.obj.pti) {
          addToDate(this, "ptiExpires", span);
        }
        if (this.obj.quickNotification) {
          addToDate(this, "quickNotificationExpires", span);
        }
        if (this.obj.exportToXLS) {
          addToDate(this, "exportToXLSExpires", span);
        }
        if (this.obj.outlookSchedule) {
          addToDate(this, "outlookScheduleExpires", span);
        }
        if (this.obj.oli) {
          addToDate(this, "oliExpires", span);
        }
        if (this.obj.importExportCSVDuplicate) {
          addToDate(this, "importExportCSVDuplicateExpires", span);
        }
      }
    },

    async getDataFromApi(recordId) {
      const vm = this;
      window.$gz.form.setFormState({
        vm: vm,
        loading: true
      });
      if (!recordId) {
        throw new Error(FORM_KEY + "::getDataFromApi -> Missing recordID!");
      }
      try {
        window.$gz.form.deleteAllErrorBoxErrors(vm);
        const res = await window.$gz.api.get(API_BASE_URL + recordId);
        if (res.error) {
          if (res.error.code == "2010") {
            window.$gz.form.handleObjectNotFound(vm);
          }
          vm.formState.serverError = res.error;
          window.$gz.form.setErrorBoxErrors(vm);
        } else {
          vm.obj = res.data;
          generateMenu(vm);
          window.$gz.form.setFormState({
            vm: vm,
            dirty: false,
            valid: true,
            loading: false
          });
        }
      } catch (error) {
        window.$gz.errorHandler.handleFormError(error, vm);
      } finally {
        window.$gz.form.setFormState({
          vm: vm,
          loading: false
        });
      }
    },
    async submit() {
      const vm = this;
      if (vm.canSave == false) {
        return;
      }
      try {
        window.$gz.form.setFormState({
          vm: vm,
          loading: true
        });
        window.$gz.form.deleteAllErrorBoxErrors(vm);
        const res = await window.$gz.api.upsert(API_BASE_URL, vm.obj);
        if (res.error) {
          vm.formState.serverError = res.error;
          window.$gz.form.setErrorBoxErrors(vm);
        } else {
          if (res.data.id) {
            //POST
            vm.obj = res.data;
            this.$router.replace({
              name: "license-edit",
              params: {
                recordid: res.data.id,
                obj: res.data
              }
            });
          } else {
            //PUT
            vm.obj = res.data;
            // vm.obj.concurrency = res.data.concurrency;
            // vm.obj.key=res.data.key;
          }
          window.$gz.form.setFormState({
            vm: vm,
            dirty: false,
            valid: true
          });
        }
      } catch (ex) {
        window.$gz.errorHandler.handleFormError(ex, vm);
      } finally {
        window.$gz.form.setFormState({
          vm: vm,
          loading: false
        });
      }
    },
    async remove() {
      try {
        const dialogResult = await window.$gz.dialog.confirmDelete();
        if (dialogResult != true) {
          return;
        }
        window.$gz.form.setFormState({
          vm: this,
          loading: true
        });

        if (this.$route.params.recordid == 0) {
          JUST_DELETED = true;

          this.$router.go(-1);
        } else {
          window.$gz.form.deleteAllErrorBoxErrors(this);
          const res = await window.$gz.api.remove(
            API_BASE_URL + this.$route.params.recordid
          );
          if (res.error) {
            this.formState.serverError = res.error;
            window.$gz.form.setErrorBoxErrors(this);
          } else {
            JUST_DELETED = true;
            this.$router.go(-1);
          }
        }
      } catch (error) {
        window.$gz.errorHandler.handleFormError(error, this);
      } finally {
        window.$gz.form.setFormState({
          vm: this,
          loading: false
        });
      }
    },
    duplicate() {
      this.$router.push({
        name: "license-edit",
        params: {
          recordid: 0,
          obj: this.obj
        }
      });
    }
  }
};

/////////////////////////////
//
//
async function clickHandler(menuItem) {
  if (!menuItem) {
    return;
  }
  const m = window.$gz.menu.parseMenuItem(menuItem);
  if (m.owner == FORM_KEY && !m.disabled) {
    switch (m.key) {
      case "save":
        m.vm.submit();
        break;

      case "report":
        {
          const res = await m.vm.$refs.reportSelector.open(
            {
              AType: window.$gz.type.License,
              selectedRowIds: [m.vm.obj.id]
            },
            m.id
          );
          if (res == null) {
            return;
          }
          window.$gz.form.setLastReportMenuItem(FORM_KEY, res, m.vm);
        }
        break;

      case "delete":
        m.vm.remove();
        break;
      case "revoke":
        m.vm.obj.regTo = "REVOKED";
        m.vm.dtAddToAll({ days: -1 }, true);
        break;
      case "new":
        m.vm.$router.push({
          name: "license-edit",
          params: { recordid: 0 }
        });
        break;
      case "duplicate":
        m.vm.duplicate();
        break;
      case "plus-one-week":
        {
          m.vm.dtAddToAll({ days: 7 });
        }
        break;
      case "plus-one-month":
        {
          m.vm.dtAddToAll({ months: 1 });
        }
        break;
      case "plus-one-year":
        {
          m.vm.dtAddToAll({ years: 1 });
        }
        break;

      default:
        window.$gz.eventBus.$emit(
          "notify-warning",
          FORM_KEY + "::context click: [" + m.key + "]"
        );
    }
  }
}

//////////////////////
//
//
function generateMenu(vm) {
  const menuOptions = {
    isMain: false,
    readOnly: vm.formState.readOnly,
    icon: "$sockiHandHoldingWater",
    title: "License",
    formData: {
      sockType: window.$gz.type.License,
      recordId: vm.$route.params.recordid,
      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
      recordName: vm.obj.name
    },
    menuItems: []
  };

  if (vm.rights.change) {
    menuOptions.menuItems.push({
      title: "Save",
      icon: "$sockiSave",
      surface: true,
      key: FORM_KEY + ":save",
      vm: vm
    });
  }

  menuOptions.menuItems.push({
    title: "Report",
    icon: "$sockiFileAlt",
    key: FORM_KEY + ":report",
    vm: vm
  });

  const lastReport = window.$gz.form.getLastReport(FORM_KEY);
  if (lastReport != null) {
    menuOptions.menuItems.push({
      title: lastReport.name,
      notrans: true,
      icon: "$sockiFileAlt",
      key: FORM_KEY + ":report:" + lastReport.id,
      vm: vm
    });
  }

  if (vm.rights.change) {
    menuOptions.menuItems.push({
      title: "New",
      icon: "$sockiPlus",
      key: FORM_KEY + ":new",
      vm: vm
    });
  }

  if (vm.rights.change && vm.$route.params.recordid != 0) {
    menuOptions.menuItems.push({
      title: "Duplicate",
      icon: "$sockiClone",
      key: FORM_KEY + ":duplicate",
      vm: vm
    });
  }
  if (vm.rights.delete && vm.$route.params.recordid != 0) {
    menuOptions.menuItems.push({
      title: "Delete",
      icon: "$sockiTrashAlt",
      surface: false,
      key: FORM_KEY + ":delete",
      vm: vm
    });
  }

  menuOptions.menuItems.push({ divider: true, inset: false });

  menuOptions.menuItems.push({
    title: "One week all",
    notrans: true,
    icon: "$sockiPlus",
    key: FORM_KEY + ":plus-one-week",
    vm: vm
  });
  menuOptions.menuItems.push({
    title: "One month all",
    notrans: true,
    icon: "$sockiPlus",
    key: FORM_KEY + ":plus-one-month",
    vm: vm
  });
  menuOptions.menuItems.push({
    title: "One year all",
    notrans: true,
    icon: "$sockiPlus",
    key: FORM_KEY + ":plus-one-year",
    vm: vm
  });

  menuOptions.menuItems.push({ divider: true, inset: false });

  menuOptions.menuItems.push({
    title: "Revoke",
    notrans: true,
    icon: "$sockiSkullCrossbones",
    key: FORM_KEY + ":revoke",
    vm: vm
  });

  //   menuOptions.menuItems.push({
  //     title: "PMList",
  //     icon: "$sockiBusinessTime",
  //     key: FORM_KEY + ":PMList",
  //     vm: vm
  //   });

  menuOptions.menuItems.push({ divider: true, inset: false });
  window.$gz.eventBus.$emit("menu-change", menuOptions);
}

let JUST_DELETED = false;

/////////////////////////////////
//
//
async function initForm(vm) {
  await fetchTranslatedText();
  await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
  await populateSelectionLists(vm);
}

//////////////////////////////////////////////////////////
//
// Ensures UI translated text is available
//
async function fetchTranslatedText() {
  await window.$gz.translation.cacheTranslations([
    "LicenseRegTo",
    "LicenseKey",
    "LicenseFetchCode",
    "LicenseFetchEmail",
    "LicenseFetchedOn",
    "LicenseDBID",
    "LicenseMaintenanceExpire",
    "LicenseExpiration",
    "ProductGroup",
    "Customer",
    "DatabaseID",
    "TrialLicenseRequest",
    "LicenseTrialMode",
    "LicenseRenewal",
    "NotificationSent"
  ]);
}
//////////////////////
//
//
async function populateSelectionLists(vm) {
  //ensure the pick lists required are pre-fetched
  await window.$gz.enums.fetchEnumList("productgroup");
  vm.selectLists.pGroups = window.$gz.enums.getSelectionList("productgroup");
}

//////////////////////
//
//
function addToDate(vm, propName, span) {
  if (vm.obj[propName] == null) {
    vm.obj[propName] = window.$gz.locale.addDurationToUTC8601String(
      window.$gz.locale.nowUTC8601String(vm.timeZoneName),
      span
    );
  } else {
    vm.obj[propName] = window.$gz.locale.addDurationToUTC8601String(
      vm.obj[propName],
      span
    );
  }
}
</script>
