<template>
  <div class="d-flex box flex-column">
    <navbar :person="false">
      <template #tools>
        <v-btn class="mx-2 buttons" rounded @click="$router.push('/home')">
          <v-icon left>mdi-home</v-icon>
          工作台
        </v-btn>
      </template>
    </navbar>
    <div class="d-flex box-content">
      <div>
        <v-card
          class="mx-auto elevation-0"
          width="300"
          height="100%"
        >
          <v-list>
            <v-list-item-group
              v-model="model"
              active-class="active"
              mandatory
              color="indigo"
            >
              <v-list-item
                v-for="(item, index) in items"
                :key="index"
                @click="handlePath(item)"
              >
                <v-list-item-icon>
                  <v-icon>{{ item.icon }}</v-icon>
                </v-list-item-icon>

                <v-list-item-content>
                  <v-list-item-title>{{ item.text }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-card>
      </div>
      <div class="pa-3 box-content">
        <component :is="items[model].path"></component>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/Header/navbar.vue'

import { loadDynamicComponents } from '@/utils'
const vueComponent = require.context('./components', false, /\.vue$/)
const autoComponent = loadDynamicComponents(vueComponent)

export default {
  name: 'system-update',
  components: { Navbar, ...autoComponent },
  data () {
    return {
      model: 0,
      items: [
        {
          icon: 'mdi mdi-cog-sync',
          text: '系统更新',
          path: 'upload'
        },
        {
          icon: 'mdi mdi-history',
          text: '历史更新',
          path: 'history'
        },
        {
          icon: 'mdi mdi-monitor-eye',
          text: '程序监控',
          path: 'monitor'
        }
      ]
    }
  },
  created () {
    const savedTab = new URLSearchParams(window.location.search).get('key')
    this.model = !savedTab ? 0 : this.items.findIndex(e => e.path === savedTab)
  },
  methods: {
    handlePath ({ path }) {
      this.$router.push(`/update?key=${path}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  height: 100vh;
  &-content {
    flex: 1;
    background: #f0f2f5;
    overflow: hidden;
  }
}
.active {
  color: #1976d2 !important;
  background: #f0f2f5 !important;
  &::before {
    background: #f0f2f5 !important;
    opacity: 0;
  }
}
</style>
