// 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-divider/>

    <div class="title">
      <div class="form__label">
        <tooltip-label :title="$t('label.vnf.nics')" :tooltip="apiParams.vnfnics.description"/>
      </div>
    </div>
    <div>
      <a-button
        type="dashed"
        style="width: 100%"
        :disabled="!('updateVnfTemplate' in $store.getters.apis && isAdminOrOwner())"
        @click="onShowAddVnfNic">
        <template #icon><plus-outlined /></template>
        {{ $t('label.vnf.nic.add') }}
      </a-button>
    </div>

    <a-table
      size="small"
      style="overflow-y: auto"
      :loading="loading"
      :columns="columns"
      :dataSource="vnfNics"
      :pagination="false"
      :rowKey="record => record.deviceid">
      <template #deviceid="{record}">
        <span> {{ record.deviceid }} </span>
      </template>
      <template #name="{record}">
        <span> {{ record.name }} </span>
      </template>
      <template #required="{ record }">
        <span v-if="record.required">{{ $t('label.yes') }}</span>
        <span v-else>{{ $t('label.no') }}</span>
      </template>
      <template #management="{ record }">
        <span v-if="record.management">{{ $t('label.yes') }}</span>
        <span v-else>{{ $t('label.no') }}</span>
      </template>
      <template #description="{record}">
        <span> {{ record.description }} </span>
      </template>
      <template #actions="{ record }">
        <div class="shift-btns" v-if="'updateVnfTemplate' in $store.getters.apis && isAdminOrOwner()">
          <a-tooltip placement="top">
            <template #title>{{ $t('label.vnf.nic.edit') }}</template>
            <a-button shape="round" @click="onShowEditVnfNic(record)" class="shift-btn">
              <EditOutlined class="shift-btn" />
            </a-button>
          </a-tooltip>
          <a-tooltip placement="top">
            <template #title>{{ $t('label.move.up.row') }}</template>
            <a-button shape="round" @click="moveVnfNicUp(record)" class="shift-btn">
              <CaretUpOutlined class="shift-btn" />
            </a-button>
          </a-tooltip>
          <a-tooltip placement="top">
            <template #title>{{ $t('label.move.down.row') }}</template>
            <a-button shape="round" @click="moveVnfNicDown(record)" class="shift-btn">
              <CaretDownOutlined class="shift-btn" />
            </a-button>
          </a-tooltip>
          <a-popconfirm
            :title="$t('label.vnf.nic.delete') + '?'"
            @confirm="deleteVnfNic(record)"
            :okText="$t('label.yes')"
            :cancelText="$t('label.no')"
          >
            <template #title>{{ $t('label.vnf.nic.delete') }}</template>
            <a-button shape="round" class="shift-btn" :danger="true" type="primary">
              <DeleteOutlined class="shift-btn" />
            </a-button>
          </a-popconfirm>
        </div>
      </template>
    </a-table>

    <a-modal
      :title="$t('label.vnf.nic.add')"
      :visible="showAddVnfNic"
      :afterClose="closeVnfNicModal"
      :maskClosable="false"
      :closable="true"
      :footer="null"
      @cancel="closeVnfNicModal">

      <div class="new-vnf-nic"  v-ctrl-enter="addVnfNic">
        <div class="new-vnf-nic__item">
          <div class="new-vnf-nic__label">
            <span class="new-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.deviceid')" :tooltip="$t('label.vnf.nic.deviceid')"/>
          </div>
          <a-input v-model:value="newVnfNic.deviceid" type="number" v-focus="true"></a-input>
        </div>
        <div class="new-vnf-nic__item">
          <div class="new-vnf-nic__label">
            <span class="new-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.name')" :tooltip="$t('label.vnf.nic.name')"/>
          </div>
          <a-input v-model:value="newVnfNic.name"></a-input>
        </div>
        <div class="new-vnf-nic__item">
          <div class="new-vnf-nic__label">
            <span class="new-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.required')" :tooltip="$t('label.vnf.nic.required')"/>
          </div>
          <a-switch v-model:checked="newVnfNic.required" :checked="true" />
        </div>
        <div class="new-vnf-nic__item">
          <div class="new-vnf-nic__label">
            <span class="new-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.vnf.nic.management')" :tooltip="$t('label.vnf.nic.management.description')"/>
          </div>
          <a-switch v-model:checked="newVnfNic.management" :checked="false" />
        </div>
        <div class="new-vnf-nic__item">
          <div class="new-vnf-nic__label">
            <tooltip-label :title="$t('label.description')"  :tooltip="$t('label.vnf.nic.description')"/>
          </div>
          <a-input v-model:value="newVnfNic.description"></a-input>
        </div>
      </div>
      <div :span="24" class="action-button">
        <a-button @click="showAddVnfNic = false">{{ $t('label.cancel') }}</a-button>
        <a-button ref="submit" type="primary" @click="addVnfNic">{{ $t('label.ok') }}</a-button>
      </div>
    </a-modal>

    <a-modal
      :title="$t('label.vnf.nic.add')"
      :visible="showAddVnfNic"
      :afterClose="closeVnfNicModal"
      :maskClosable="false"
      :closable="true"
      :footer="null"
      @cancel="closeVnfNicModal">

      <div class="new-vnf-nic"  v-ctrl-enter="addVnfNic">
        <div class="new-vnf-nic__item">
          <div class="new-vnf-nic__label">
            <span class="new-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.deviceid')" :tooltip="$t('label.vnf.nic.deviceid')"/>
          </div>
          <a-input v-model:value="newVnfNic.deviceid" type="number" v-focus="true"></a-input>
        </div>
        <div class="new-vnf-nic__item">
          <div class="new-vnf-nic__label">
            <span class="new-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.name')" :tooltip="$t('label.vnf.nic.name')"/>
          </div>
          <a-input v-model:value="newVnfNic.name"></a-input>
        </div>
        <div class="new-vnf-nic__item">
          <div class="new-vnf-nic__label">
            <span class="new-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.required')" :tooltip="$t('label.vnf.nic.required')"/>
          </div>
          <a-switch v-model:checked="newVnfNic.required" :checked="true" />
        </div>
        <div class="new-vnf-nic__item">
          <div class="new-vnf-nic__label">
            <span class="new-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.vnf.nic.management')" :tooltip="$t('label.vnf.nic.management.description')"/>
          </div>
          <a-switch v-model:checked="newVnfNic.management" :checked="false" />
        </div>
        <div class="new-vnf-nic__item">
          <div class="new-vnf-nic__label">
            <tooltip-label :title="$t('label.description')"  :tooltip="$t('label.vnf.nic.description')"/>
          </div>
          <a-input v-model:value="newVnfNic.description"></a-input>
        </div>
      </div>
      <div :span="24" class="action-button">
        <a-button @click="showAddVnfNic = false">{{ $t('label.cancel') }}</a-button>
        <a-button ref="submit" type="primary" @click="addVnfNic">{{ $t('label.ok') }}</a-button>
      </div>
    </a-modal>

    <a-modal
      :title="$t('label.vnf.nic.edit')"
      :visible="showEditVnfNic"
      :afterClose="closeVnfNicModal"
      :maskClosable="false"
      :closable="true"
      :footer="null"
      @cancel="closeVnfNicModal">

      <div class="update-vnf-nic"  v-ctrl-enter="editVnfNic">
        <div class="update-vnf-nic__item">
          <div class="update-vnf-nic__label">
            <span class="update-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.deviceid')" :tooltip="$t('label.vnf.nic.deviceid')"/>
          </div>
          <span> {{ updateVnfNic.deviceid }} </span>
        </div>
        <div class="update-vnf-nic__item">
          <div class="update-vnf-nic__label">
            <span class="update-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.name')" :tooltip="$t('label.vnf.nic.name')"/>
          </div>
          <a-input v-model:value="updateVnfNic.name"></a-input>
        </div>
        <div class="update-vnf-nic__item">
          <div class="update-vnf-nic__label">
            <span class="update-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.required')" :tooltip="$t('label.vnf.nic.required')"/>
          </div>
          <a-switch v-model:checked="updateVnfNic.required" :checked="true" />
        </div>
        <div class="update-vnf-nic__item">
          <div class="update-vnf-nic__label">
            <span class="update-vnf-nic__required">*</span>
            <tooltip-label :title="$t('label.vnf.nic.management')" :tooltip="$t('label.vnf.nic.management.description')"/>
          </div>
          <a-switch v-model:checked="updateVnfNic.management" :checked="false" />
        </div>
        <div class="update-vnf-nic__item">
          <div class="update-vnf-nic__label">
            <tooltip-label :title="$t('label.description')"  :tooltip="$t('label.vnf.nic.description')"/>
          </div>
          <a-input v-model:value="updateVnfNic.description"></a-input>
        </div>
      </div>
      <div :span="24" class="action-button">
        <a-button @click="showEditVnfNic = false">{{ $t('label.cancel') }}</a-button>
        <a-button ref="submit" type="primary" @click="editVnfNic">{{ $t('label.ok') }}</a-button>
      </div>
    </a-modal>

    <a-divider/>
    <div class="title">
      <div class="form__label">
        <tooltip-label :title="$t('label.vnf.details')" :tooltip="apiParams.vnfdetails.description"/>
      </div>
    </div>
    <div v-show="!showAddVnfDetail">
      <a-button
        type="dashed"
        style="width: 100%"
        :disabled="!('updateVnfTemplate' in $store.getters.apis && isAdminOrOwner())"
        @click="onShowAddVnfDetail">
        <template #icon><plus-outlined /></template>
        {{ $t('label.vnf.detail.add') }}
      </a-button>
    </div>

    <div v-show="showAddVnfDetail">
      <a-input-group
        type="text"
        compact>
        <a-auto-complete
          class="detail-input"
          ref="keyElm"
          :filterOption="filterOption"
          v-model:value="newKey"
          :options="detailKeys"
          :placeholder="$t('label.name')" />
        <a-input
          class="tag-disabled-input"
          style=" width: 30px; border-left: 0; pointer-events: none; text-align: center"
          placeholder="="
          disabled />
        <a-select
          v-if="newKey === 'access_methods'"
          class="detail-input"
          v-model:value="newValues"
          mode="multiple"
          :placeholder="$t('label.value')"
          :filterOption="filterOption">
          <a-select-option v-for="opt in detailValues" :key="opt.value" :label="opt.value">
              <span>
                {{ opt.value }}
              </span>
          </a-select-option>
        </a-select>
        <a-input
          v-else
          class="detail-input"
          :filterOption="filterOption"
          v-model:value="newValue"
          :options="detailValues"
          :placeholder="$t('label.value')" />
        <tooltip-button :tooltip="$t('label.add.setting')" :shape="null" icon="check-outlined" @onClick="addVnfDetail" buttonClass="detail-button" />
        <tooltip-button :tooltip="$t('label.cancel')" :shape="null" icon="close-outlined" @onClick="closeVnfDetail" buttonClass="detail-button" />
      </a-input-group>
      <p v-if="error" style="color: red"> {{ $t(error) }} </p>
    </div>

    <a-list size="large">
      <a-list-item :key="index" v-for="(item, index) in vnfDetails">
        <a-list-item-meta>
          <template #title>
            {{ item.name }}
          </template>
          <template #description>
            <div v-if="item.edit" style="display: flex">
              <a-select
                v-if="item.name === 'access_methods'"
                class="detail-input"
                v-model:value="item.values"
                mode="multiple"
                :placeholder="$t('label.value')"
                :filterOption="filterOption">
                <a-select-option v-for="opt in getEditDetailOptions(vnfDetailOptions[item.name])" :key="opt.value" :label="opt.value">
                  <span>
                    {{ opt.value }}
                  </span>
                </a-select-option>
              </a-select>
              <a-auto-complete
                v-else
                style="width: 100%"
                v-model:value="item.displayvalue"
                :options="getEditDetailOptions(vnfDetailOptions[item.name])"
                @change="val => handleInputChange(val, index)"
                @pressEnter="e => updateVnfDetail(index)" />
              <tooltip-button
                buttonClass="edit-button"
                :tooltip="$t('label.cancel')"
                @onClick="hideEditVnfDetail(index)"
                v-if="item.edit"
                iconType="close-circle-two-tone"
                iconTwoToneColor="#f5222d" />
              <tooltip-button
                buttonClass="edit-button"
                :tooltip="$t('label.ok')"
                @onClick="updateVnfDetail(index)"
                v-if="item.edit"
                iconType="check-circle-two-tone"
                iconTwoToneColor="#52c41a" />
            </div>
            <span v-else style="word-break: break-all">{{ item.displayvalue }}</span>
          </template>
        </a-list-item-meta>
        <template #actions>
          <div
            v-if="'updateVnfTemplate' in $store.getters.apis && isAdminOrOwner()">
            <tooltip-button
              :tooltip="$t('label.edit')"
              icon="edit-outlined"
              @onClick="showEditVnfDetail(index)" />
          </div>
          <div
            v-if="'updateVnfTemplate' in $store.getters.apis && isAdminOrOwner()">
            <a-popconfirm
              :title="`${$t('label.delete.setting')}?`"
              @confirm="deleteVnfDetail(index)"
              :okText="$t('label.yes')"
              :cancelText="$t('label.no')"
              placement="left"
            >
              <tooltip-button :tooltip="$t('label.delete')" type="primary" :danger="true" icon="delete-outlined" />
            </a-popconfirm>
          </div>
        </template>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { api } from '@/api'
