// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

<template>
  <div>
    <a-row :gutter="12">
      <a-col :md="24" :lg="17">
        <a-card :bordered="true" :title="$t('label.new.autoscale.vmgroup')">
          <a-form
            v-ctrl-enter="handleSubmit"
            :ref="formRef"
            :model="form"
            :rules="rules"
            @finish="handleSubmit"
            layout="vertical"
          >
            <a-steps direction="vertical" size="small">
              <a-step :title="$t('label.select.a.zone')" status="process">
                <template #description>
                  <div style="margin-top: 15px">
                    <span>{{ $t('message.select.a.zone') }}</span><br/>
                    <a-form-item :label="$t('label.zoneid')" name="zoneid" ref="zoneid">
                      <zone-block-radio-group-select
                        :items="zones"
                        :selectedValue="form.zoneid"
                        @change="onSelectZoneId" />
                    </a-form-item>
                  </div>
                </template>
              </a-step>
              <a-step
                v-if="!zoneSelected || isZoneSelectedMultiArch"
                :title="$t('label.arch')"
                :status="zoneSelected ? 'process' : 'wait'">
                <template #description>
                  <div v-if="zoneSelected" style="margin-top: 15px">
                    {{ $t('message.instance.architecture') }}
                    <block-radio-group-select
                      style="margin-top: 5px;"
                      :items="architectureTypes.opts"
                      :selectedValue="selectedArchitecture"
                      @change="changeArchitecture">
                        <template #radio-option="{ item }">
                          <span>{{ item.name || item.description }}</span>
                        </template>
                        <template #select-option="{ item }">
                          <span>{{ item.name || item.description }}</span>
                        </template>
                    </block-radio-group-select>
                  </div>
                </template>
              </a-step>
              <a-step
                :title="$t('label.template.select')"
                :status="zoneSelected ? 'process' : 'wait'">
                <template #description>
                  <div v-if="zoneSelected" style="margin-top: 15px">
                    <os-based-image-selection
                      v-if="isModernImageSelection"
                      :imageTypeSelectionAllowed="false"
                      :imagePreSelected="!!this.queryTemplateId"
                      :guestOsCategoriesSelectionDisallowed="!this.queryGuestOsCategoryId && !!this.queryTemplateId"
                      :guestOsCategories="options.guestOsCategories"
                      :guestOsCategoriesLoading="loading.guestOsCategories"
                      :selectedGuestOsCategoryId="form.guestoscategoryid"
                      :imageItems="options.templates"
                      :imagesLoading="loading.templates"
                      :diskSizeSelectionDeployAsIsMessageVisible="template && template.deployasis"
                      :rootDiskOverrideDisabled="rootDiskSizeFixed > 0 || (template && template.deployasis) || showOverrideDiskOfferingOption"
                      :rootDiskOverrideChecked="form.rootdisksizeitem"
                      :filterOption="filterOption"
                      :preFillContent="dataPreFill"
                      @change-guest-os-category="onSelectGuestOsCategory"
                      @handle-image-search-filter="($event) => fetchAllTemplates($event)"
                      @update-image="updateFieldValue"
                      @update-disk-size="updateFieldValue" />
                    <a-card
                      v-else
                      :tabList="imageTypeList"
                      :activeTabKey="imageType">
                      <div>
                        {{ $t('message.template.desc') }}
                        <template-iso-selection
                          input-decorator="templateid"
                          :items="options.templates"
                          :selected="imageType"
                          :loading="loading.templates"
                          :preFillContent="dataPreFill"
                          :key="templateKey"
                          @handle-search-filter="($event) => fetchAllTemplates($event)"
                          @update-template-iso="updateFieldValue" />
                         <div>
                          {{ $t('label.override.rootdisk.size') }}
                          <a-switch
                            v-model:checked="form.rootdisksizeitem"
                            :disabled="rootDiskSizeFixed > 0 || (template && template.deployasis) || showOverrideDiskOfferingOption"
                            @change="val => { showRootDiskSizeChanger = val }"
                            style="margin-left: 10px;"/>
                          <div v-if="template && template.deployasis">  {{ $t('message.deployasis') }} </div>
                        </div>
                        <disk-size-selection
                          v-if="showRootDiskSizeChanger"
                          input-decorator="rootdisksize"
                          :preFillContent="dataPreFill"
                          :isCustomized="true"
                          :minDiskSize="dataPreFill.minrootdisksize"
                          @update-disk-size="updateFieldValue"
                          style="margin-top: 10px;"/>
                      </div>
                    </a-card>
                    <a-form-item class="form-item-hidden">
                      <a-input v-model:value="form.templateid" />
                    </a-form-item>
                    <a-form-item class="form-item-hidden">
                      <a-input v-model:value="form.rootdisksize" />
                    </a-form-item>
                  </div>
                </template>
              </a-step>
              <a-step
                :title="$t('label.serviceofferingid')"
                :status="zoneSelected ? 'process' : 'wait'">
                <template #description>
                  <div v-if="zoneSelected">
                    <a-form-item v-if="zoneSelected && templateConfigurationExists" name="templateConfiguration" ref="templateConfiguration">
                      <template #label>
                        <tooltip-label :title="$t('label.configuration')" :tooltip="$t('message.ovf.configurations')"/>
                      </template>
                      <a-select
                        showSearch
                        optionFilterProp="label"
                        v-model:value="form.templateConfiguration"
                        defaultActiveFirstOption
                        :placeholder="$t('message.ovf.configurations')"
                        :filterOption="(input, option) => {
                          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }"
                        @change="onSelectTemplateConfigurationId"
                      >
                        <a-select-option v-for="opt in templateConfigurations" :key="opt.id" :label="opt.name || opt.description">
                          {{ opt.name || opt.description }}
                        </a-select-option>
                      </a-select>
                      <span v-if="selectedTemplateConfiguration && selectedTemplateConfiguration.description">{{ selectedTemplateConfiguration.description }}</span>
                    </a-form-item>
                    <compute-offering-selection
                      :compute-items="options.serviceOfferings"
                      :selected-template="template ? template : {}"
                      :row-count="rowCount.serviceOfferings"
                      :zoneId="zoneId"
                      :autoscale="true"
                      :value="serviceOffering ? serviceOffering.id : ''"
                      :loading="loading.serviceOfferings"
                      :preFillContent="dataPreFill"
                      :show-gpu-filter="zone.gputotal && zone.gputotal > 0"
                      :minimum-cpunumber="templateConfigurationExists && selectedTemplateConfiguration && selectedTemplateConfiguration.cpunumber ? selectedTemplateConfiguration.cpunumber : 0"
                      :minimum-cpuspeed="templateConfigurationExists && selectedTemplateConfiguration && selectedTemplateConfiguration.cpuspeed ? selectedTemplateConfiguration.cpuspeed : 0"
                      :minimum-memory="templateConfigurationExists && selectedTemplateConfiguration && selectedTemplateConfiguration.memory ? selectedTemplateConfiguration.memory : 0"
                      @select-compute-item="($event) => updateComputeOffering($event)"
                      @handle-search-filter="($event) => handleSearchFilter('serviceOfferings', $event)"
                    ></compute-offering-selection>
                    <compute-selection
                      v-if="serviceOffering && (serviceOffering.iscustomized || serviceOffering.iscustomizediops)"
                      cpuNumberInputDecorator="cpunumber"
                      cpuSpeedInputDecorator="cpuspeed"
                      memoryInputDecorator="memory"
                      :preFillContent="dataPreFill"
                      :computeOfferingId="vmgroupConfig.computeofferingid"
                      :isConstrained="isOfferingConstrained(serviceOffering)"
                      :minCpu="'serviceofferingdetails' in serviceOffering ? serviceOffering.serviceofferingdetails.mincpunumber*1 : 0"
                      :maxCpu="'serviceofferingdetails' in serviceOffering ? serviceOffering.serviceofferingdetails.maxcpunumber*1 : Number.MAX_SAFE_INTEGER"
                      :minMemory="'serviceofferingdetails' in serviceOffering ? serviceOffering.serviceofferingdetails.minmemory*1 : 0"
                      :maxMemory="'serviceofferingdetails' in serviceOffering ? serviceOffering.serviceofferingdetails.maxmemory*1 : Number.MAX_SAFE_INTEGER"
                      :isCustomized="serviceOffering.iscustomized"
                      :isCustomizedIOps="'iscustomizediops' in serviceOffering && serviceOffering.iscustomizediops"
                      @handler-error="handlerError"
                      @update-iops-value="updateIOPSValue"
                      @update-compute-cpunumber="updateFieldValue"
                      @update-compute-cpuspeed="updateFieldValue"
                      @update-compute-memory="updateFieldValue" />
                    <span v-if="serviceOffering && serviceOffering.iscustomized">
                      <a-form-item name="cpunumber" ref="cpunumber" class="form-item-hidden">
                        <a-input v-model:value="form.cpunumber"/>
                      </a-form-item>
                      <a-form-item
                        class="form-item-hidden"
                        v-if="(serviceOffering && !(serviceOffering.cpuspeed > 0))"
                        name="cpuspeed"
                        ref="cpuspeed">
                        <a-input v-model:value="form.cpuspeed"/>
                      </a-form-item>
                      <a-form-item class="form-item-hidden" name="memory" ref="memory">
                        <a-input v-model:value="form.memory"/>
                      </a-form-item>
                    </span>
                    <span>
                      {{ $t('label.override.root.diskoffering') }}
                      <a-switch
                        v-model:checked="showOverrideDiskOfferingOption"
                        :checked="serviceOffering && !serviceOffering.diskofferingstrictness && showOverrideDiskOfferingOption"
                        :disabled="(serviceOffering && serviceOffering.diskofferingstrictness)"
                        @change="val => { updateOverrideRootDiskShowParam(val) }"
                        style="margin-left: 10px;"/>
                    </span>
                    <span v-if="serviceOffering && !serviceOffering.diskofferingstrictness">
                      <a-step
                        :status="zoneSelected ? 'process' : 'wait'"
                        v-if="template && !template.deployasis && template.childtemplates && template.childtemplates.length > 0" >
                        <template #description>
                          <div v-if="zoneSelected">
                            <multi-disk-selection
                              :items="template.childtemplates"
                              :diskOfferings="options.diskOfferings"
                              :zoneId="zoneId"
                              @select-multi-disk-offering="updateMultiDiskOffering($event)" />
                          </div>
                        </template>
                      </a-step>
                      <a-step
                        v-else
                        :status="zoneSelected ? 'process' : 'wait'">
                        <template #description>
                          <div v-if="zoneSelected">
                            <disk-offering-selection
                              v-if="showOverrideDiskOfferingOption"
                              :items="options.diskOfferings"
                              :row-count="rowCount.diskOfferings"
                              :zoneId="zoneId"
                              :value="overrideDiskOffering ? overrideDiskOffering.id : ''"
                              :loading="loading.diskOfferings"
                              :preFillContent="dataPreFill"
                              :isIsoSelected="imageType==='isoid'"
                              :isRootDiskOffering="true"
                              @on-selected-root-disk-size="onSelectRootDiskSize"
                              @select-disk-offering-item="($event) => updateOverrideDiskOffering($event)"
                              @handle-search-filter="($event) => handleSearchFilter('diskOfferings', $event)"
                            ></disk-offering-selection>
                            <disk-size-selection
                              v-if="overrideDiskOffering && (overrideDiskOffering.iscustomized || overrideDiskOffering.iscustomizediops)"
                              input-decorator="rootdisksize"
                              :preFillContent="dataPreFill"
                              :minDiskSize="dataPreFill.minrootdisksize"
                              :rootDiskSelected="overrideDiskOffering"
                              :isCustomized="overrideDiskOffering.iscustomized"
                              @handler-error="handlerError"
                              @update-disk-size="updateFieldValue"
                              @update-root-disk-iops-value="updateIOPSValue"/>
                            <a-form-item class="form-item-hidden">
                              <a-input v-model:value="form.rootdisksize"/>
                            </a-form-item>
                          </div>
                        </template>
                      </a-step>
                    </span>
                  </div>
                </template>
              </a-step>
              <a-step
                :title="$t('label.data.disk')"
                :status="zoneSelected ? 'process' : 'wait'"
                v-if="template && !template.deployasis && template.childtemplates && template.childtemplates.length > 0" >
                <template #description>
                  <div v-if="zoneSelected">
                    <multi-disk-selection
                      :items="template.childtemplates"
                      :diskOfferings="options.diskOfferings"
                      :zoneId="zoneId"
                      @select-multi-disk-offering="updateMultiDiskOffering($event)" />
                  </div>
                </template>
              </a-step>
              <a-step
                v-else
                :title="imageType === 'templateid' ? $t('label.data.disk') : $t('label.disk.size')"
                :status="zoneSelected ? 'process' : 'wait'">
                <template #description>
                  <div v-if="zoneSelected">
                    <span>
                      {{ $t('label.data.disk') }}
                      <a-switch
                        v-model:checked="showDiskOfferingOption"
                        @change="updateDiskOffering(0)"
                        style="margin-left: 10px;"/>
                    </span>
                    <disk-offering-selection
                      v-if="showDiskOfferingOption"
                      :items="options.diskOfferings"
                      :row-count="rowCount.diskOfferings"
                      :zoneId="zoneId"
                      :value="diskOffering ? diskOffering.id : ''"
                      :loading="loading.diskOfferings"
                      :preFillContent="dataPreFill"
                      :isIsoSelected="imageType==='isoid'"
                      @on-selected-disk-size="onSelectDiskSize"
                      @select-disk-offering-item="($event) => updateDiskOffering($event)"
                      @handle-search-filter="($event) => handleSearchFilter('diskOfferings', $event)"
                    ></disk-offering-selection>
                    <disk-size-selection
                      v-if="diskOffering && (diskOffering.iscustomized || diskOffering.iscustomizediops)"
                      input-decorator="size"
                      :preFillContent="dataPreFill"
                      :diskSelected="diskSelected"
                      :isCustomized="diskOffering.iscustomized"
                      @handler-error="handlerError"
                      @update-disk-size="updateFieldValue"
                      @update-iops-value="updateIOPSValue"/>
                    <a-form-item class="form-item-hidden">
                      <a-input v-model:value="form.size"/>
                    </a-form-item>
                  </div>
                </template>
              </a-step>
              <a-step
                :title="$t('label.select.network')"
                :status="zoneSelected ? 'process' : 'wait'"
                v-if="zone && zone.networktype !== 'Basic'">
                <template #description>
                  <label>{{ $t('message.autoscale.vm.networks') }}</label>
                  <div v-if="zoneSelected">
                    <div v-if="vm.templateid && templateNics && templateNics.length > 0">
                      <instance-nics-network-select-list-view
                        :nics="templateNics"
                        :zoneid="selectedZone"
                        @select="handleNicsNetworkSelection" />
                    </div>
                    <div v-show="!(vm.templateid && templateNics && templateNics.length > 0)" >
                      <network-selection
                        :items="options.networks"
                        :row-count="rowCount.networks"
                        :value="networkOfferingIds"
                        :loading="loading.networks"
                        :zoneId="zoneId"
                        :preFillContent="dataPreFill"
                        @select-network-item="($event) => updateNetworks($event)"
                        @handle-search-filter="($event) => handleSearchFilter('networks', $event)"
                      ></network-selection>
                      <network-configuration
                        v-if="networks.length > 0"
                        :items="networks"
                        :autoscale="true"
                        :preFillContent="dataPreFill"
                        @handler-error="($event) => hasError = $event"
                        @select-default-network-item="($event) => updateDefaultNetworks($event)"
                      ></network-configuration>
                    </div>
                  </div>
                </template>
              </a-step>
              <a-step
                :title="$t('label.loadbalancing')"
                :status="zoneSelected ? 'process' : 'wait'"
                v-if="networks.length > 0">
                <template #description>
                  <load-balancer-selection
                    :items="options.loadbalancers"
                    :zoneId="zoneId"
                    :loading="loading.networks"
                    :preFillContent="dataPreFill"
                    @select-load-balancer-item="($event) => updateLoadBalancers($event)"
                    @handle-search-filter="($event) => handleSearchFilter('loadbalancers', $event)"
                  ></load-balancer-selection>
                </template>
              </a-step>
              <a-step
                v-if="showSecurityGroupSection"
                :title="$t('label.security.groups')"
                :status="zoneSelected ? 'process' : 'wait'">
                <template #description>
                  <security-group-selection
                    :zoneId="zoneId"
                    :value="securitygroupids"
                    :loading="loading.networks"
                    :preFillContent="dataPreFill"
                    @select-security-group-item="($event) => updateSecurityGroups($event)"></security-group-selection>
                </template>
              </a-step>
              <a-step
                :title="$t('label.ovf.properties')"
                :status="zoneSelected ? 'process' : 'wait'"
                v-if="vm.templateid && templateProperties && Object.keys(templateProperties).length > 0">
                <template #description>
                  <div v-for="(props, category) in templateProperties" :key="category">
                    <a-alert :message="'Category: ' + category + ' (' + props.length + ' properties)'" type="info" />
                    <div style="margin-left: 15px; margin-top: 10px">
                      <a-form-item
                        v-for="(property, propertyIndex) in props"
                        :key="propertyIndex"
                        :v-bind="property.key"
                        :name="'properties.' + escapePropertyKey(property.key)"
                        :ref="'properties.' + escapePropertyKey(property.key)">
                        <tooltip-label style="text-transform: capitalize" :title="property.label" :tooltip="property.description"/>

                        <span v-if="property.type && property.type==='boolean'">
                          <a-switch
                            v-model:checked="form['properties.' + escapePropertyKey(property.key)]"
                            :placeholder="property.description"
                          />
                        </span>
                        <span v-else-if="property.type && (property.type==='int' || property.type==='real')">
                          <a-input-number
                            v-model:value="form['properties.'+ escapePropertyKey(property.key)]"
                            :placeholder="property.description"
                            :min="getPropertyQualifiers(property.qualifiers, 'number-select').min"
                            :max="getPropertyQualifiers(property.qualifiers, 'number-select').max" />
                        </span>
                        <span v-else-if="property.type && property.type==='string' && property.qualifiers && property.qualifiers.startsWith('ValueMap')">
                          <a-select
                            showSearch
                            optionFilterProp="value"
                            v-model:value="form['properties.' + escapePropertyKey(property.key)]"
                            :placeholder="property.description"
                            :filterOption="(input, option) => {
                              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }"
                          >
                            <a-select-option v-for="opt in getPropertyQualifiers(property.qualifiers, 'select')" :key="opt">
                              {{ opt }}
                            </a-select-option>
                          </a-select>
                        </span>
                        <span v-else-if="property.type && property.type==='string' && property.password">
                          <a-input-password
                            v-model:value="form['properties.' + escapePropertyKey(property.key)]"
                            :placeholder="property.description" />
                        </span>
                        <span v-else>
                          <a-input
                            v-model:value="form['properties.' + escapePropertyKey(property.key)]"
                            :placeholder="property.description" />
                        </span>
                      </a-form-item>
                    </div>
                  </div>
                </template>
              </a-step>
              <a-step
                :title="$t('label.scaleup.policies')"
                :status="zoneSelected ? 'process' : 'wait'">
                <template #description>
                  <label>{{ $t('message.scaleup.policies') }}</label>
                  <a-divider/>
                  <div class="form">
                    <strong>{{ $t('label.scaleup.policy') }} &nbsp;&nbsp;&nbsp;</strong>
                    <a-select
                      style="width: 320px"
                      v-model:value="selectedScaleUpPolicyId"
                      @change="fetchScaleUpConditions()"
                      :placeholder="$t('label.scaleup.policy')"
                      showSearch
                      optionFilterProp="label"
                      :filterOption="(input, option) => {
                        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }" >
                      <a-select-option
                        v-for="policy in this.scaleUpPolicies"
                        :key="policy.id"
                        :label="policy.name">
                        {{ policy.name }}
                      </a-select-option>
                    </a-select>
                    <a-button style="margin-left: 10px" ref="submit" type="primary" @click="addNewScaleUpPolicy">
                      <template #icon><plus-outlined /></template>
                      {{ $t('label.add.policy') }}
                    </a-button>
                    <a-button style="margin-left: 10px" ref="submit" type="primary" @click="removeScaleUpPolicy" :danger="true" >
                      <template #icon><delete-outlined /></template>
                      {{ $t('label.remove.policy') }}
                    </a-button>
                  </div>
                  <div class="form">
                    <a-form-item>
                      <template #label>
                        <span class="form__required">*</span>
                        <tooltip-label :title="$t('label.name')" :tooltip="createAutoScalePolicyApiParams.name.description"/>
                      </template>
                      <a-input v-model:value="selectedScaleUpPolicy.name"></a-input>
                      <span class="error-text">{{ $t('label.required') }}</span>
                    </a-form-item>
                    <a-form-item name="scaleupduration" ref="scaleupduration">
                      <template #label>
                        <span class="form__required">*</span>
                        <tooltip-label :title="$t('label.duration')" :tooltip="createAutoScalePolicyApiParams.duration.description"/>
                      </template>
                      <a-input v-model:value="selectedScaleUpPolicy.scaleupduration" type="number"></a-input>
                      <span class="error-text">{{ $t('label.required') }}</span>
                    </a-form-item>
                    <a-form-item name="scaleupquiettime" ref="scaleupquiettime">
                      <template #label>
                        <tooltip-label :title="$t('label.quiettime')" :tooltip="createAutoScalePolicyApiParams.quiettime.description"/>
                      </template>
                      <a-input v-model:value="selectedScaleUpPolicy.scaleupquiettime" type="number"></a-input>
                    </a-form-item>
                  </div>
                  <a-divider/>
                  <div class="form">
                    <div class="form__item" ref="newScaleUpConditionCounterId">
                      <div class="form__label">
                        <span class="form__required">*</span>
                        <tooltip-label :title="$t('label.counter')" :tooltip="$t('label.counter.name')"/>
                      </div>
                      <a-select
                        style="width: 100%"
                        showSearch
                        optionFilterProp="label"
                        :filterOption="(input, option) => {
                          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }"
                        v-focus="true"
                        v-model:value="newScaleUpCondition.counterid">
                        <a-select-option
                          v-for="(counter, index) in countersList"
                          :value="counter.id"
                          :key="index"
                          :label="counter.name">
                          {{ counter.name }}
                        </a-select-option>
                      </a-select>
                      <span class="error-text">{{ $t('label.required') }}</span>
                    </div>
                    <div class="form__item" ref="newScaleUpConditionRelationalOperator">
                      <div class="form__label">
                        <span class="form__required">*</span>
                        <tooltip-label :title="$t('label.relationaloperator')" :tooltip="createConditionApiParams.relationaloperator.description"/>
                      </div>
                      <a-select
                        v-model:value="newScaleUpCondition.relationaloperator"
                        style="width: 100%;"
                        optionFilterProp="value"
                        :filterOption="(input, option) => {
                          return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }" >
                        <a-select-option value="GT">{{ getOperator('GT') }}</a-select-option>
                      </a-select>
                      <span class="error-text">{{ $t('label.required') }}</span>
                    </div>
                    <div class="form__item" ref="newScaleUpConditionThreshold">
                      <div class="form__label">
                        <span class="form__required">*</span>
                        <tooltip-label :title="$t('label.threshold')" :tooltip="$t('label.threshold.description')"/>
                      </div>
                      <a-input v-model:value="newScaleUpCondition.threshold" type="number"></a-input>
                      <span class="error-text">{{ $t('label.invalid.number') }}</span>
                    </div>
                    <div class="form__item">
                      <div class="form__label">{{ $t('label.action') }}</div>
                      <a-button ref="submit" type="primary" @click="addScaleUpCondition">
                        <template #icon><plus-outlined /></template>
                        {{ $t('label.add.condition') }}
                      </a-button>
                    </div>
                  </div>
                  <a-divider/>
                  <div>
                    <a-table
                      size="small"
                      style="overflow-y: auto"
                      :loading="false"
                      :columns="scaleUpColumns"
                      :dataSource="scaleUpConditions"
                      :pagination="false"
                      :rowKey="record => record.counterid">
                      <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'relationaloperator'">
                          {{ getOperator(record.relationaloperator) }}
                        </template>
                        <template v-if="column.key === 'actions'">
                          <a-button ref="submit" type="primary" :danger="true" @click="deleteScaleUpCondition(record.counterid)">
                            <template #icon><delete-outlined /></template>
                            {{ $t('label.delete') }}
                          </a-button>
                        </template>
                      </template>
                    </a-table>
                  </div>
                </template>
              </a-step>
              <a-step
                :title="$t('label.scaledown.policies')"
                :status="zoneSelected ? 'process' : 'wait'">
                <template #description>
                  <label>{{ $t('message.scaledown.policies') }}</label>
                  <a-divider/>
                  <div class="form">
                    <strong>{{ $t('label.scaledown.policy') }} &nbsp;&nbsp;&nbsp;</strong>
                    <a-select
                      style="width: 320px"
                      v-model:value="selectedScaleDownPolicyId"
                      @change="fetchScaleDownConditions()"
                      :placeholder="$t('label.scaledown.policy')"
                      showSearch
                      optionFilterProp="label"
                      :filterOption="(input, option) => {
                        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }" >
                      <a-select-option
                        v-for="policy in this.scaleDownPolicies"
                        :key="policy.id"
                        :label="policy.name">
                        {{ policy.name }}
                      </a-select-option>
                    </a-select>
                    <a-button style="margin-left: 10px" ref="submit" type="primary" @click="addNewScaleDownPolicy">
                      <template #icon><plus-outlined /></template>
                      {{ $t('label.add.policy') }}
                    </a-button>
                    <a-button style="margin-left: 10px" ref="submit" type="primary" @click="removeScaleDownPolicy" :danger="true" >
                      <template #icon><delete-outlined /></template>
                      {{ $t('label.remove.policy') }}
                    </a-button>
                  </div>
                  <div class="form">
                    <a-form-item>
                      <template #label>
                        <span class="form__required">*</span>
                        <tooltip-label :title="$t('label.name')" :tooltip="createAutoScalePolicyApiParams.name.description"/>
                      </template>
                      <a-input v-model:value="selectedScaleDownPolicy.name"></a-input>
                      <span class="error-text">{{ $t('label.required') }}</span>
                    </a-form-item>
                    <a-form-item name="scaledownduration" ref="scaledownduration">
                      <template #label>
                        <span class="form__required">*</span>
                        <tooltip-label :title="$t('label.duration')" :tooltip="createAutoScalePolicyApiParams.duration.description"/>
                      </template>
                      <a-input v-model:value="selectedScaleDownPolicy.scaledownduration" type="number"></a-input>
                      <span class="error-text">{{ $t('label.required') }}</span>
                    </a-form-item>
                    <a-form-item name="scaledownquiettime" ref="scaledownquiettime">
                      <template #label>
                        <tooltip-label :title="$t('label.quiettime')" :tooltip="createAutoScalePolicyApiParams.quiettime.description"/>
                      </template>
                      <a-input v-model:value="selectedScaleDownPolicy.scaledownquiettime" type="number"></a-input>
                    </a-form-item>
                  </div>
                  <a-divider/>
                  <div class="form">
                    <div class="form__item" ref="newScaleDownConditionCounterId">
                      <div class="form__label">
                        <span class="form__required">*</span>
                        <tooltip-label :title="$t('label.counter')" :tooltip="$t('label.counter.name')"/>
                      </div>
                      <a-select
                        style="width: 100%"
                        showSearch
                        optionFilterProp="label"
                        :filterOption="(input, option) => {
                          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }"
                        v-focus="true"
                        v-model:value="newScaleDownCondition.counterid">
                        <a-select-option
                          v-for="(counter, index) in countersList"
                          :value="counter.id"
                          :key="index"
                          :label="counter.name">
                          {{ counter.name }}
                        </a-select-option>
                      </a-select>
                      <span class="error-text">{{ $t('label.required') }}</span>
                    </div>
                    <div class="form__item" ref="newScaleDownConditionRelationalOperator">
                      <div class="form__label">
                        <span class="form__required">*</span>
                        <tooltip-label :title="$t('label.relationaloperator')" :tooltip="createConditionApiParams.relationaloperator.description"/>
                      </div>
                      <a-select
                        v-model:value="newScaleDownCondition.relationaloperator"
                        style="width: 100%;"
                        optionFilterProp="value"
                        :filterOption="(input, option) => {
                          return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }" >
                        <a-select-option value="LT">{{ getOperator('LT') }}</a-select-option>
                      </a-select>
                      <span class="error-text">{{ $t('label.required') }}</span>
                    </div>
                    <div class="form__item" ref="newScaleDownConditionThreshold">
                      <div class="form__label">
                        <span class="form__required">*</span>
                        <tooltip-label :title="$t('label.threshold')" :tooltip="$t('label.threshold.description')"/>
                      </div>
                      <a-input v-model:value="newScaleDownCondition.threshold" type="number"></a-input>
                      <span class="error-text">{{ $t('label.invalid.number') }}</span>
                    </div>
                    <div class="form__item">
                      <div class="form__label">{{ $t('label.action') }}</div>
                      <a-button ref="submit" type="primary" @click="addScaleDownCondition">
                        <template #icon><plus-outlined /></template>
                        {{ $t('label.add.condition') }}
                      </a-button>
                    </div>
                  </div>
                  <a-divider/>
                  <div style="display: block">
                    <a-table
                      size="small"
                      style="overflow-y: auto"
                      :loading="false"
                      :columns="scaleDownColumns"
                      :dataSource="scaleDownConditions"
                      :pagination="false"
                      :rowKey="record => record.counterid">
                      <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'relationaloperator'">
                          {{ getOperator(record.relationaloperator) }}
                        </template>
                        <template v-if="column.key === 'actions'">
                          <a-button ref="submit" type="primary" :danger="true" @click="deleteScaleDownCondition(record.counterid)">
                            <template #icon><delete-outlined /></template>
                            {{ $t('label.delete') }}
                          </a-button>
                        </template>
                      </template>
                    </a-table>
                  </div>
                </template>
              </a-step>
              <a-step
                :title="$t('label.advanced.mode')"
                :status="zoneSelected ? 'process' : 'wait'">
                <template #description v-if="zoneSelected">
                  <span>
                    {{ $t('label.isadvanced') }}
                    <a-switch v-model:checked="showDetails" style="margin-left: 10px"/>
                  </span>
                  <div style="margin-top: 15px" v-if="showDetails">
                    <a-form-item :label="$t('label.sshkeypairs')">
                      <ssh-key-pair-selection
                        :items="options.sshKeyPairs"
                        :row-count="rowCount.sshKeyPairs"
                        :zoneId="zoneId"
                        :value="sshKeyPairs"
                        :loading="loading.sshKeyPairs"
                        :preFillContent="dataPreFill"
                        @select-ssh-key-pair-item="($event) => updateSshKeyPairs($event)"
                        @handle-search-filter="($event) => handleSearchFilter('sshKeyPairs', $event)"
                      />
                    </a-form-item>
                    <a-form-item :label="$t('label.affinity.groups')">
                      <affinity-group-selection
                        :items="options.affinityGroups"
                        :row-count="rowCount.affinityGroups"
                        :zoneId="zoneId"
                        :value="affinityGroupIds"
                        :loading="loading.affinityGroups"
                        :preFillContent="dataPreFill"
                        @select-affinity-group-item="($event) => updateAffinityGroups($event)"
                        @handle-search-filter="($event) => handleSearchFilter('affinityGroups', $event)"/>
                    </a-form-item>
                    <a-form-item>
                      <template #label>
                        <tooltip-label :title="$t('label.user.data')" :tooltip="createAutoScaleVmProfileApiParams.userdata.description"/>
                      </template>
                      <a-card>
                        <div v-if="this.template && this.template.userdataid">
                          <a-typography-text>
                            Userdata "{{ $t(this.template.userdataname) }}" is linked with template "{{ $t(this.template.name) }}" with override policy "{{ $t(this.template.userdatapolicy) }}"
                          </a-typography-text><br/><br/>
                          <div v-if="templateUserDataParams.length > 0 && !doUserdataOverride">
                            <a-typography-text v-if="this.template && this.template.userdataid && templateUserDataParams.length > 0">
                              Enter the values for the variables in userdata
                            </a-typography-text>
                            <a-input-group>
                              <a-table
                                size="small"
                                style="overflow-y: auto"
                                :columns="userDataParamCols"
                                :dataSource="templateUserDataParams"
                                :pagination="false"
                                :rowKey="record => record.key">
                                <template #value="{ record }">
                                  <a-input v-model:value="templateUserDataValues[record.key]" />
                                </template>
                              </a-table>
                            </a-input-group>
                          </div>
                        </div><br/><br/>
                        <div v-if="userdataDefaultOverridePolicy === 'ALLOWOVERRIDE' || userdataDefaultOverridePolicy === 'APPEND' || !userdataDefaultOverridePolicy">
                          <span v-if="userdataDefaultOverridePolicy === 'ALLOWOVERRIDE'" >
                            {{ $t('label.user.data.do.override') }}
                            <a-switch v-model:checked="doUserdataOverride" style="margin-left: 10px"/>
                          </span>
                          <span v-if="userdataDefaultOverridePolicy === 'APPEND'">
                            {{ $t('label.user.data.do.append') }}
                            <a-switch v-model:checked="doUserdataAppend" style="margin-left: 10px"/>
                          </span>
                          <a-step
                            :status="zoneSelected ? 'process' : 'wait'">
                            <template #description>
                              <div v-if="doUserdataOverride || doUserdataAppend || !userdataDefaultOverridePolicy" style="margin-top: 15px">
                                <a-card
                                  :tabList="userdataTabList"
                                  :activeTabKey="userdataTabKey"
                                  @tabChange="key => onUserdataTabChange(key, 'userdataTabKey')">
                                  <div v-if="userdataTabKey === 'userdataregistered'">
                                    <a-step
                                      v-if="isUserAllowedToListUserDatas"
                                      :status="zoneSelected ? 'process' : 'wait'">
                                      <template #description>
                                        <div v-if="zoneSelected">
                                          <user-data-selection
                                            :items="options.userDatas"
                                            :row-count="rowCount.userDatas"
                                            :zoneId="zoneId"
                                            :disabled="template.userdatapolicy === 'DENYOVERRIDE'"
                                            :loading="loading.userDatas"
                                            :preFillContent="dataPreFill"
                                            @select-user-data-item="($event) => updateUserData($event)"
                                            @handle-search-filter="($event) => handleSearchFilter('userData', $event)"
                                          />
                                          <div v-if="userDataParams.length > 0">
                                            <a-input-group>
                                              <a-table
                                                size="small"
                                                style="overflow-y: auto"
                                                :columns="userDataParamCols"
                                                :dataSource="userDataParams"
                                                :pagination="false"
                                                :rowKey="record => record.key">
                                                <template #value="{ record }">
                                                  <a-input v-model:value="userDataValues[record.key]" />
                                                </template>
                                              </a-table>
                                            </a-input-group>
                                          </div>
                                        </div>
                                      </template>
                                    </a-step>
                                  </div>
                                  <div v-else>
                                    <a-form-item name="userdata" ref="userdata" >
                                      <a-textarea
                                        placeholder="Userdata"
                                        v-model:value="form.userdata">
                                      </a-textarea>
                                    </a-form-item>
                                  </div>
                                </a-card>
                              </div>
                            </template>
                          </a-step>
                        </div>
                      </a-card>
                    </a-form-item>
                  </div>
                </template>
              </a-step>
              <a-step
                :title="$t('label.details')"
                :status="zoneSelected ? 'process' : 'wait'">
                <template #description v-if="zoneSelected">
                  <div style="margin-top: 15px">
                    <a-form-item name="name" ref="name">
                      <template #label>
                        <tooltip-label :title="$t('label.name')" :tooltip="createAutoScaleVmGroupApiParams.name.description"/>
                      </template>
                      <a-input v-model:value="form.name"></a-input>
                    </a-form-item>
                    <a-form-item name="autoscaleuserid" ref="autoscaleuserid" v-if="this.selectedLbProdiver === 'Netscaler'">
                      <template #label>
                        <tooltip-label :title="$t('label.user')" :tooltip="createAutoScaleVmProfileApiParams.autoscaleuserid.description"/>
                      </template>
                      <a-select
                        style="width: 100%"
                        showSearch
                        optionFilterProp="label"
                        :filterOption="(input, option) => {
                          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }"
                        v-focus="true"
                        v-model:value="form.autoscaleuserid">
                        <a-select-option
                          v-for="(user, index) in usersList"
                          :value="user.id"
                          :key="index"
                          :label="user.username">
                          {{ user.username }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                    <a-form-item name="expungevmgraceperiod" ref="expungevmgraceperiod">
                      <template #label>
                        <tooltip-label :title="$t('label.expungevmgraceperiod')" :tooltip="createAutoScaleVmProfileApiParams.expungevmgraceperiod.description"/>
                      </template>
                      <a-input v-model:value="form.expungevmgraceperiod" type="number"></a-input>
                    </a-form-item>
                    <a-form-item name="maxmembers" ref="maxmembers">
                      <template #label>
                        <tooltip-label :title="$t('label.maxmembers')" :tooltip="createAutoScaleVmGroupApiParams.maxmembers.description"/>
                      </template>
                      <a-input v-model:value="form.maxmembers" type="number"></a-input>
                    </a-form-item>
                    <a-form-item name="minmembers" ref="minmembers">
                      <template #label>
                        <tooltip-label :title="$t('label.minmembers')" :tooltip="createAutoScaleVmGroupApiParams.minmembers.description"/>
                      </template>
                      <a-input v-model:value="form.minmembers" type="number"></a-input>
                    </a-form-item>
                    <a-form-item name="interval" ref="interval">
                      <template #label>
                        <tooltip-label :title="$t('label.interval')" :tooltip="createAutoScaleVmGroupApiParams.interval.description"/>
                      </template>
                      <a-input v-model:value="form.interval" type="number"></a-input>
                    </a-form-item>
                  </div>
                </template>
              </a-step>
              <a-step
                :title="$t('label.license.agreements')"
                :status="zoneSelected ? 'process' : 'wait'"
                v-if="vm.templateid && templateLicenses && templateLicenses.length > 0">
                <template #description>
                  <div style="margin-top: 10px">
                    {{ $t('message.read.accept.license.agreements') }}
                    <a-form-item
                      style="margin-top: 10px"
                      v-for="(license, licenseIndex) in templateLicenses"
                      :key="licenseIndex"
                      :v-bind="license.id">
                      <template #label>
                        <tooltip-label style="text-transform: capitalize" :title="$t('label.agreement' + ' ' + (licenseIndex+1) + ': ' + license.name)"/>
                      </template>
                      <a-textarea
                        v-model:value="license.text"
                        :auto-size="{ minRows: 3, maxRows: 8 }"
                        readOnly />
                      <a-checkbox
                        style="margin-top: 10px"
                        v-model:checked="form.licensesaccepted">
                        {{ $t('label.i.accept.all.license.agreements') }}
                      </a-checkbox>
                    </a-form-item>
                  </div>
                </template>
              </a-step>
            </a-steps>
            <div class="card-footer" v-if="isMobile()">
              <deploy-buttons
                :loading="loading.deploy"
                :deployButtonText="$t('label.create')"
                @handle-cancel="() => $router.back()"
                @handle-deploy="handleSubmit" />
            </div>
          </a-form>
        </a-card>
      </a-col>
      <a-col :md="24" :lg="7" v-if="!isMobile()">
        <a-affix :offsetTop="75" class="vm-info-card">
          <info-card :footerVisible="true" :resource="vm" :title="$t('label.your.autoscale.vmgroup')" @change-resource="(data) => resource = data">
            <template #footer-content>
              <deploy-buttons
                :loading="loading.deploy"
                :deployButtonText="$t('label.create')"
                @handle-cancel="() => $router.back()"
                @handle-deploy="handleSubmit" />
            </template>
          </info-card>
        </a-affix>
      </a-col>
    </a-row>
  </div>
  <div>
    <a-modal
      :title="$t('message.creating.autoscale.vmgroup')"
      :visible="processStatusModalVisible"
      :afterClose="closeModal"
      :maskClosable="false"
      :closable="false"
      :footer="null"
      @cancel="processStatusModalVisible = false">

      <div class="form">
        <a-card class="ant-form-text card-launch-description">
          {{ $t('message.please.wait.while.autoscale.vmgroup.is.being.created') }}
        </a-card>
      </div>
      <div class="form">
        <a-card
          id="launch-content"
          class="ant-form-text card-launch-content">
          <a-steps
            size="small"
            direction="vertical"
            :current="currentStep"
          >
            <a-step
              v-for="(step, index) in steps"
              :key="index"
              :title="$t(step.title) + (step.detail ? ' (' + step.detail + ')' : '')"
              :status="step.status">
              <template #icon>
                <LoadingOutlined v-if="step.status===status.PROCESS" />
                <CloseCircleOutlined v-else-if="step.status===status.FAILED" />
              </template>
              <template #description>
                <a-card
                  class="step-error"
                  v-if="step.status===status.FAILED"
                >
                  <div><strong>{{ $t('label.error.something.went.wrong.please.correct.the.following') }}:</strong></div>
                  <div>{{ messageError }}</div>
                </a-card>
              </template>
            </a-step>
          </a-steps>
        </a-card>
      </div>
      <div class="form-action" v-if="processStatus">
        <a-button
          type="primary"
          @click="closeModal"
        >{{ $t('label.close') }}</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { ref, reactive, toRaw } from 'vue'
import { getAPI, postAPI } from '@/api'
import _ from 'lodash'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import store from '@/store'
import eventBus from '@/config/eventBus'

import InfoCard from '@/components/view/InfoCard'
import DeployButtons from '@views/compute/wizard/DeployButtons'
import ResourceIcon from '@/components/view/ResourceIcon'
import ZoneBlockRadioGroupSelect from '@views/compute/wizard/ZoneBlockRadioGroupSelect.vue'
import BlockRadioGroupSelect from '@/components/widgets/BlockRadioGroupSelect'
import ComputeOfferingSelection from '@views/compute/wizard/ComputeOfferingSelection'
import ComputeSelection from '@views/compute/wizard/ComputeSelection'
import DiskOfferingSelection from '@views/compute/wizard/DiskOfferingSelection'
import DiskSizeSelection from '@views/compute/wizard/DiskSizeSelection'
import MultiDiskSelection from '@views/compute/wizard/MultiDiskSelection'
import TemplateIsoSelection from '@views/compute/wizard/TemplateIsoSelection'
import OsBasedImageSelection from '@views/compute/wizard/OsBasedImageSelection'
import AffinityGroupSelection from '@views/compute/wizard/AffinityGroupSelection'
import NetworkSelection from '@views/compute/wizard/NetworkSelection'
import NetworkConfiguration from '@views/compute/wizard/NetworkConfiguration'
import LoadBalancerSelection from '@views/compute/wizard/LoadBalancerSelection'
import SshKeyPairSelection from '@views/compute/wizard/SshKeyPairSelection'
import UserDataSelection from '@views/compute/wizard/UserDataSelection'
import SecurityGroupSelection from '@views/compute/wizard/SecurityGroupSelection'
import TooltipLabel from '@/components/widgets/TooltipLabel'
import InstanceNicsNetworkSelectListView from '@/components/view/InstanceNicsNetworkSelectListView.vue'

const STATUS_PROCESS = 'process'
const STATUS_FINISH = 'finish'
const STATUS_FAILED = 'error'

export default {
  name: 'Wizard',
  components: {
    InfoCard,
    DeployButtons,
    ResourceIcon,
    ZoneBlockRadioGroupSelect,
    BlockRadioGroupSelect,
    SshKeyPairSelection,
    UserDataSelection,
    NetworkConfiguration,
    NetworkSelection,
    LoadBalancerSelection,
    AffinityGroupSelection,
    TemplateIsoSelection,
    OsBasedImageSelection,
    DiskSizeSelection,
    MultiDiskSelection,
    DiskOfferingSelection,
    ComputeOfferingSelection,
    ComputeSelection,
    SecurityGroupSelection,
    TooltipLabel,
    InstanceNicsNetworkSelectListView
  },
  props: {
    visible: {
      type: Boolean
    },
    preFillContent: {
      type: Object,
      default: () => {}
    }
  },
  mixins: [mixin, mixinDevice],
  data () {
    return {
      steps: [],
      currentStep: 0,
      processStatus: null,
      messageError: '',
      processStatusModalVisible: false,
      status: {
        PROCESS: STATUS_PROCESS,
        FAILED: STATUS_FAILED,
        FINISH: STATUS_FINISH
      },
      naturalNumberRule: {
        type: 'number',
        validator: this.validateNumber
      },
      zoneId: '',
      zoneSelected: false,
      isZoneSelectedMultiArch: false,
      dynamicscalingenabled: true,
      imageType: 'templateid',
      imageSearchFilters: null,
      templateKey: 0,
      showRegisteredUserdata: true,
      doUserdataOverride: false,
      doUserdataAppend: false,
      userdataDefaultOverridePolicy: 'ALLOWOVERRIDE',
      vm: {
        name: null,
        zoneid: null,
        zonename: null,
        templateid: null,
        templatename: null,
        serviceofferingid: null,
        serviceofferingname: null,
        ostypeid: null,
        ostypename: null,
        keypairs: [],
        affinitygroupids: [],
        affinitygroup: [],
        rootdisksize: null,
        disksize: null
      },
      options: {
        guestOsCategories: [],
        templates: {},
        serviceOfferings: [],
        diskOfferings: [],
        zones: [],
        affinityGroups: [],
        networks: [],
        sshKeyPairs: [],
        UserDatas: [],
        loadbalancers: []
      },
      rowCount: {},
      loading: {
        deploy: false,
        guestOsCategories: false,
        templates: false,
        serviceOfferings: false,
        diskOfferings: false,
        affinityGroups: false,
        networks: false,
        sshKeyPairs: false,
        userDatas: false,
        loadbalancers: false,
        zones: false
      },
      vmgroupConfig: {},
      template: {},
      templateConfigurations: [],
      templateNics: [],
      templateLicenses: [],
      templateProperties: {},
      selectedTemplateConfiguration: {},
      serviceOffering: {},
      diskOffering: {},
      affinityGroups: [],
      networks: [],
      networksAdd: [],
      selectedLbId: null,
      selectedLbProdiver: null,
      countersList: [],
      scaleUpPolicies: [],
      scaleUpCounter: 0,
      selectedScaleUpPolicy: null,
      selectedScaleUpPolicyId: null,
      scaleUpConditions: [],
      newScaleUpCondition: {
        counterid: null,
        relationaloperator: 'GT',
        threshold: null
      },
      scaleUpColumns: [
        {
          title: this.$t('label.counter'),
          dataIndex: 'countername'
        },
        {
          title: this.$t('label.relationaloperator'),
          key: 'relationaloperator'
        },
        {
          title: this.$t('label.threshold'),
          dataIndex: 'threshold'
        },
        {
          title: this.$t('label.actions'),
          key: 'actions'
        }
      ],
      scaleDownPolicies: [],
      scaleDownCounter: 0,
      selectedScaleDownPolicy: null,
      selectedScaleDownPolicyId: null,
      scaleDownConditions: [],
      newScaleDownCondition: {
        counterid: null,
        relationaloperator: 'LT',
        threshold: null
      },
      scaleDownColumns: [
        {
          title: this.$t('label.counter'),
          dataIndex: 'countername'
        },
        {
          title: this.$t('label.relationaloperator'),
          key: 'relationaloperator'
        },
        {
          title: this.$t('label.threshold'),
          dataIndex: 'threshold'
        },
        {
          title: this.$t('label.actions'),
          key: 'actions'
        }
      ],
      usersList: [],
      zone: {},
      sshKeyPairs: [],
      sshKeyPair: {},
      userData: {},
      userDataParams: [],
      userDataParamCols: [
        {
          title: this.$t('label.key'),
          dataIndex: 'key'
        },
        {
          title: this.$t('label.value'),
          dataIndex: 'value',
          slots: { customRender: 'value' }
        }
      ],
      userDataValues: {},
      templateUserDataCols: [
        {
          title: this.$t('label.user.data'),
          dataIndex: 'userdata'
        },
        {
          title: this.$t('label.user.data.policy'),
          dataIndex: 'userdataoverridepolicy'
        }
      ],
      templateUserDataParams: [],
      templateUserDataValues: {},
      overrideDiskOffering: {},
      initDataConfig: {},
      defaultNetworkId: '',
      dataNetworkCreated: [],
      userdataTabKey: 'userdataregistered',
      dataPreFill: {},
      showDetails: false,
      showRootDiskSizeChanger: false,
      showOverrideDiskOfferingOption: false,
      showDiskOfferingOption: false,
      securitygroupids: [],
      rootDiskSizeFixed: 0,
      hasError: false,
      error: false,
      diskSelected: {},
      rootDiskSelected: {},
      diskIOpsMin: 0,
      diskIOpsMax: 0,
      minIops: 0,
      maxIops: 0,
      zones: [],
      selectedZone: '',
      formModel: {},
      nicToNetworkSelection: [],
      selectedArchitecture: null,
      architectureTypes: {}
    }
  },
  computed: {
    rootDiskSize () {
      return this.showRootDiskSizeChanger && this.rootDiskSizeFixed > 0
    },
    isNormalAndDomainUser () {
      return ['DomainAdmin', 'User'].includes(this.$store.getters.userInfo.roletype)
    },
    diskSize () {
      const rootDiskSize = _.get(this.vmgroupConfig, 'rootdisksize', 0)
      const customDiskSize = _.get(this.vmgroupConfig, 'size', 0)
      const diskOfferingDiskSize = _.get(this.diskOffering, 'disksize', 0)
      const dataDiskSize = diskOfferingDiskSize > 0 ? diskOfferingDiskSize : customDiskSize
      const size = []
      if (rootDiskSize > 0) {
        size.push(`${rootDiskSize} GB (Root)`)
      }
      if (dataDiskSize > 0) {
        size.push(`${dataDiskSize} GB (Data)`)
      }
      return size.join(' | ')
    },
    affinityGroupIds () {
      return _.map(this.affinityGroups, 'id')
    },
    params () {
      return {
        serviceOfferings: {
          list: 'listServiceOfferings',
          options: {
            zoneid: _.get(this.zone, 'id'),
            issystem: false,
            page: 1,
            pageSize: 10,
            keyword: undefined
          }
        },
        diskOfferings: {
          list: 'listDiskOfferings',
          options: {
            zoneid: _.get(this.zone, 'id'),
            page: 1,
            pageSize: 10,
            keyword: undefined
          }
        },
        zones: {
          list: 'listZones',
          networktype: 'Advanced',
          isLoad: true,
          field: 'zoneid'
        },
        affinityGroups: {
          list: 'listAffinityGroups',
          options: {
            page: 1,
            pageSize: 10,
            keyword: undefined,
            listall: false
          }
        },
        sshKeyPairs: {
          list: 'listSSHKeyPairs',
          options: {
            page: 1,
            pageSize: 10,
            keyword: undefined,
            listall: false
          }
        },
        userDatas: {
          list: 'listUserData',
          options: {
            page: 1,
            pageSize: 10,
            keyword: undefined,
            listall: false
          }
        },
        networks: {
          list: 'listNetworks',
          options: {
            zoneid: _.get(this.zone, 'id'),
            canusefordeploy: true,
            projectid: store.getters.project ? store.getters.project.id : null,
            domainid: store.getters.project && store.getters.project.id ? null : store.getters.userInfo.domainid,
            account: store.getters.project && store.getters.project.id ? null : store.getters.userInfo.account,
            page: 1,
            pageSize: 10,
            keyword: undefined,
            showIcon: true
          }
        },
        loadbalancers: {
          list: 'listLoadBalancerRules',
          options: {
            zoneid: _.get(this.zone, 'id'),
            networkid: this.defaultNetworkId,
            id: this.queryLbRuleId,
            projectid: store.getters.project ? store.getters.project.id : null,
            domainid: store.getters.project && store.getters.project.id ? null : store.getters.userInfo.domainid,
            account: store.getters.project && store.getters.project.id ? null : store.getters.userInfo.account,
            page: 1,
            pageSize: 10,
            keyword: undefined,
            showIcon: true
          }
        },
        guestOsCategories: {
          list: 'listOsCategories',
          options: {
            zoneid: _.get(this.zone, 'id'),
            isfeatured: true,
            isiso: _.get(this.form, 'imagetype') === 'isoid',
            arch: this.selectedArchitecture,
            isvnf: false,
            showicon: true
          },
          field: 'guestoscategoryid'
        }
      }
    },
    networkOfferingIds () {
      return _.map(this.networks, 'id')
    },
    zoneSelectOptions () {
      return this.options.zones.map((zone) => {
        return {
          label: zone.name,
          value: zone.id
        }
      })
    },
    templateConfigurationExists () {
      return this.vm.templateid && this.templateConfigurations && this.templateConfigurations.length > 0
    },
    queryZoneId () {
      return this.$route.query.zoneid || null
    },
    queryArchId () {
      return this.$route.query.arch || null
    },
    queryTemplateId () {
      return this.$route.query.templateid || null
    },
    queryNetworkId () {
      return this.$route.query.networkid || null
    },
    queryGuestOsCategoryId () {
      return this.$route.query.oscategoryid || null
    },
    queryLbRuleId () {
      return this.$route.query.lbruleid || null
    },
    imageTypeList () {
      return [{
        key: 'templateid',
        tab: this.$t('label.templates')
      }]
    },
    userdataTabList () {
      let tabList = []
      tabList = [{
        key: 'userdataregistered',
        tab: this.$t('label.user.data.registered')
      },
      {
        key: 'userdatatext',
        tab: this.$t('label.user.data.text')
      }]
      return tabList
    },
    showSecurityGroupSection () {
      return (this.networks.length > 0 && this.zone.securitygroupsenabled) || (this.zone && this.zone.networktype === 'Basic')
    },
    isUserAllowedToListSshKeys () {
      return Boolean('listSSHKeyPairs' in this.$store.getters.apis)
    },
    isUserAllowedToListUserDatas () {
      return Boolean('listUserData' in this.$store.getters.apis)
    },
    dynamicScalingVmConfigValue () {
      return this.options.dynamicScalingVmConfig?.[0]?.value === 'true'
    },
    isCustomizedDiskIOPS () {
      return this.diskSelected?.iscustomizediops || false
    },
    isCustomizedIOPS () {
      return this.rootDiskSelected?.iscustomizediops || this.serviceOffering?.iscustomizediops || false
    },
    isModernImageSelection () {
      return this.$config.imageSelectionInterface === undefined || this.$config.imageSelectionInterface === 'modern'
    },
    imageSelection () {
      return this.isModernImageSelection ? 'modern' : 'legacy'
    },
    showUserCategoryForModernImageSelection () {
      return this.$config.showUserCategoryForModernImageSelection === undefined || this.$config.showUserCategoryForModernImageSelection
    },
    showAllCategoryForModernImageSelection () {
      return this.$config.showAllCategoryForModernImageSelection
    }
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'createAutoScaleVmGroup') {
        this.resetData()
      }
    },
    formModel: {
      deep: true,
      handler (vmgroupConfig) {
        this.vmgroupConfig = toRaw(vmgroupConfig)
        Object.keys(vmgroupConfig).forEach(field => {
          this.vm[field] = this.vmgroupConfig[field]
        })
        this.template = null
        for (const key in this.options.templates) {
          var template = _.find(_.get(this.options.templates[key], 'template', []), (option) => option.id === vmgroupConfig.templateid)
          if (template) {
            this.template = template
            break
          }
        }

        this.serviceOffering = _.find(this.options.serviceOfferings, (option) => option.id === vmgroupConfig.computeofferingid)
        if (this.serviceOffering?.diskofferingid) {
          vmgroupConfig.overridediskofferingid = this.serviceOffering.diskofferingid
        }
        if (this.diskSelected) {
          this.diskOffering = _.find(this.options.diskOfferings, (option) => option.id === vmgroupConfig.diskofferingid)
        }
        if (this.rootDiskSelected?.id) {
          vmgroupConfig.overridediskofferingid = this.rootDiskSelected.id
        }
        if (vmgroupConfig.overridediskofferingid) {
          this.overrideDiskOffering = _.find(this.options.diskOfferings, (option) => option.id === vmgroupConfig.overridediskofferingid)
        } else {
          this.overrideDiskOffering = null
        }

        this.zone = _.find(this.options.zones, (option) => option.id === vmgroupConfig.zoneid)
        this.networks = _.filter(this.options.networks, (option) => _.includes(vmgroupConfig.networkids, option.id))
        this.affinityGroups = _.filter(this.options.affinityGroups, (option) => _.includes(vmgroupConfig.affinitygroupids, option.id))
        this.sshKeyPair = _.find(this.options.sshKeyPairs, (option) => option.name === vmgroupConfig.keypair)

        if (this.zone) {
          this.vm.zoneid = this.zone.id
          this.vm.zonename = this.zone.name
        }

        if (this.serviceOffering?.rootdisksize) {
          this.vm.disksizetotalgb = this.serviceOffering.rootdisksize
        } else if (this.diskSize) {
          this.vm.disksizetotalgb = this.diskSize
        } else {
          this.vm.disksizetotalgb = null
        }

        if (this.diskSize) {
          this.vm.disksizetotalgb = this.diskSize
        }

        if (this.networks) {
          this.vm.networks = this.networks
        }

        if (this.selectedLbId) {
          this.loadbalancer = _.find(this.options.loadbalancers, (option) => option.id === this.selectedLbId)
          this.vm.loadbalancer = this.loadbalancer
        } else {
          this.vm.loadbalancer = null
        }

        if (this.template) {
          this.vm.templateid = this.template.id
          this.vm.templatename = this.template.displaytext
          this.vm.ostypeid = this.template.ostypeid
          this.vm.ostypename = this.template.ostypename
        }

        if (this.serviceOffering) {
          this.vm.serviceofferingid = this.serviceOffering.id
          this.vm.serviceofferingname = this.serviceOffering.displaytext
          if (this.serviceOffering.cpunumber) {
            this.vm.cpunumber = this.serviceOffering.cpunumber
          }
          if (this.serviceOffering.cpuspeed) {
            this.vm.cpuspeed = this.serviceOffering.cpuspeed
          }
          if (this.serviceOffering.memory) {
            this.vm.memory = this.serviceOffering.memory
          }
        }

        if (this.template && !this.template.deployasis && this.template.childtemplates && this.template.childtemplates.length > 0) {
          this.vm.diskofferingid = ''
          this.vm.diskofferingname = ''
          this.vm.diskofferingsize = ''
        } else if (this.diskOffering) {
          this.vm.diskofferingid = this.diskOffering.id
          this.vm.diskofferingname = this.diskOffering.displaytext
          this.vm.diskofferingsize = this.diskOffering.disksize
        }

        if (this.affinityGroups) {
          this.vm.affinitygroup = this.affinityGroups
        }

        if (this.sshKeyPairs && this.sshKeyPairs.length > 0) {
          this.vm.keypairs = this.sshKeyPairs
        }
      }
    }
  },
  serviceOffering (oldValue, newValue) {
    if (oldValue && newValue && oldValue.id !== newValue.id) {
      this.dynamicscalingenabled = this.isDynamicallyScalable()
    }
  },
  template (oldValue, newValue) {
    if (oldValue && newValue && oldValue.id !== newValue.id) {
      this.dynamicscalingenabled = this.isDynamicallyScalable()
      this.doUserdataOverride = false
      this.doUserdataAppend = false
    }
  },
  beforeCreate () {
    this.createConditionApi = this.$store.getters.apis.createCondition || {}
    this.createConditionApiParams = {}
    this.createConditionApi.params.forEach(param => {
      this.createConditionApiParams[param.name] = param
    })
    this.createAutoScalePolicyApi = this.$store.getters.apis.createAutoScalePolicy || {}
    this.createAutoScalePolicyApiParams = {}
    this.createAutoScalePolicyApi.params.forEach(param => {
      this.createAutoScalePolicyApiParams[param.name] = param
    })
    this.createAutoScaleVmGroupApi = this.$store.getters.apis.createAutoScaleVmGroup || {}
    this.createAutoScaleVmGroupApiParams = {}
    this.createAutoScaleVmGroupApi.params.forEach(param => {
      this.createAutoScaleVmGroupApiParams[param.name] = param
    })
    this.createAutoScaleVmProfileApi = this.$store.getters.apis.createAutoScaleVmProfile || {}
    this.createAutoScaleVmProfileApiParams = {}
    this.createAutoScaleVmProfileApi.params.forEach(param => {
      this.createAutoScaleVmProfileApiParams[param.name] = param
    })
  },
  created () {
    this.initForm()
    this.dataPreFill = this.preFillContent && Object.keys(this.preFillContent).length > 0 ? this.preFillContent : {}
    this.fetchData()
  },
  provide () {
    return {
      vmFetchTemplates: this.fetchAllTemplates,
      vmFetchNetworks: this.fetchNetwork,
      vmFetchLoadBalancers: this.fetchLoadBalancer
    }
  },
  methods: {
    addStep (title, step) {
      this.steps.push({
        index: this.currentStep,
        title,
        step,
        detail: '',
        status: STATUS_PROCESS
      })
      this.setStepStatus(STATUS_PROCESS)
    },
    addStepDetail (title, step, detail) {
      this.steps.push({
        index: this.currentStep,
        title,
        step,
        detail: detail,
        status: STATUS_PROCESS
      })
      this.setStepStatus(STATUS_PROCESS)
    },
    setStepStatus (status) {
      const index = this.steps.findIndex(step => step.index === this.currentStep)
      this.steps[index].status = status
    },
    updateTemplateKey () {
      this.templateKey += 1
    },
    initForm () {
      this.formRef = ref()
      this.form = reactive({})
      this.rules = reactive({
        zoneid: [
          { required: true, message: `${this.$t('message.error.select')}` }
        ],
        scaleupduration: [
          { required: false, message: this.$t('message.error.required.input') },
          this.naturalNumberRule
        ],
        scaleupquiettime: [
          { required: false, message: this.$t('message.error.required.input') },
          this.naturalNumberRule
        ],
        scaledownduration: [
          { required: false, message: this.$t('message.error.required.input') },
          this.naturalNumberRule
        ],
        scaledownquiettime: [
          { required: false, message: this.$t('message.error.required.input') },
          this.naturalNumberRule
        ],
        name: [
          { required: true, message: this.$t('message.error.required.input') }
        ],
        autoscaleuserid: [
          { required: true, message: `${this.$t('message.error.select')}` }
        ],
        expungevmgraceperiod: [
          { required: true, message: this.$t('message.error.required.input') },
          this.naturalNumberRule
        ],
        maxmembers: [
          { required: true, message: this.$t('message.error.required.input') },
          this.naturalNumberRule
        ],
        minmembers: [
          { required: true, message: this.$t('message.error.required.input') },
          this.naturalNumberRule
        ],
        interval: [
          { required: true, message: this.$t('message.error.required.input') },
          this.naturalNumberRule
        ]
      })

      this.addNewScaleUpPolicy()
      this.addNewScaleDownPolicy()

      if (this.zone && this.zone.networktype !== 'Basic') {
        if (this.zoneSelected && this.vm.templateid && this.templateNics && this.templateNics.length > 0) {
          this.templateNics.forEach((nic, nicIndex) => {
            this.form['networkMap.nic-' + nic.InstanceID.toString()] = this.options.networks && this.options.networks.length > 0
              ? this.options.networks[Math.min(nicIndex, this.options.networks.length - 1)].id
              : null
          })
        }

        if (this.vm.templateid && this.templateProperties && Object.keys(this.templateProperties).length > 0) {
          this.templateProperties.forEach((props, category) => {
            props.forEach((property, propertyIndex) => {
              if (property.type && property.type === 'boolean') {
                this.form['properties.' + this.escapePropertyKey(property.key)] = property.value === 'TRUE'
              } else if (property.type && (property.type === 'int' || property.type === 'real')) {
                this.form['properties.' + this.escapePropertyKey(property.key)] = property.value
              } else if (property.type && property.type === 'string' && property.qualifiers && property.qualifiers.startsWith('ValueMap')) {
                this.form['properties.' + this.escapePropertyKey(property.key)] = property.value && property.value.length > 0
                  ? property.value
                  : this.getPropertyQualifiers(property.qualifiers, 'select')[0]
              } else if (property.type && property.type === 'string' && property.password) {
                this.form['properties.' + this.escapePropertyKey(property.key)] = property.value
                this.rules['properties.' + this.escapePropertyKey(property.key)] = [{
                  validator: async (rule, value) => {
                    if (!property.qualifiers) {
                      return Promise.resolve()
                    }
                    var minlength = this.getPropertyQualifiers(property.qualifiers, 'number-select').min
                    var maxlength = this.getPropertyQualifiers(property.qualifiers, 'number-select').max
                    var errorMessage = ''
                    var isPasswordInvalidLength = function () {
                      return false
                    }
                    if (minlength) {
                      errorMessage = this.$t('message.validate.minlength').replace('{0}', minlength)
                      isPasswordInvalidLength = function () {
                        return !value || value.length < minlength
                      }
                    }
                    if (maxlength !== Number.MAX_SAFE_INTEGER) {
                      if (minlength) {
                        errorMessage = this.$t('message.validate.range.length').replace('{0}', minlength).replace('{1}', maxlength)
                        isPasswordInvalidLength = function () {
                          return !value || (maxlength < value.length || value.length < minlength)
                        }
                      } else {
                        errorMessage = this.$t('message.validate.maxlength').replace('{0}', maxlength)
                        isPasswordInvalidLength = function () {
                          return !value || value.length > maxlength
                        }
                      }
                    }
                    if (isPasswordInvalidLength()) {
                      return Promise.reject(errorMessage)
                    }
                    return Promise.resolve()
                  }
                }]
              } else {
                this.form['properties.' + this.escapePropertyKey(property.key)] = property.value
              }
            })
          })
        }

        if (this.vm.templateid && this.templateLicenses && this.templateLicenses.length > 0) {
          this.rules.licensesaccepted = [{
            validator: async (rule, value) => {
              if (!value) {
                return Promise.reject(this.$t('message.license.agreements.not.accepted'))
              }
              return Promise.resolve()
            }
          }]
        }
      }
    },
    getImageFilters (params, forReset) {
      if (this.isModernImageSelection) {
        if (this.form.guestoscategoryid === '0') {
          return ['self']
        }
        if (this.isModernImageSelection && params && !forReset) {
          if (params.featured) {
            return ['featured']
          } else if (params.public) {
            return ['community']
          }
        }
        return this.isNormalAndDomainUser ? ['executable'] : ['all']
      }
      return [
        'featured',
        'community',
        'selfexecutable',
        'sharedexecutable'
      ]
    },
    getPropertyQualifiers (qualifiers, type) {
      var result = ''
      switch (type) {
        case 'select':
          result = []
          if (qualifiers && qualifiers.includes('ValueMap')) {
            result = qualifiers.replace('ValueMap', '').substr(1).slice(0, -1).split(',')
            for (var i = 0; i < result.length; i++) {
              result[i] = result[i].replace(/"/g, '')
            }
          }
          break
        case 'number-select':
          var min = 0
          var max = Number.MAX_SAFE_INTEGER
          if (qualifiers) {
            var match = qualifiers.match(/MinLen\((\d+)\)/)
            if (match) {
              min = parseInt(match[1])
            }
            match = qualifiers.match(/MaxLen\((\d+)\)/)
            if (match) {
              max = parseInt(match[1])
            }
          }
          result = { min: min, max: max }
          break
        default:
      }
      return result
    },
    fillValue (field) {
      this.form[field] = this.dataPreFill[field]
    },
    fetchZoneByQuery () {
      return new Promise(resolve => {
        let zones = []
        let apiName = ''
        const params = {}
        if (this.queryZoneId) {
          zones.push(this.queryZoneId)
          if (this.queryTemplateId) {
            this.dataPreFill.templateid = this.queryTemplateId
          }
          return resolve(zones)
        } else if (this.queryTemplateId) {
          apiName = 'listTemplates'
          params.listall = true
          params.templatefilter = this.isNormalAndDomainUser ? 'executable' : 'all'
          params.isready = true
          params.id = this.queryTemplateId
          this.dataPreFill.templateid = this.queryTemplateId
        } else if (this.queryNetworkId) {
          params.listall = true
          params.id = this.queryNetworkId
          apiName = 'listNetworks'
        } else if (this.queryLbRuleId) {
          params.listall = true
          params.id = this.queryLbRuleId
          apiName = 'listLoadBalancerRules'
        }
        if (!apiName) return resolve(zones)

        postAPI(apiName, params).then(json => {
          let objectName
          const responseName = [apiName.toLowerCase(), 'response'].join('')
          for (const key in json[responseName]) {
            if (key === 'count') {
              continue
            }
            objectName = key
            break
          }
          const data = json?.[responseName]?.[objectName] || []
          zones = data.map(item => item.zoneid)
          return resolve(zones)
        }).catch(() => {
          return resolve(zones)
        })
      })
    },
    async fetchData () {
      this.architectureTypes.opts = this.$fetchCpuArchitectureTypes()
      if (this.queryArchId) {
        this.architectureTypes.opts = this.architectureTypes.opts.filter(o => o.id === this.queryArchId)
      }
      const zones = await this.fetchZoneByQuery()
      if (zones && zones.length === 1) {
        this.selectedZone = zones[0]
        this.dataPreFill.zoneid = zones[0]
      }
      if (this.dataPreFill.zoneid) {
        this.fetchDataByZone(this.dataPreFill.zoneid)
      } else {
        this.fetchZones(null, zones)
        _.each(this.params, (param, name) => {
          if (param.isLoad) {
            this.fetchOptions(param, name)
          }
        })
      }
      this.fetchUserData()
    },
    isOfferingConstrained (serviceOffering) {
      return 'serviceofferingdetails' in serviceOffering && 'mincpunumber' in serviceOffering.serviceofferingdetails &&
        'maxmemory' in serviceOffering.serviceofferingdetails && 'maxcpunumber' in serviceOffering.serviceofferingdetails &&
        'minmemory' in serviceOffering.serviceofferingdetails
    },
    updateOverrideRootDiskShowParam (val) {
      if (val) {
        this.showRootDiskSizeChanger = false
      } else {
        this.rootDiskSelected = null
      }
      this.showOverrideDiskOfferingOption = val
    },
    async fetchDataByZone (zoneId) {
      this.fillValue('zoneid')
      this.options.zones = await this.fetchZones(zoneId)
      this.onSelectZoneId(zoneId)
    },
    fetchNetwork () {
      const param = this.params.networks
      this.fetchOptions(param, 'networks')
    },
    fetchLoadBalancer () {
      this.selectedLbId = null
      const param = this.params.loadbalancers
      this.fetchOptions(param, 'loadbalancers')
    },
    fetchCountersList () {
      getAPI('listNetworks', {
        listAll: true,
        id: this.defaultNetworkId
      }).then(response => {
        const services = response.listnetworksresponse?.network?.[0]?.service
        const index = services.map(svc => { return svc.name }).indexOf('Lb')
        if (index === -1) {
          this.selectedLbProdiver = null
          this.countersList = []
          return
        }
        this.selectedLbProdiver = services[index].provider[0].name
        getAPI('listCounters', {
          listAll: true,
          provider: this.selectedLbProdiver
        }).then(response => {
          this.countersList = response.counterresponse?.counter || []
        })
      })
    },
    fetchUserData () {
      getAPI('listUsers', {
        domainid: store.getters.project && store.getters.project.id ? null : store.getters.userInfo.domainid,
        account: store.getters.project && store.getters.project.id ? null : store.getters.userInfo.account
      }).then(json => {
        this.usersList = json.listusersresponse?.user || []
      })
    },
    addNewScaleUpPolicy () {
      const newScaleUpPolicy = {
        id: this.scaleUpCounter,
        name: 'ScaleUpPolicy-' + this.scaleUpCounter,
        scaleupduration: null,
        scaleupquiettime: 300,
        conditions: []
      }
      this.scaleUpPolicies.push(newScaleUpPolicy)
      this.selectedScaleUpPolicyId = this.scaleUpCounter
      this.scaleUpCounter++
      this.fetchScaleUpConditions()
    },
    removeScaleUpPolicy () {
      if (this.scaleUpPolicies.length === 1) {
        return
      }
      this.scaleUpPolicies = this.scaleUpPolicies.filter(policy => policy.id !== this.selectedScaleUpPolicyId)
      this.selectedScaleUpPolicyId = this.scaleUpPolicies[this.scaleUpPolicies.length - 1].id
      this.fetchScaleUpConditions()
    },
    fetchScaleUpConditions () {
      this.selectedScaleUpPolicy = this.scaleUpPolicies.filter(policy => policy.id === this.selectedScaleUpPolicyId)[0]
      this.scaleUpConditions = this.selectedScaleUpPolicy.conditions
    },
    addNewScaleDownPolicy () {
      const newScaleDownPolicy = {
        id: this.scaleDownCounter,
        name: 'ScaleDownPolicy-' + this.scaleDownCounter,
        scaledownduration: null,
        scaledownquiettime: 300,
        conditions: []
      }
      this.scaleDownPolicies.push(newScaleDownPolicy)
      this.selectedScaleDownPolicyId = this.scaleDownCounter
      this.scaleDownCounter++
      this.fetchScaleDownConditions()
    },
    removeScaleDownPolicy () {
      if (this.scaleDownPolicies.length === 1) {
        return
      }
      this.scaleDownPolicies = this.scaleDownPolicies.filter(policy => policy.id !== this.selectedScaleDownPolicyId)
      this.selectedScaleDownPolicyId = this.scaleDownPolicies[this.scaleDownPolicies.length - 1].id
      this.fetchScaleDownConditions()
    },
    fetchScaleDownConditions () {
      this.selectedScaleDownPolicy = this.scaleDownPolicies.filter(policy => policy.id === this.selectedScaleDownPolicyId)[0]
      this.scaleDownConditions = this.selectedScaleDownPolicy.conditions
    },
    resetData () {
      this.vm = {
        name: null,
        zoneid: null,
        zonename: null,
        templateid: null,
        templatename: null,
        keypair: null,
        affinitygroupids: [],
        affinitygroup: [],
        serviceofferingid: null,
        serviceofferingname: null,
        ostypeid: null,
        ostypename: null,
        rootdisksize: null,
        disksize: null
      }
      this.zoneSelected = false
      this.formRef.value.resetFields()
      this.fetchData()
    },
    updateFieldValue (name, value) {
      if (name === 'templateid') {
        this.form.templateid = value
        this.resetFromTemplateConfiguration()
        let template = ''
        for (const entry of Object.values(this.options.templates)) {
          template = entry?.template.find(option => option.id === value) || null
          if (template) {
            this.template = template
            break
          }
        }
        if (template) {
          this.resetTemplateAssociatedResources()
          var size = template.size / (1024 * 1024 * 1024) || 0 // bytes to GB
          this.dataPreFill.minrootdisksize = Math.ceil(size)
          this.updateTemplateLinkedUserData(this.template.userdataid)
          this.userdataDefaultOverridePolicy = this.template.userdatapolicy
        }
      } else if (['cpuspeed', 'cpunumber', 'memory'].includes(name)) {
        this.vm[name] = value
        this.form[name] = value
      } else {
        this.form[name] = value
      }
    },
    updateComputeOffering (id) {
      this.form.computeofferingid = id
      setTimeout(() => {
        this.updateTemplateConfigurationOfferingDetails(id)
      }, 500)
    },
    updateDiskOffering (id) {
      if (id === '0') {
        this.form.diskofferingid = undefined
        return
      }
      this.form.diskofferingid = id
    },
    updateOverrideDiskOffering (id) {
      if (id === '0') {
        this.form.overridediskofferingid = undefined
        return
      }
      this.form.overridediskofferingid = id
    },
    updateMultiDiskOffering (value) {
      this.form.multidiskoffering = value
    },
    updateNetworks (ids) {
      this.form.networkids = ids
    },
    updateDefaultNetworks (id) {
      this.defaultNetworkId = id
      this.fetchLoadBalancer()
      this.fetchCountersList()
    },
    escapePropertyKey (key) {
      return key.split('.').join('\\002E')
    },
    updateLoadBalancers (id) {
      if (id === '0') {
        this.form.loadbalancerid = undefined
        this.selectedLbId = null
      } else {
        this.form.loadbalancerid = id
        this.selectedLbId = id
      }
    },
    updateSecurityGroups (securitygroupids) {
      this.securitygroupids = securitygroupids || []
    },
    async validateNumber (rule, value) {
      if (value && (isNaN(value) || value <= 0)) {
        return Promise.reject(this.$t('message.error.number'))
      }
      return Promise.resolve()
    },
    isNumber (value) {
      if (value && (isNaN(value) || value < 0)) {
        return false
      }
      return true
    },
    getOperator (val) {
      if (val === 'GT' || val === 'gt') return this.$t('label.operator.greater')
      if (val === 'GE' || val === 'ge') return this.$t('label.operator.greater.or.equal')
      if (val === 'LT' || val === 'lt') return this.$t('label.operator.less')
      if (val === 'LE' || val === 'le') return this.$t('label.operator.less.or.equal')
      if (val === 'EQ' || val === 'eq') return this.$t('label.operator.equal')
      return val
    },
    addScaleUpCondition () {
      if (!this.newScaleUpCondition.counterid) {
        this.$refs.newScaleUpConditionCounterId.classList.add('error')
      } else {
        this.$refs.newScaleUpConditionCounterId.classList.remove('error')
      }

      if (!this.newScaleUpCondition.relationaloperator) {
        this.$refs.newScaleUpConditionRelationalOperator.classList.add('error')
      } else {
        this.$refs.newScaleUpConditionRelationalOperator.classList.remove('error')
      }

      if (!this.newScaleUpCondition.threshold || !this.isNumber(this.newScaleUpCondition.threshold)) {
        this.$refs.newScaleUpConditionThreshold.classList.add('error')
      } else {
        this.$refs.newScaleUpConditionThreshold.classList.remove('error')
      }

      if (!this.newScaleUpCondition.counterid || !this.newScaleUpCondition.relationaloperator || !this.newScaleUpCondition.threshold) {
        return
      }
      const countername = this.countersList.filter(counter => counter.id === this.newScaleUpCondition.counterid).map(counter => { return counter.name }).join(',')
      this.fetchScaleUpConditions()
      this.scaleUpConditions = this.scaleUpConditions.filter(condition => condition.counterid !== this.newScaleUpCondition.counterid)
      this.scaleUpConditions.push({
        counterid: this.newScaleUpCondition.counterid,
        countername: countername,
        relationaloperator: this.newScaleUpCondition.relationaloperator,
        threshold: this.newScaleUpCondition.threshold
      })
      this.selectedScaleUpPolicy.conditions = this.scaleUpConditions

      this.newScaleUpCondition = {
        counterid: null,
        relationaloperator: 'GT',
        threshold: null
      }
    },
    deleteScaleUpCondition (counterId) {
      this.scaleUpConditions = this.scaleUpConditions.filter(condition => condition.counterid !== counterId)
      this.selectedScaleUpPolicy.conditions = this.scaleUpConditions
    },
    addScaleDownCondition () {
      if (!this.newScaleDownCondition.counterid) {
        this.$refs.newScaleDownConditionCounterId.classList.add('error')
      } else {
        this.$refs.newScaleDownConditionCounterId.classList.remove('error')
      }

      if (!this.newScaleDownCondition.relationaloperator) {
        this.$refs.newScaleDownConditionRelationalOperator.classList.add('error')
      } else {
        this.$refs.newScaleDownConditionRelationalOperator.classList.remove('error')
      }

      if (!this.newScaleDownCondition.threshold || !this.isNumber(this.newScaleDownCondition.threshold)) {
        this.$refs.newScaleDownConditionThreshold.classList.add('error')
      } else {
        this.$refs.newScaleDownConditionThreshold.classList.remove('error')
      }

      if (!this.newScaleDownCondition.counterid || !this.newScaleDownCondition.relationaloperator || !this.newScaleDownCondition.threshold) {
        return
      }
      const countername = this.countersList.filter(counter => counter.id === this.newScaleDownCondition.counterid).map(counter => { return counter.name }).join(',')
      this.fetchScaleDownConditions()
      this.scaleDownConditions = this.scaleDownConditions.filter(condition => condition.counterid !== this.newScaleDownCondition.counterid)
      this.scaleDownConditions.push({
        counterid: this.newScaleDownCondition.counterid,
        countername: countername,
        relationaloperator: this.newScaleDownCondition.relationaloperator,
        threshold: this.newScaleDownCondition.threshold
      })
      this.selectedScaleDownPolicy.conditions = this.scaleDownConditions

      this.newScaleDownCondition = {
        counterid: null,
        relationaloperator: 'LT',
        threshold: null
      }
    },
    deleteScaleDownCondition (counterId) {
      this.scaleDownConditions = this.scaleDownConditions.filter(condition => condition.counterid !== counterId)
      this.selectedScaleDownPolicy.conditions = this.scaleDownConditions
    },
    updateSshKeyPairs (names) {
      this.form.keypairs = names
      this.sshKeyPairs = names.map((sshKeyPair) => { return sshKeyPair.name })
    },
    updateUserData (id) {
      if (id === '0') {
        this.form.userdataid = undefined
        return
      }
      this.form.userdataid = id
      this.userDataParams = []
      getAPI('listUserData', { id: id }).then(json => {
        const resp = json?.listuserdataresponse?.userdata || []
        if (resp) {
          var params = resp[0].params
          if (params) {
            var dataParams = params.split(',')
          }
          var that = this
          dataParams.forEach(function (val, index) {
            that.userDataParams.push({
              id: index,
              key: val
            })
          })
        }
      })
    },
    updateTemplateLinkedUserData (id) {
      if (id === '0') {
        return
      }
      this.templateUserDataParams = []

      getAPI('listUserData', { id: id }).then(json => {
        const resp = json?.listuserdataresponse?.userdata || []
        if (resp) {
          var params = resp[0].params
          if (params) {
            var dataParams = params.split(',')
          }
          var that = this
          that.templateUserDataParams = []
          if (dataParams) {
            dataParams.forEach(function (val, index) {
              that.templateUserDataParams.push({
                id: index,
                key: val
              })
            })
          }
        }
      })
    },
    updateAffinityGroups (ids) {
      this.form.affinitygroupids = ids
    },
    async pollJob (jobId) {
      return new Promise(resolve => {
        const asyncJobInterval = setInterval(() => {
          getAPI('queryAsyncJobResult', { jobId }).then(async json => {
            const result = json.queryasyncjobresultresponse
            if (result.jobstatus === 0) {
              return
            }

            clearInterval(asyncJobInterval)
            resolve(result)
          })
        }, 1000)
      })
    },
    createVmProfile (createVmGroupData, createVmGroupUserDataDetails) {
      this.addStep('message.creating.autoscale.vmprofile', 'createVmProfile')

      return new Promise((resolve, reject) => {
        const params = {
          ...createVmGroupUserDataDetails,
          ...{
            expungevmgraceperiod: createVmGroupData.expungevmgraceperiod,
            serviceofferingid: createVmGroupData.serviceofferingid,
            templateid: createVmGroupData.templateid,
            userdata: createVmGroupData.userdata,
            userdataid: createVmGroupData.userdataid,
            zoneid: createVmGroupData.zoneid
          }
        }
        if (createVmGroupData.autoscaleuserid) {
          params.autoscaleuserid = createVmGroupData.autoscaleuserid
        }
        var i = 0
        if (createVmGroupData.snmpcommunity) {
          params['counterparam[' + i + '].name'] = 'snmpcommunity'
          params['counterparam[' + i + '].value'] = createVmGroupData.snmpcommunity
          i++
        }
        if (createVmGroupData.snmpport) {
          params['counterparam[' + i + '].name'] = 'snmpport'
          params['counterparam[' + i + '].value'] = createVmGroupData.snmpport
          i++
        }
        var j = 0
        if (createVmGroupData.rootdisksize) {
          params['otherdeployparams[' + j + '].name'] = 'rootdisksize'
          params['otherdeployparams[' + j + '].value'] = createVmGroupData.rootdisksize
          j++
        }
        if (createVmGroupData.overridediskofferingid) {
          params['otherdeployparams[' + j + '].name'] = 'overridediskofferingid'
          params['otherdeployparams[' + j + '].value'] = createVmGroupData.overridediskofferingid
          j++
        }
        if (createVmGroupData.diskofferingid) {
          params['otherdeployparams[' + j + '].name'] = 'diskofferingid'
          params['otherdeployparams[' + j + '].value'] = createVmGroupData.diskofferingid
          j++
        }
        if (createVmGroupData.size) {
          params['otherdeployparams[' + j + '].name'] = 'disksize'
          params['otherdeployparams[' + j + '].value'] = createVmGroupData.size
          j++
        }
        if (createVmGroupData.securitygroupids) {
          params['otherdeployparams[' + j + '].name'] = 'securitygroupids'
          params['otherdeployparams[' + j + '].value'] = createVmGroupData.securitygroupids
          j++
        }
        if (createVmGroupData.keypairs) {
          params['otherdeployparams[' + j + '].name'] = 'keypairs'
          params['otherdeployparams[' + j + '].value'] = createVmGroupData.keypairs
          j++
        }
        if (createVmGroupData.affinitygroupids) {
          params['otherdeployparams[' + j + '].name'] = 'affinitygroupids'
          params['otherdeployparams[' + j + '].value'] = createVmGroupData.affinitygroupids
          j++
        }
        if (createVmGroupData.networkids) {
          params['otherdeployparams[' + j + '].name'] = 'networkids'
          params['otherdeployparams[' + j + '].value'] = createVmGroupData.networkids
          j++
        }

        postAPI('createAutoScaleVmProfile', params).then(async json => {
          const jobId = json.autoscalevmprofileresponse.jobid
          if (jobId) {
            const result = await this.pollJob(jobId)
            if (result.jobstatus === 2) {
              this.messageError = result.jobresult.errortext
              this.processStatus = STATUS_FAILED
              this.setStepStatus(STATUS_FAILED)
              return
            }
            resolve(result.jobresult.autoscalevmprofile)
          }
        }).catch(error => {
          this.messageError = error.response.headers['x-description']
          this.processStatus = STATUS_FAILED
          this.setStepStatus(STATUS_FAILED)
        })
      })
    },
    createCondition (counterid, relationaloperator, threshold) {
      return new Promise((resolve, reject) => {
        const params = {
          counterid: counterid,
          relationaloperator: relationaloperator,
          threshold: threshold
        }
        postAPI('createCondition', params).then(async json => {
          const jobId = json.conditionresponse.jobid
          if (jobId) {
            const result = await this.pollJob(jobId)
            if (result.jobstatus === 2) {
              this.messageError = result.jobresult.errortext
              this.processStatus = STATUS_FAILED
              this.setStepStatus(STATUS_FAILED)
              return
            }
            resolve(result.jobresult.condition)
          }
        }).catch(error => {
          this.messageError = error.response.headers['x-description']
          this.processStatus = STATUS_FAILED
          this.setStepStatus(STATUS_FAILED)
        })
      })
    },
    createScalePolicy (action, name, conditionIds, duration, quiettime) {
      return new Promise((resolve, reject) => {
        const params = {
          name: name,
          action: action,
          duration: duration,
          quiettime: quiettime,
          conditionids: conditionIds
        }
        postAPI('createAutoScalePolicy', params).then(async json => {
          const jobId = json.autoscalepolicyresponse.jobid
          if (jobId) {
            const result = await this.pollJob(jobId)
            if (result.jobstatus === 2) {
              this.messageError = result.jobresult.errortext
              this.processStatus = STATUS_FAILED
              this.setStepStatus(STATUS_FAILED)
              return
            }
            resolve(result.jobresult.autoscalepolicy)
          }
        }).catch(error => {
          this.messageError = error.response.headers['x-description']
          this.processStatus = STATUS_FAILED
          this.setStepStatus(STATUS_FAILED)
        })
      })
    },
    getText (option) {
      return _.get(option, 'displaytext', _.get(option, 'name'))
    },
    fetchGuestOsCategories (skipFetchImages) {
      const key = 'guestOsCategories'
      const params = this.params[key]
      if (this.queryGuestOsCategoryId) {
        params.options.id = this.queryGuestOsCategoryId
      } else if (this.queryTemplateId) {
        this.fetchAllTemplates()
        return Promise.resolve()
      }
      return this.fetchOptions(params, key, ['zones'])
        .then((res) => {
          if (!this.options.guestOsCategories) {
            this.options.guestOsCategories = []
          }
          if (!this.queryGuestOsCategoryId) {
            if (this.showUserCategoryForModernImageSelection) {
              const userCategory = {
                id: '0',
                name: this.$t('label.user')
              }
              if (this.$store.getters.avatar) {
                userCategory.icon = {
                  base64image: this.$store.getters.avatar
                }
              }
              this.options.guestOsCategories.push(userCategory)
            }
            if (this.showAllCategoryForModernImageSelection) {
              this.options.guestOsCategories.push({
                id: '-1',
                name: this.$t('label.all')
              })
            }
          }
          this.form.guestoscategoryid = this.options.guestOsCategories[0].id
          if (skipFetchImages) {
            return
          }
          this.fetchAllTemplates()
        })
        .catch((e) => {
          console.error('Error fetching guestOsCategories:', e)
        })
    },
    changeArchitecture (arch) {
      this.selectedArchitecture = arch
      if (this.isModernImageSelection) {
        this.fetchGuestOsCategories()
        return
      }
      this.fetchAllTemplates()
    },
    async handleSubmit (e) {
      console.log('wizard submit')
      e.preventDefault()
      if (this.loading.deploy) return
      this.formRef.value.validate().then(async () => {
        const values = toRaw(this.form)

        if (!values.templateid) {
          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('message.template.iso')
          })
          return
        }
        if (!values.computeofferingid) {
          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('message.step.2.continue')
          })
          return
        }

        if (!this.defaultNetworkId) {
          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('message.error.select.network')
          })
          return
        }

        const defaultNetwork = this.networks.filter(network => network.id === this.defaultNetworkId)[0]
        if (defaultNetwork.supportsvmautoscaling !== true) {
          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('message.error.select.network.supports.vm.autoscaling')
          })
          return
        }

        if (!values.loadbalancerid) {
          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('message.error.select.load.balancer')
          })
          return
        }

        if (this.error) {
          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('error.form.message')
          })
          return
        }

        const regex = /^([a-zA-Z0-9-]){0,255}$/
        if (!values.name || values.name.length === 0 || !regex.test(values.name)) {
          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('message.error.invalid.autoscale.vmgroup.name')
          })
          return
        }

        if (this.scaleUpPolicies.length === 0) {
          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('message.scaleup.policy.continue')
          })
          return
        }
        for (const policy of this.scaleUpPolicies) {
          if (!policy.name || policy.name.length === 0) {
            this.$notification.error({
              message: this.$t('message.request.failed'),
              description: this.$t('message.scaleup.policy.name.continue')
            })
            return
          }
          if (!policy.scaleupduration || parseInt(policy.scaleupduration) <= 0) {
            this.$notification.error({
              message: this.$t('message.request.failed'),
              description: this.$t('message.scaleup.policy.duration.continue')
            })
            return
          }
          if (policy.conditions.length === 0) {
            this.$notification.error({
              message: this.$t('message.request.failed'),
              description: this.$t('message.scaleup.policy.continue')
            })
            return
          }
          if (parseInt(policy.scaleupduration) < parseInt(values.interval)) {
            this.$notification.error({
              message: this.$t('message.request.failed'),
              description: this.$t('message.error.duration.less.than.interval')
            })
            return
          }
        }

        if (this.scaleDownPolicies.length === 0) {
          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('message.scaledown.policy.continue')
          })
          return
        }
        for (const policy of this.scaleDownPolicies) {
          if (!policy.name || policy.name.length === 0) {
            this.$notification.error({
              message: this.$t('message.request.failed'),
              description: this.$t('message.scaledown.policy.name.continue')
            })
            return
          }
          if (!policy.scaledownduration || parseInt(policy.scaledownduration) <= 0) {
            this.$notification.error({
              message: this.$t('message.request.failed'),
              description: this.$t('message.scaledown.policy.duration.continue')
            })
            return
          }
          if (policy.conditions.length === 0) {
            this.$notification.error({
              message: this.$t('message.request.failed'),
              description: this.$t('message.scaledown.policy.continue')
            })
            return
          }
          if (parseInt(policy.scaledownduration) < parseInt(values.interval)) {
            this.$notification.error({
              message: this.$t('message.request.failed'),
              description: this.$t('message.error.duration.less.than.interval')
            })
            return
          }
        }

        if (parseInt(values.maxmembers) < parseInt(values.minmembers)) {
          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('message.error.max.members.less.than.min.members')
          })
          return
        }

        this.loading.deploy = true

        let networkIds = []

        let createVmGroupData = {}
        // step 1 : select zone
        createVmGroupData.zoneid = values.zoneid
        // step 2: select template/iso
        createVmGroupData.templateid = values.templateid

        if (this.showRootDiskSizeChanger && values.rootdisksize && values.rootdisksize > 0) {
          createVmGroupData.rootdisksize = values.rootdisksize
        } else if (this.rootDiskSizeFixed > 0 && this.template && !this.template.deployasis) {
          createVmGroupData.rootdisksize = this.rootDiskSizeFixed
        }

        // step 3: select service offering
        createVmGroupData.serviceofferingid = values.computeofferingid
        if (this.serviceOffering && this.serviceOffering.iscustomized) {
          if (values.cpunumber) {
            createVmGroupData['details[0].cpuNumber'] = values.cpunumber
          }
          if (values.cpuspeed) {
            createVmGroupData['details[0].cpuSpeed'] = values.cpuspeed
          }
          if (values.memory) {
            createVmGroupData['details[0].memory'] = values.memory
          }
        }
        if (this.selectedTemplateConfiguration) {
          createVmGroupData['details[0].configurationId'] = this.selectedTemplateConfiguration.id
        }
        if (!this.serviceOffering.diskofferingstrictness && values.overridediskofferingid) {
          createVmGroupData.overridediskofferingid = values.overridediskofferingid
          if (values.rootdisksize && values.rootdisksize > 0) {
            createVmGroupData.rootdisksize = values.rootdisksize
          }
        }
        if (this.isCustomizedIOPS) {
          createVmGroupData['details[0].minIops'] = this.minIops
          createVmGroupData['details[0].maxIops'] = this.maxIops
        }
        // step 4: select disk offering
        if (!this.template.deployasis && this.template.childtemplates && this.template.childtemplates.length > 0) {
          if (values.multidiskoffering) {
            let i = 0
            Object.entries(values.multidiskoffering).forEach(([disk, offering]) => {
              const diskKey = `datadiskofferinglist[${i}].datadisktemplateid`
              const offeringKey = `datadiskofferinglist[${i}].diskofferingid`
              createVmGroupData[diskKey] = disk
              createVmGroupData[offeringKey] = offering
              i++
            })
          }
        } else {
          createVmGroupData.diskofferingid = values.diskofferingid
          if (values.size) {
            createVmGroupData.size = values.size
          }
        }
        if (this.isCustomizedDiskIOPS) {
          createVmGroupData['details[0].minIopsDo'] = this.diskIOpsMin
          createVmGroupData['details[0].maxIopsDo'] = this.diskIOpsMax
        }

        // step 6: select network
        if (this.zone.networktype !== 'Basic') {
          if (this.nicToNetworkSelection && this.nicToNetworkSelection.length > 0) {
            for (var j in this.nicToNetworkSelection) {
              var nicNetwork = this.nicToNetworkSelection[j]
              createVmGroupData['nicnetworklist[' + j + '].nic'] = nicNetwork.nic
              createVmGroupData['nicnetworklist[' + j + '].network'] = nicNetwork.network
            }
          } else {
            networkIds = values.networkids
            if (networkIds.length > 0) {
              createVmGroupData.networkids = values.networkids.join(',')
            } else {
              this.$notification.error({
                message: this.$t('message.request.failed'),
                description: this.$t('message.step.4.continue')
              })
              this.loading.deploy = false
              return
            }
          }
        }

        if (this.securitygroupids.length > 0) {
          createVmGroupData.securitygroupids = this.securitygroupids.join(',')
        }

        // advanced settings
        createVmGroupData.keypairs = this.sshKeyPairs.join(',')
        createVmGroupData.affinitygroupids = (values.affinitygroupids || []).join(',')
        const isUserdataAllowed = !this.userdataDefaultOverridePolicy || (this.userdataDefaultOverridePolicy === 'ALLOWOVERRIDE' && this.doUserdataOverride) || (this.userdataDefaultOverridePolicy === 'APPEND' && this.doUserdataAppend)
        if (isUserdataAllowed && values.userdata && values.userdata.length > 0) {
          createVmGroupData.userdata = this.$toBase64AndURIEncoded(values.userdata)
        }
        if (isUserdataAllowed) {
          createVmGroupData.userdataid = values.userdataid
        }

        // vm profile details
        createVmGroupData.autoscaleuserid = values.autoscaleuserid
        createVmGroupData.expungevmgraceperiod = values.expungevmgraceperiod

        createVmGroupData = Object.fromEntries(
          Object.entries(createVmGroupData).filter(([key, value]) => value !== undefined))

        const createVmGroupUserDataDetails = {}
        var idx = 0
        if (this.templateUserDataValues) {
          for (const [key, value] of Object.entries(this.templateUserDataValues)) {
            createVmGroupUserDataDetails['userdatadetails[' + idx + '].' + `${key}`] = value
            idx++
          }
        }
        if (isUserdataAllowed && this.userDataValues) {
          for (const [key, value] of Object.entries(this.userDataValues)) {
            createVmGroupUserDataDetails['userdatadetails[' + idx + '].' + `${key}`] = value
            idx++
          }
        }

        this.processStatusModalVisible = true
        this.processStatus = null

        // create autoscale vm profile
        const vmprofile = await this.createVmProfile(createVmGroupData, createVmGroupUserDataDetails)

        // create scaleup conditions and policy
        const scaleUpPolicyIds = []
        for (const policy of this.scaleUpPolicies) {
          this.setStepStatus(STATUS_FINISH)
          this.currentStep++
          this.addStepDetail('message.creating.autoscale.scaleup.conditions', 'createScaleUpConditions', policy.name)
          var scaleUpConditionIds = []
          for (const condition of policy.conditions) {
            const newCondition = await this.createCondition(condition.counterid, condition.relationaloperator, condition.threshold)
            scaleUpConditionIds.push(newCondition.id)
          }
          this.setStepStatus(STATUS_FINISH)
          this.currentStep++
          this.addStepDetail('message.creating.autoscale.scaleup.policy', 'createScaleUpPolicy', policy.name)
          const scaleUpPolicy = await this.createScalePolicy('ScaleUp', policy.name, scaleUpConditionIds.join(','), policy.scaleupduration, policy.scaleupquiettime)
          scaleUpPolicyIds.push(scaleUpPolicy.id)
        }

        // create scaledown conditions and policy
        const scaleDownPolicyIds = []
        for (const policy of this.scaleDownPolicies) {
          this.setStepStatus(STATUS_FINISH)
          this.currentStep++
          this.addStepDetail('message.creating.autoscale.scaledown.conditions', 'createScaleDownConditions', policy.name)
          var scaleDownConditionIds = []
          for (const condition of policy.conditions) {
            const newCondition = await this.createCondition(condition.counterid, condition.relationaloperator, condition.threshold)
            scaleDownConditionIds.push(newCondition.id)
          }
          this.setStepStatus(STATUS_FINISH)
          this.currentStep++
          this.addStepDetail('message.creating.autoscale.scaledown.policy', 'createScaleDownPolicy', policy.name)
          const scaleDownPolicy = await this.createScalePolicy('ScaleDown', policy.name, scaleDownConditionIds.join(','), policy.scaledownduration, policy.scaledownquiettime)
          scaleDownPolicyIds.push(scaleDownPolicy.id)
        }

        this.setStepStatus(STATUS_FINISH)
        this.currentStep++
        this.addStep('message.creating.autoscale.vmgroup', 'createVmGroup')

        // create autoscale vmgroup
        const params = {
          vmprofileid: vmprofile.id,
          scaleuppolicyids: scaleUpPolicyIds.join(','),
          scaledownpolicyids: scaleDownPolicyIds.join(','),
          lbruleid: values.loadbalancerid,
          name: values.name,
          maxmembers: values.maxmembers,
          minmembers: values.minmembers,
          interval: values.interval
        }
        postAPI('createAutoScaleVmGroup', params).then(async response => {
          const jobId = response.autoscalevmgroupresponse.jobid
          const result = await this.pollJob(jobId)
          if (result.jobstatus === 2) {
            this.messageError = result.jobresult.errortext
            this.processStatus = STATUS_FAILED
            this.setStepStatus(STATUS_FAILED)
            return
          } else {
            this.setStepStatus(STATUS_FINISH)
            const vmgroup = result.jobresult.autoscalevmgroup
            this.$notification.success({
              message: this.$t('label.new.autoscale.vmgroup'),
              description: vmgroup.name,
              duration: 0
            })
            eventBus.emit('vm-refresh-data')
          }
          // Back to previous page
          this.processStatusModalVisible = false
          this.$router.back()
        }).catch(error => {
          this.messageError = error.response.headers['x-description']
          this.processStatus = STATUS_FAILED
          this.setStepStatus(STATUS_FAILED)
          this.loading.deploy = false
        }).finally(() => {
          this.loading.deploy = false
        })
      }).catch(err => {
        if (err) {
          if (err.errorFields) {
            this.formRef.value.scrollToField(err.errorFields[0].name)
          }
          if (err.licensesaccepted) {
            this.$notification.error({
              message: this.$t('message.license.agreements.not.accepted'),
              description: this.$t('message.step.license.agreements.continue')
            })
            return
          }

          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('error.form.message')
          })
        }
      })
    },
    fetchZones (zoneId, listZoneAllow) {
      this.zones = []
      return new Promise((resolve) => {
        this.loading.zones = true
        const param = this.params.zones
        const args = { showicon: true }
        if (zoneId) args.id = zoneId
        getAPI(param.list, args).then(json => {
          const zoneResponse = (json.listzonesresponse.zone || []).filter(item => item.securitygroupsenabled === false)
          if (listZoneAllow && listZoneAllow.length > 0) {
            zoneResponse.map(zone => {
              if (listZoneAllow.includes(zone.id)) {
                this.zones.push(zone)
              }
            })
          } else {
            this.zones = zoneResponse
          }

          resolve(this.zones)
        }).catch(function (error) {
          console.log(error.stack)
        }).finally(() => {
          this.loading.zones = false
        })
      })
    },
    fetchOptions (param, name, exclude) {
      return new Promise((resolve, reject) => {
        if (exclude && exclude.length > 0 && exclude.includes(name)) {
          return resolve(null)
        }
        this.loading[name] = true
        param.loading = true
        param.opts = []
        const options = param.options || {}
        if (!('listall' in options) && !['zones', 'pods', 'clusters', 'hosts', 'dynamicScalingVmConfig', 'hypervisors'].includes(name)) {
          options.listall = true
        }
        getAPI(param.list, options).then((response) => {
          param.loading = false
          _.map(response, (responseItem, responseKey) => {
            if (Object.keys(responseItem).length === 0) {
              this.rowCount[name] = 0
              this.options[name] = []
              return resolve(null)
            }
            if (!responseKey.includes('response')) {
              return resolve(null)
            }
            _.map(responseItem, (response, key) => {
              if (key === 'count') {
                this.rowCount[name] = response
                return
              }
              param.opts = response
              this.options[name] = response

              if (param.field) {
                this.fillValue(param.field)
              }
            })

            if (name === 'zones') {
              let zoneid = ''
              if (this.$route.query.zoneid) {
                zoneid = this.$route.query.zoneid
              } else if (this.options.zones.length === 1) {
                zoneid = this.options.zones[0].id
              }
              if (zoneid) {
                this.form.zoneid = zoneid
                this.onSelectZoneId(zoneid)
              }
            }
          })
          resolve(response)
        }).catch(function (error) {
          console.log(error.stack)
          param.loading = false
          reject(error)
        }).finally(() => {
          this.loading[name] = false
        })
      })
    },
    fetchTemplates (templateFilter, params) {
      const args = Object.assign({}, params)
      if (this.isModernImageSelection && this.form.guestoscategoryid && !['-1', '0'].includes(this.form.guestoscategoryid)) {
        args.oscategoryid = this.form.guestoscategoryid
      }
      if (!args.page || args.keyword || (args.category && args.category !== templateFilter)) {
        args.page = 1
      }
      args.pageSize = args.pageSize || 10
      args.zoneid = _.get(this.zone, 'id')
      if (this.isZoneSelectedMultiArch) {
        args.arch = this.selectedArchitecture
      }
      args.templatefilter = templateFilter
      args.isready = true
      args.details = 'all'
      args.showicon = 'true'
      args.id = this.queryTemplateId
      args.isvnf = false

      delete args.category
      delete args.public
      delete args.featured

      return new Promise((resolve, reject) => {
        getAPI('listTemplates', args).then((response) => {
          resolve(response)
        }).catch((reason) => {
          // ToDo: Handle errors
          reject(reason)
        })
      })
    },
    fetchAllTemplates (params) {
      const promises = []
      const templates = {}
      this.loading.templates = true
      this.imageSearchFilters = params
      const templateFilters = this.getImageFilters(params)
      templateFilters.forEach((filter) => {
        templates[filter] = { count: 0, template: [] }
        promises.push(this.fetchTemplates(filter, params))
      })
      this.options.templates = templates
      Promise.all(promises).then((response) => {
        response.forEach((resItem, idx) => {
          templates[templateFilters[idx]] = _.isEmpty(resItem.listtemplatesresponse) ? { count: 0, template: [] } : resItem.listtemplatesresponse
          this.options.templates = { ...templates }
        })
      }).catch((reason) => {
        console.log(reason)
      }).finally(() => {
        this.loading.templates = false
      })
    },
    filterOption (input, option) {
      return option.label.toUpperCase().indexOf(input.toUpperCase()) >= 0
    },
    resetTemplatesList () {
      const templates = {}
      const templateFilters = this.getImageFilters(null, true)
      templateFilters.forEach((filter) => {
        templates[filter] = { count: 0, template: [] }
      })
      this.options.templates = templates
    },
    resetTemplateAssociatedResources () {
      this.templateConfigurations = []
      this.selectedTemplateConfiguration = {}
      this.templateNics = []
      this.templateLicenses = []
      this.templateProperties = {}
    },
    async fetchZoneOptions () {
      let guestOsFetch = null
      for (const [name, param] of Object.entries(this.params)) {
        if (this.queryNetworkId && name === 'networks') {
          param.options = { id: this.queryNetworkId }
        }
        if (name === 'loadbalancers') {
          if (!this.queryLbRuleId && !this.defaultNetworkId) {
            continue
          }
          if (this.queryLbRuleId) {
            param.options = { id: this.queryLbRuleId }
          }
        }
        const shouldLoad = !('isLoad' in param) || param.isLoad
        if (!shouldLoad) continue
        if (this.isModernImageSelection && name === 'guestOsCategories') {
          guestOsFetch = this.fetchGuestOsCategories(true)
        } else {
          this.fetchOptions(param, name, ['zones'])
        }
      }

      if (this.isModernImageSelection && guestOsFetch) {
        await guestOsFetch
      }
      this.fetchAllTemplates()
      this.updateTemplateKey()
      this.formModel = toRaw(this.form)
    },
    onSelectZoneId (value) {
      if (this.dataPreFill.zoneid !== value) {
        this.dataPreFill = {}
      }
      this.zoneId = value
      this.zone = _.find(this.options.zones, (option) => option.id === value)
      this.zoneSelected = true
      this.isZoneSelectedMultiArch = this.zone.ismultiarch
      if (this.isZoneSelectedMultiArch) {
        this.selectedArchitecture = this.architectureTypes.opts[0].id
      }
      this.selectedZone = this.zoneId
      this.form.zoneid = this.zoneId
      this.form.templateid = undefined
      this.resetTemplatesList()
      this.fetchZoneOptions()
    },
    onSelectGuestOsCategory (value) {
      this.form.guestoscategoryid = value
      this.fetchAllTemplates(this.imageSearchFilters)
    },
    handleSearchFilter (name, options) {
      this.params[name].options = { ...this.params[name].options, ...options }
      this.fetchOptions(this.params[name], name)
    },
    onUserdataTabChange (key, type) {
      this[type] = key
      this.userDataParams = []
    },
    fetchTemplateNics (template) {
      var nics = []
      this.nicToNetworkSelection = []
      if (template && template.deployasisdetails && Object.keys(template.deployasisdetails).length > 0) {
        var keys = Object.keys(template.deployasisdetails)
        keys = keys.filter(key => key.startsWith('network-'))
        for (var key of keys) {
          var propertyMap = JSON.parse(template.deployasisdetails[key])
          nics.push(propertyMap)
        }
        nics.sort(function (a, b) {
          return a.InstanceID - b.InstanceID
        })
        if (this.options.networks && this.options.networks.length > 0) {
          for (var i = 0; i < nics.length; ++i) {
            var nic = nics[i]
            nic.id = nic.InstanceID
            var network = this.options.networks[Math.min(i, this.options.networks.length - 1)]
            nic.selectednetworkid = network.id
            nic.selectednetworkname = network.name
            this.nicToNetworkSelection.push({ nic: nic.id, network: network.id })
          }
        }
      }
      return nics
    },
    groupBy (array, key) {
      const result = {}
      array.forEach(item => {
        if (!result[item[key]]) {
          result[item[key]] = []
        }
        result[item[key]].push(item)
      })
      return result
    },
    fetchTemplateProperties (template) {
      var properties = []
      if (template && template.deployasisdetails && Object.keys(template.deployasisdetails).length > 0) {
        var keys = Object.keys(template.deployasisdetails)
        keys = keys.filter(key => key.startsWith('property-'))
        for (var key of keys) {
          var propertyMap = JSON.parse(template.deployasisdetails[key])
          properties.push(propertyMap)
        }
        properties.sort(function (a, b) {
          return a.index - b.index
        })
      }
      return this.groupBy(properties, 'category')
    },
    fetchTemplateConfigurations (template) {
      var configurations = []
      if (template && template.deployasisdetails && Object.keys(template.deployasisdetails).length > 0) {
        var keys = Object.keys(template.deployasisdetails)
        keys = keys.filter(key => key.startsWith('configuration-'))
        for (var key of keys) {
          var configuration = JSON.parse(template.deployasisdetails[key])
          configuration.name = configuration.label
          configuration.displaytext = configuration.label
          configuration.iscustomized = true
          configuration.cpunumber = 0
          configuration.cpuspeed = 0
          configuration.memory = 0
          for (var hardwareItem of configuration.hardwareItems) {
            if (hardwareItem.resourceType === 'Processor') {
              configuration.cpunumber = hardwareItem.virtualQuantity
              configuration.cpuspeed = hardwareItem.reservation
            } else if (hardwareItem.resourceType === 'Memory') {
              configuration.memory = hardwareItem.virtualQuantity
            }
          }
          configurations.push(configuration)
        }
        configurations.sort(function (a, b) {
          return a.index - b.index
        })
      }
      return configurations
    },
    fetchTemplateLicenses (template) {
      var licenses = []
      if (template && template.deployasisdetails && Object.keys(template.deployasisdetails).length > 0) {
        var keys = Object.keys(template.deployasisdetails)
        const prefix = /eula-\d-/
        keys = keys.filter(key => key.startsWith('eula-')).sort()
        for (var key of keys) {
          var license = {
            id: this.escapePropertyKey(key.replace(' ', '-')),
            name: key.replace(prefix, ''),
            text: template.deployasisdetails[key]
          }
          licenses.push(license)
        }
      }
      return licenses
    },
    deleteFrom (options, values) {
      for (const value of values) {
        delete options[value]
      }
    },
    resetFromTemplateConfiguration () {
      this.deleteFrom(this.params.serviceOfferings.options, ['cpuspeed', 'cpunumber', 'memory'])
      this.deleteFrom(this.dataPreFill, ['cpuspeed', 'cpunumber', 'memory'])
      this.handleSearchFilter('serviceOfferings', {
        page: 1,
        pageSize: 10
      })
    },
    handleTemplateConfiguration () {
      if (!this.selectedTemplateConfiguration) {
        return
      }
      const params = {
        cpunumber: this.selectedTemplateConfiguration.cpunumber,
        cpuspeed: this.selectedTemplateConfiguration.cpuspeed,
        memory: this.selectedTemplateConfiguration.memory,
        page: 1,
        pageSize: 10
      }
      this.dataPreFill.cpunumber = params.cpunumber
      this.dataPreFill.cpuspeed = params.cpuspeed
      this.dataPreFill.memory = params.memory
      this.handleSearchFilter('serviceOfferings', params)
    },
    updateTemplateParameters () {
      if (this.template) {
        this.templateNics = this.fetchTemplateNics(this.template)
        this.templateConfigurations = this.fetchTemplateConfigurations(this.template)
        this.templateLicenses = this.fetchTemplateLicenses(this.template)
        this.templateProperties = this.fetchTemplateProperties(this.template)
        this.selectedTemplateConfiguration = {}
        setTimeout(() => {
          if (this.templateConfigurationExists) {
            this.selectedTemplateConfiguration = this.templateConfigurations[0]
            this.handleTemplateConfiguration()
            if ('templateConfiguration' in this.form.fieldsStore.fieldsMeta) {
              this.updateFieldValue('templateConfiguration', this.selectedTemplateConfiguration.id)
            }
            this.updateComputeOffering(null) // reset as existing selection may be incompatible
          }
        }, 500)
      }
    },
    onSelectTemplateConfigurationId (value) {
      this.selectedTemplateConfiguration = _.find(this.templateConfigurations, (option) => option.id === value)
      this.handleTemplateConfiguration()
      this.updateComputeOffering(null)
    },
    updateTemplateConfigurationOfferingDetails (offeringId) {
      this.rootDiskSizeFixed = 0
      var offering = this.serviceOffering
      if (!offering || offering.id !== offeringId) {
        offering = _.find(this.options.serviceOfferings, (option) => option.id === offeringId)
      }
      if (offering && offering.iscustomized && this.templateConfigurationExists && this.selectedTemplateConfiguration) {
        if ('cpunumber' in this.form.fieldsStore.fieldsMeta) {
          this.updateFieldValue('cpunumber', this.selectedTemplateConfiguration.cpunumber)
        }
        if ((offering.cpuspeed == null || offering.cpuspeed === undefined) && 'cpuspeed' in this.form.fieldsStore.fieldsMeta) {
          this.updateFieldValue('cpuspeed', this.selectedTemplateConfiguration.cpuspeed)
        }
        if ('memory' in this.form.fieldsStore.fieldsMeta) {
          this.updateFieldValue('memory', this.selectedTemplateConfiguration.memory)
        }
      }
      if (offering && offering.rootdisksize > 0) {
        this.rootDiskSizeFixed = offering.rootdisksize
        this.showRootDiskSizeChanger = false
      }
      this.form.rootdisksizeitem = this.showRootDiskSizeChanger && this.rootDiskSizeFixed > 0
      this.formModel = toRaw(this.form)
    },
    handlerError (error) {
      this.error = error
    },
    closeModal () {
      this.loading.deploy = false
      this.processStatusModalVisible = false
      this.currentStep = 0
      this.steps = []
      this.processStatus = null
      this.messageError = ''
    },
    onSelectDiskSize (rowSelected) {
      this.diskSelected = rowSelected
    },
    onSelectRootDiskSize (rowSelected) {
      this.rootDiskSelected = rowSelected
    },
    updateIOPSValue (input, value) {
      this[input] = value
    },
    handleNicsNetworkSelection (nicToNetworkSelection) {
      this.nicToNetworkSelection = nicToNetworkSelection
    }
  }
}
</script>

