// Copyright (c) 2021-2022 MIND Software LLC. All Rights Reserved.

// This file is part of MIND Multicloud Mobility Software Suite.
// For more information visit https://mindsw.io
<template>
	<right-panel-modal
    :clickNotClose="noBg"
		:openFromParent="dialogModalVisible"
		@closed="close"
    maxWidth="48%"
    :noBg="noBg"
	>
    <template #header>
      <div class="unit-name">{{ name }}</div>
      <el-tabs v-model="tab" class="inside">
        <el-tab-pane
          :label="$t('unit.tabs.summary')"
          name="general"
        />

        <el-tab-pane
          :label="$t('unit.tabs.disks')"
          name="disks"
          :disabled="disableInfo"
        />

        <el-tab-pane
          :label="$t('unit.tabs.ethernet')"
          name="ethernet"
          :disabled="disableInfo"
        />

        <el-tab-pane
          :label="$t('unit.tabs.connections')"
          name="network-con"
          :disabled="disableInfo"
        />

        <el-tab-pane
          :label="$t('unit.summaryTab.events')"
          name="events"
        />
      </el-tabs>
    </template>
    <transition name="fade" mode="out-in">
      <component
        v-if="unit && dialogVisible"
        :is="component"
        @edit-unit="editUnit"
        :activeTab="tab"
        @close="close"
      />
    </transition>
	</right-panel-modal>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import RightPanelModal from '@/components/RightPanelModal/Migrate/Default/RightPanelModal_F.vue'
import { UnitModule } from '@/store/modules/unit'
import Summary from './summary/index.vue'
import Disks from './disks/index.vue'
import Interfaces from './interfaces/index.vue'
import Connections from './connections/index.vue'
import Events from './events/index.vue'

@Component({
  name: 'UnitDetails',
  components: {
    RightPanelModal,
    Summary,
    Disks,
    Interfaces,
    Connections,
    Events
  }
})
export default class extends Vue {
	$refs!: {}
  @Prop({ default: false }) readonly noEdit: boolean

  get dialogVisible() {
    return UnitModule.unitModals.detailsDialog
  }

  get unit() {
    return UnitModule.unitModals.unit
  }

  tab = 'general'

	@Watch('dialogVisible')
  onDialogPropChange(value: boolean) {
	  this.dialogModalVisible = value
  }

	beforeDestroy() {
	  this.close()
	}

  get route() {
    return this.$route.path
  }

  @Watch('route')
  handleRoute() {
    this.close()
  }

  get noBg() {
    return this.$route.path.includes('unit')
  }

	dialogModalVisible = false

  get disableInfo() {
    return this.unit?.status !== 'OK'
  }

  get name() {
    if (!this.unit) {
      return ''
    }

    return this.unit.name
  }

  get component() {
    if (!this.unit) {
      return ''
    }

    switch (this.tab) {
      case 'general':
        return 'Summary'
      case 'disks':
        return 'Disks'
      case 'ethernet':
        return 'Interfaces'
      case 'network-con':
        return 'Connections'
      case 'events':
        return 'Events'
      default:
        return ''
    }
  }

	close() {
    UnitModule.updateUnitModals({
      ...UnitModule.unitModals,
      ...{
        detailsDialog: false,
        unit: null
      }
    })
	}

  editUnit() {
    const unit = { ...this.unit }
    this.close()

    this.$nextTick(() => {
      UnitModule.updateUnitModals({
        ...UnitModule.unitModals,
        ...{
          detailsDialog: false,
          editDialog: true,
          unit
        }
      })
    })
  }
}

</script>
нужно чтобы при новом открытии модалки всегда сначала отображалася tab = general