<template>
    <div>
      <!-- 侧边小导航 只显示图标 -->
      <template v-if="miniMenu">
        <v-list-item
          v-for="(item, index) in items"
          :key="`${item.name}_${index}`"
          active-class="active"
          :href="item.target ? item.path : undefined"
          :target="item.target ? '_blank' : undefined"
          :to="item.target ? undefined : item.path"
        >
          <v-list-item-icon v-if="item.icon">
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-title></v-list-item-title>
        </v-list-item>
      </template>
      <template v-else>
        <template v-for="(item, index) in items">
          <template v-if="!item.children.length">
            <v-list-item
              :key="`${item.name}_${index}`"
              active-class="active"
              expand
              :style="isFor ? `padding-left: ${20 * retract}px` : ''"
              :href="item.target ? item.path : undefined"
              :target="item.target ? '_blank' : undefined"
              :to="item.target ? undefined : item.path"
            >
              <v-list-item-icon v-if="item.icon && !isFor">
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-title>{{ getMenuTitle(item) }}</v-list-item-title>
            </v-list-item>
          </template>
          <v-list-group
            v-else
            :key="`${item.name}_${index}`"
            :value="$route.path.split('/').indexOf(item.name) > -1"
            :no-action = "isFor"
            :sub-group = "isFor"
            :prepend-icon="isFor ? undefined : item.icon"
          >
            <template v-slot:activator>
              <v-list-item-title>{{ getMenuTitle(item) }}</v-list-item-title>
            </template>
            <side-list :items="item.children" :is-for="true" :retract="retract + 1" />
          </v-list-group>
        </template>
      </template>
    </div>
</template>

<script>
// import SideList from './sideList.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'side-list',
  // components: { SideList },
  props: {
    // 缩进
    retract: {
      type: Number,
      default: 1
    },
    items: {
      type: Array,
      default: () => []
    },
    miniMenu: {
      type: Boolean,
      default: false
    },
    isFor: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      model: 1
    }
  },
  computed: {
    ...mapGetters(['lang'])
  },
  methods: {
    getMenuTitle (item) {
      if (this.lang === 'zh') {
        return item.title || ''
      }
      return item.enName || ''
    },
    handleMenu (item) {
      item.active = true
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  color: #1976d2 !important;
  background: #f0f2f5 !important;
  .v-list-item__title {
    color: #1976d2 !important;
  }

  &::before {
    background: #f0f2f5 !important;
    opacity: 0;
  }
    // .v-list-item--link:before {
      // background: #FFF !important;
      // opacity: 1;
    // }
  }

  .v-list-item__icon {
    margin-right: 20px !important;
  }
  ::v-deep .v-list-item__icon:first-child {
    margin-right: 20px !important;
  }
</style>
