<template>
  <v-tabs v-model="activeIndex">
      <!-- <template> -->
        <v-tab v-for="item, tabIndex in items" :key="item.title" class="px-0" >
          <v-menu
            v-if="item.children && item.children.length"
            close-delay="100"

            offset-y
            bottom
            right
          >
            <template v-slot:activator="{ on, attrs }">
              <div style="width: 100%; height: 100%;" class="d-flex align-center justify-center px-4" v-bind="attrs" v-on="on">
                <span v-if="showTabTitle">{{ item.title }}</span>
                <span v-else>{{ item.children.find(e => e.path === path)?.title ?? item.title }}</span>
                <v-icon right>
                  mdi-menu-down
                </v-icon>
              </div>
            </template>
            <v-list>
              <v-list-item-group
                :value="item.children.findIndex(e => e.path === path)"
                color="primary"
              >
                <v-list-item
                  v-for="val in item.children"
                  :key="val.title"
                  @click="handleClick(val, tabIndex)"
                >
                  {{ val.title }}
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-menu>
          <span v-else style="width: 100%; height: 100%;" class="d-flex align-center justify-center px-4" @click="handleClick(item, tabIndex)">{{ item.title }}</span>
        </v-tab>
        <!-- <v-tab v-else @click="handleClick(item)" :key="item.title" >{{ item.title }}</v-tab> -->
      <!-- </template> -->
    </v-tabs>
</template>

<script>
export default {
  name: 'tabs-list',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    index: {
      type: Number,
      default: 0
    },
    showTabTitle: { // 切换menu不改变页签标题
      type: Boolean,
      default: false
    },
    path: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      activeIndex: this.index
    }
  },
  watch: {
    index (val) {
      this.activeIndex = val
    }
  },
  methods: {
    handleClick (val, tabIndex) {
      this.$emit('click', val, tabIndex)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