<style lang="less" scoped>
  .card-footer {
    text-align: right;
    margin-top: 2rem;

    button + button {
      margin-left: 8px;
    }
  }

  .ant-list-item-meta-avatar {
    font-size: 1rem;
  }

  .ant-collapse {
    margin: 2rem 0;
  }
</style>

<style lang="less" scoped>
  @import url('../../style/index');

  .ant-table-selection-column {
    // Fix for the table header if the row selection use radio buttons instead of checkboxes
    > div:empty {
      width: 16px;
    }
  }

  .ant-collapse-borderless > .ant-collapse-item {
    border: 1px solid @border-color-split;
    border-radius: @border-radius-base !important;
    margin: 0 0 1.2rem;
  }

  .zone-radio-button {
    width:100%;
    min-width: 345px;
    height: 60px;
    display: flex;
    padding-left: 20px;
    align-items: center;
  }

  .vm-info-card {
    .ant-card-body {
      min-height: 250px;
      max-height: calc(100vh - 250px);
      overflow-y: auto;
      scroll-behavior: smooth;
    }

    .resource-detail-item__label {
      font-weight: normal;
    }

    .resource-detail-item__details, .resource-detail-item {
      a {
        color: rgba(0, 0, 0, 0.65);
        cursor: default;
        pointer-events: none;
      }
    }
  }

  .form-item-hidden {
    display: none;
  }

  .form {
    display: flex;
    margin-right: -20px;
    margin-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;

    @media (min-width: 760px) {
      flex-direction: row;
    }

    &__item {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding-right: 20px;
      margin-bottom: 20px;

      @media (min-width: 760px) {
        margin-bottom: 0;
      }

      input,
      .ant-select {
        margin-top: auto;
      }

    }

    &__label {
      font-weight: bold;
    }

    &__required {
      margin-right: 5px;
      color: red;
    }

    .error-text {
      display: none;
      color: red;
      font-size: 0.8rem;
    }

    .error {

      input {
        border-color: red;
      }
      .error-text {
        display: block;
      }

    }

  }
</style>