import Status from '@/components/widgets/Status'
import TooltipButton from '@/components/widgets/TooltipButton'
import TooltipLabel from '@/components/widgets/TooltipLabel'

export default {
  name: 'TemplateVnfSettings',
  components: {
    TooltipButton,
    TooltipLabel,
    Status
  },
  props: {
    resource: {
      type: Object,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      resourceType: 'VnfTemplate',
      vnfDetailOptions: {},
      columns: [],
      vnfNics: [],
      previousVnfNics: [],
      showAddVnfNic: false,
      showEditVnfNic: false,
      newVnfNic: {
        deviceid: null,
        name: null,
        required: true,
        management: false,
        description: null
      },
      updateVnfNic: {
        deviceid: null,
        name: null,
        required: true,
        management: false,
        description: null
      },
      vnfDetails: [],
      previousVnfDetails: [],
      showAddVnfDetail: false,
      newKey: '',
      newValue: '',
      newValues: [],
      error: false
    }
  },
  beforeCreate () {
    this.apiParams = this.$getApiParams('updateVnfTemplate')
  },
  computed: {
    detailKeys () {
      return Object.keys(this.vnfDetailOptions).map(key => {
        return { value: key }
      })
    },
    detailValues () {
      if (!this.newKey) {
        return []
      }
      if (!Array.isArray(this.vnfDetailOptions[this.newKey])) {
        if (this.vnfDetailOptions[this.newKey]) {
          return { value: this.vnfDetailOptions[this.newKey] }
        } else {
          return ''
        }
      }
      return this.vnfDetailOptions[this.newKey].map(value => {
        return { value: value }
      })
    }
  },
  created () {
    this.columns = [
      {
        title: this.$t('label.deviceid'),
        dataIndex: 'deviceid',
        slots: { customRender: 'deviceid' }
      },
      {
        title: this.$t('label.name'),
        dataIndex: 'name'
      },
      {
        title: this.$t('label.required'),
        dataIndex: 'required',
        slots: { customRender: 'required' }
      },
      {
        title: this.$t('label.vnf.nic.management'),
        dataIndex: 'management',
        slots: { customRender: 'management' }
      },
      {
        title: this.$t('label.description'),
        dataIndex: 'description',
        slots: { customRender: 'description' }
      },
      {
        title: this.$t('label.action'),
        slots: { customRender: 'actions' }
      }
    ]
    this.columns.push({
      title: '',
      dataIndex: 'action',
      width: 100,
      slots: { customRender: 'action' }
    })

    const userInfo = this.$store.getters.userInfo
    if (!['Admin'].includes(userInfo.roletype) &&
      (userInfo.account !== this.resource.account || userInfo.domain !== this.resource.domain)) {
      this.columns = this.columns.filter(col => { return col.dataIndex !== 'status' })
    }
    this.initForm()
    this.fetchData()
  },
  watch: {
    loading (newData, oldData) {
      if (!newData && !this.showGroupActionModal) {
        this.fetchData()
      }
    }
  },
  methods: {
    initForm () {
      this.formRef = ref()
      this.form = reactive({})
      this.rules = reactive({
        zoneid: [{ type: 'array', required: true, message: this.$t('message.error.select') }]
      })
      this.previousVnfNics = this.resource.vnfnics?.slice() || []
      this.previousVnfDetails = []
      if (this.resource.vnfdetails) {
        this.previousVnfDetails = Object.keys(this.resource.vnfdetails).map(k => {
          return {
            name: k,
            value: this.resource.vnfdetails[k],
            displayvalue: this.getDisplayValue(k, this.resource.vnfdetails[k]),
            values: k === 'access_methods' ? this.resource.vnfdetails[k].split(',') : null,
            edit: false
          }
        })
      }
      api('listDetailOptions', { resourcetype: this.resourceType }).then(json => {
        this.vnfDetailOptionsInApi = json.listdetailoptionsresponse.detailoptions.details
        this.vnfDetailOptions = {}
        Object.keys(this.vnfDetailOptionsInApi).sort().forEach(k => {
          this.vnfDetailOptions[k] = this.vnfDetailOptionsInApi[k]
        })
      })
    },
    fetchData () {
      this.vnfNics = this.previousVnfNics.slice() || []
      this.vnfDetails = this.previousVnfDetails.slice() || []
    },
    isAdminOrOwner () {
      return ['Admin'].includes(this.$store.getters.userInfo.roletype) ||
        (this.resource.domainid === this.$store.getters.userInfo.domainid && this.resource.account === this.$store.getters.userInfo.account) ||
        this.resource.project && this.resource.projectid === this.$store.getters.project.id
    },
    onShowAddVnfNic () {
      this.showAddVnfNic = true
    },
    filterOption (input, option) {
      return (
        option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
      )
    },
    addVnfNic () {
      if (!this.newVnfNic.deviceid || !this.newVnfNic.name) {
        this.$notification.error({
          message: this.$t('message.request.failed'),
          description: this.$t('message.please.enter.valid.value')
        })
        return
      }
      if (this.newVnfNic && this.newVnfNic.deviceid && this.newVnfNic.name) {
        this.vnfNics.push({
          deviceid: this.newVnfNic.deviceid,
          name: this.newVnfNic.name,
          required: this.newVnfNic.required,
          management: this.newVnfNic.management,
          description: this.newVnfNic.description
        })
      }
      this.updateVnfTemplateNics()
    },
    deleteVnfNic (record) {
      for (var index = 0; index < this.vnfNics.length; index++) {
        var nic = this.vnfNics[index]
        if (nic.deviceid === record.deviceid) {
          this.vnfNics.splice(index, 1)
          break
        }
      }
      this.updateVnfTemplateNics()
    },
    onShowEditVnfNic (record) {
      this.updateVnfNic.deviceid = record.deviceid
      this.updateVnfNic.name = record.name
      this.updateVnfNic.required = record.required
      this.updateVnfNic.management = record.management
      this.updateVnfNic.description = record.description
      this.showEditVnfNic = true
    },
    getEditDetailOptions (values) {
      if (!values) {
        return
      }
      var data = values.map(value => { return { value: value } })
      return data
    },
    editVnfNic () {
      if (!this.updateVnfNic.name) {
        this.$notification.error({
          message: this.$t('message.request.failed'),
          description: this.$t('message.please.enter.valid.value')
        })
        return
      }
      if (this.updateVnfNic && this.updateVnfNic.name) {
        for (var index = 0; index < this.vnfNics.length; index++) {
          var nic = this.vnfNics[index]
          if (nic.deviceid === this.updateVnfNic.deviceid) {
            this.vnfNics[index] = this.updateVnfNic
          }
        }
      }
      this.updateVnfTemplateNics()
    },
    moveVnfNicUp (record) {
      const deviceid = record.deviceid
      let currentNic = null
      let previousNic = null
      for (var index = 0; index < this.vnfNics.length; index++) {
        var nic = this.vnfNics[index]
        if (nic.deviceid === record.deviceid) {
          currentNic = JSON.parse(JSON.stringify(nic))
          this.vnfNics[index] = currentNic
        } else if (nic.deviceid === record.deviceid - 1) {
          previousNic = JSON.parse(JSON.stringify(nic))
          this.vnfNics[index] = previousNic
        }
      }
      if (currentNic && previousNic) {
        currentNic.deviceid = deviceid - 1
        previousNic.deviceid = deviceid
        const currentRequired = currentNic.required
        currentNic.required = previousNic.required
        previousNic.required = currentRequired
        this.updateVnfTemplateNics()
      } else {
        this.$notification.error({
          message: this.$t('message.request.failed'),
          description: this.$t('message.vnf.nic.move.up.fail')
        })
      }
    },
    moveVnfNicDown (record) {
      const deviceid = record.deviceid
      let currentNic = null
      let nextNic = null
      for (var index = 0; index < this.vnfNics.length; index++) {
        var nic = this.vnfNics[index]
        if (nic.deviceid === record.deviceid) {
          currentNic = JSON.parse(JSON.stringify(nic))
          this.vnfNics[index] = currentNic
        } else if (nic.deviceid === record.deviceid + 1) {
          nextNic = JSON.parse(JSON.stringify(nic))
          this.vnfNics[index] = nextNic
        }
      }
      if (currentNic && nextNic) {
        currentNic.deviceid = deviceid + 1
        nextNic.deviceid = deviceid
        const currentRequired = currentNic.required
        currentNic.required = nextNic.required
        nextNic.required = currentRequired
        this.updateVnfTemplateNics()
      } else {
        this.$notification.error({
          message: this.$t('message.request.failed'),
          description: this.$t('message.vnf.nic.move.down.fail')
        })
      }
    },
    updateVnfTemplateDetails () {
      this.updateVnfTemplate(true, false)
    },
    updateVnfTemplateNics () {
      this.updateVnfTemplate(false, true)
    },
    updateVnfTemplate (areDetailsChanged, areNicsChanged) {
      const apiName = 'updateVnfTemplate'
      if (!(apiName in this.$store.getters.apis)) {
        this.$notification.error({
          message: this.$t('error.execute.api.failed') + ' ' + apiName,
          description: this.$t('message.user.not.permitted.api')
        })
        return
      }

      const params = { id: this.resource.id }
      if (areDetailsChanged) {
        if (this.vnfDetails.length === 0) {
          params.cleanupvnfdetails = true
        } else {
          this.vnfDetails.forEach(function (item, index) {
            params['vnfdetails[0].' + item.name] = item.value
          })
        }
      }

      if (areNicsChanged) {
        let i = 0
        if (this.vnfNics.length === 0) {
          params.cleanupvnfnics = true
        }
        for (var index = 0; index < this.vnfNics.length; index++) {
          var nic = this.vnfNics[index]
          params['vnfnics[' + i + '].deviceid'] = nic.deviceid
          params['vnfnics[' + i + '].name'] = nic.name
          params['vnfnics[' + i + '].required'] = nic.required
          params['vnfnics[' + i + '].management'] = nic.management
          params['vnfnics[' + i + '].description'] = nic.description
          i++
        }
      }

      api(apiName, params).then(json => {
        this.vnfNics = json.updatetemplateresponse.template.vnfnics || []
        const details = json.updatetemplateresponse.template.vnfdetails || []
        this.vnfDetails = Object.keys(details).map(k => {
          return {
            name: k,
            value: details[k],
            displayvalue: this.getDisplayValue(k, details[k]),
            values: k === 'access_methods' ? details[k].split(',') : null,
            edit: false
          }
        })
        this.previousVnfNics = this.vnfNics.slice()
        this.previousVnfDetails = this.vnfDetails.slice()
        this.closeVnfDetail()
        this.closeVnfNicModal()
      }).catch(error => {
        this.$notifyError(error)
        this.fetchData()
      }).finally(f => {
      })
    },
    getDisplayValue (name, value) {
      return name.includes('password') ? '********' : value
    },
    showEditVnfDetail (index) {
      this.vnfDetails[index].edit = true
      this.vnfDetails[index].originalValue = this.vnfDetails[index].value
    },
    hideEditVnfDetail (index) {
      this.vnfDetails[index].edit = false
      this.vnfDetails[index].value = this.vnfDetails[index].originalValue
    },
    handleInputChange (val, index) {
      this.vnfDetails[index].value = val
    },
    updateVnfDetail (index) {
      if (Array.isArray(this.vnfDetails[index].values) && this.vnfDetails[index].values.length > 0) {
        this.vnfDetails[index].value = this.vnfDetails[index].values.join(',')
      } else {
        this.vnfDetails[index].value = this.vnfDetails[index].displayvalue
      }
      this.vnfDetails[index].displayvalue = this.getDisplayValue(this.vnfDetails[index].name, this.vnfDetails[index].value)
      this.updateVnfTemplateDetails()
    },
    onShowAddVnfDetail () {
      this.showAddVnfDetail = true
      setTimeout(() => {
        this.$refs.keyElm.focus()
      })
    },
    addVnfDetail () {
      if (this.newKey === '' || (this.newValue === '' && this.newValues.length === 0)) {
        this.error = this.$t('message.error.provide.setting')
        return
      }
      this.error = false
      this.newValueString = ''
      if (this.newValues.length > 0) {
        this.newValueString = this.newValues.join(',')
      } else {
        this.newValueString = this.newValue
      }
      this.vnfDetails.push({ name: this.newKey, value: this.newValueString })
      this.updateVnfTemplateDetails()
    },
    deleteVnfDetail (index) {
      this.vnfDetails.splice(index, 1)
      this.updateVnfTemplateDetails()
    },
    closeVnfDetail () {
      this.newKey = ''
      this.newValue = ''
      this.newValues = []
      this.error = false
      this.showAddVnfDetail = false
    },
    closeVnfNicModal () {
      this.showAddVnfNic = false
      this.showEditVnfNic = false
      this.newVnfNic = {
        deviceid: null,
        name: null,
        required: true,
        management: false,
        description: null
      }
    }
  }
}
</script>

<style lang="less" scoped>
.row-element {
  margin-top: 15px;
  margin-bottom: 15px;
}

.detail-input {
  width: calc(calc(100% / 2) - 45px);
}

.detail-button {
  width: 30px;
}

.shift-btns {
  display: flex;
}

.shift-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 12px;

  &:not(:last-child) {
    margin-right: 5px;
  }

  &--rotated {
    font-size: 10px;
    transform: rotate(90deg);
  }
}

.new-vnf-nic {
  &__item {
    margin-bottom: 10px;
  }

  &__label {
    margin-bottom: 5px;
    font-weight: bold;
  }

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

.update-vnf-nic {
  &__item {
    margin-bottom: 10px;
  }

  &__label {
    margin-bottom: 5px;
    font-weight: bold;
  }

  &__required {
    margin-right: 5px;
    color: red;
  }
}
</style>
