<template>
  <div class="menu-wrapper">
    <template v-for="item in menu">
      <!-- 没有二级菜单 -->
      <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
                    :index="item[pathKey]"
                    @click="open(item)"
                    :key="item[labelKey]"
                    :class="{'is-active':vaildAvtive(item)}">
        <div slot="title"
              :alt="item[pathKey]"
        class="flexMenu">
          <span>{{generateTitle(item)}}</span>
          <el-switch v-if="switchStatus" v-model="item.status" @change="status(item)"></el-switch>
        </div>
      </el-menu-item>
      <!-- 有二级菜单 -->
      <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
                  :index="item[pathKey]"
                  :key="item[labelKey]">
        <template slot="title">
          <span slot="title"
                :class="{'el-menu--display':collapse && first}">{{generateTitle(item)}}</span>
        </template>
        <!-- 子集菜单 -->
        <template v-for="(child,cindex) in item[childrenKey]">
          <el-menu-item :index="child[pathKey],cindex"
                        @click="open(child)"
                        :class="{'is-active':vaildAvtive(child)}"
                        v-if="validatenull(child[childrenKey])"
                        :key="child[labelKey]">
            <div slot="title"
                 :alt="item[pathKey]"
                 class="flexMenu">
              <span>{{generateTitle(child)}}</span>
              <el-switch v-if="switchStatus" v-model="child.status" @change="status(child)"></el-switch>
            </div>
          </el-menu-item>
          <sidebar-item v-else
                        :menu="[child]"
                        :key="cindex"
                        :props="props"
                        :screen="screen"
                        :collapse="collapse"></sidebar-item>
        </template>
      </el-submenu>
    </template>
  </div>
</template>
<script>
  import {mapGetters} from "vuex";
  import {validatenull} from "@/util/validate";
  import config from "@/page/index/sidebar/config.js";

  export default {
    name: "sidebarItem",
    inject:["recommend"],
    data() {
      return {
        config: config
      };
    },
    props: {
      menu: {
        type: Array
      },
      screen: {
        type: Number
      },
      first: {
        type: Boolean,
        default: false
      },
      props: {
        type: Object,
        default: () => {
          return {};
        }
      },
      collapse: {
        type: Boolean
      },
      switchStatus: {
        type: Boolean,
        default: false
      }
    },
    created() {
    },
    mounted() {
    },
    computed: {
      ...mapGetters(["roles"]),
      labelKey() {
        // return this.props.label || this.config.propsDefault.label;
        return 'menuName'
      },
      pathKey() {
        // return this.props.path || this.config.propsDefault.path;
        return 'menuPath'
      },
      iconKey() {
        return this.props.icon || this.config.propsDefault.icon;
      },
      childrenKey() {
        return this.props.children || this.config.propsDefault.children;
      },
      nowTagValue() {
        return this.$router.$avueRouter.getValue(this.$route);
      }
    },
    methods: {
      generateTitle(item) {
        return this.$router.$avueRouter.generateTitle(
          item[this.labelKey],
          (item.meta || {}).i18n
        );
      },
      vaildAvtive(item) {
        const groupFlag = (item["group"] || []).some(ele =>
          this.$route.path.includes(ele)
        );
        return this.nowTagValue === item[this.pathKey] || groupFlag;
      },
      vaildRoles(item) {
        item.meta = item.meta || {};
        return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
      },
      validatenull(val) {
        return validatenull(val);
      },
      open (item) {
        this.recommend.menuVal(item)
      },
      status (item) {
        this.recommend.menuVal(item, 'switch')
      }
    }
  };
</script>
<style>
  .flexMenu{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>

