<template>
  <v-navigation-drawer
    v-model="drawer"
    :color="color"
    right="true"
    absolute
    dark
    width="400px"
    height="100%"
    floating
  >
    <v-tabs
      v-model="tab"
      background-color="deep-purple accent-4"
      class="elevation-2"
      dark
      :centered="centered"
      :grow="grow"
      :vertical="vertical"
      :right="right"
      :prev-icon="prevIcon ? 'mdi-arrow-left-bold-box-outline' : undefined"
      :next-icon="nextIcon ? 'mdi-arrow-right-bold-box-outline' : undefined"
      :icons-and-text="icons"
    >
      <v-tabs-slider></v-tabs-slider>

      <v-tab v-for="i in tabs" :key="i" :href="`#tab-${i}`">
        Tab {{ i }}
        <v-icon v-if="icons">mdi-phone</v-icon>
      </v-tab>

      <v-tab-item v-for="i in tabs" :key="i" :value="'tab-' + i">
        <v-card flat tile>
          <v-card-text>
            <v-list dense nav class="py-0">
              <v-list-item two-line class="px-0">
                <v-list-item-avatar>
                  <v-icon>mdi-heart</v-icon>
                </v-list-item-avatar>

                <v-list-item-content>
                  <v-list-item-title>IGServer</v-list-item-title>
                  <v-list-item-subtitle>目录&文档&资源信息</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-divider></v-divider>
            </v-list>
          </v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs>
  </v-navigation-drawer>
</template>

<script>
// import IconFont from "@/components/IconFont/iconfront";
export default {
  name: "MapgisIgserverCatlogVue",
  components: {},
  data() {
    return {
      activeName: "second",
      drawer: true,
      direction: "rtl",
      color: "#1867c0",
      tabs: 3
    };
  },
  methods: {
    handleShow() {
      this.drawer = true;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="scss">
</style>