<template>
  <div class="menu-wrapper">
    <template v-for="item in routes" v-if="!item.hidden && item.children">
      <router-link
        v-if="
          hasOneShowingChildren(item.children) &&
            !item.children[0].children &&
            !item.alwaysShow
        "
        :to="item.path + '/' + item.children[0].path"
        :key="item.children[0].name"
      >
        <el-menu-item
          :index="item.path + '/' + item.children[0].path"
          :class="{ 'submenu-title-noDropdown': !isNest }"
        >
          <svg-icon
            v-if="item.children[0].meta && item.children[0].meta.icon"
            :icon-class="item.children[0].meta.icon"
          ></svg-icon>
          <span
            v-if="item.children[0].meta && item.children[0].meta.title"
            slot="title"
            >{{ item.children[0].meta.title }}
            <el-badge
              v-if="
                item.children[0].meta &&
                  item.children[0].meta.title == '课程大纲更新' &&
                  $store.getters.outlineListUnconfirm > 0
              "
              slot="title"
              :value="$store.getters.outlineListUnconfirm"
            ></el-badge>
          </span>
        </el-menu-item>
      </router-link>

      <el-submenu v-else :index="item.name || item.path" :key="item.name">
        <template slot="title">
          <svg-icon
            v-if="item.meta && item.meta.icon"
            :icon-class="item.meta.icon"
          ></svg-icon>
          <span v-if="item.meta && item.meta.title" slot="title">{{
            item.meta.title
          }}</span>
        </template>

        <template v-for="child in item.children" v-if="!child.hidden">
          <sidebar-item
            :is-nest="true"
            class="nest-menu"
            v-if="child.children && child.children.length > 0"
            :routes="[child]"
            :key="child.path"
          ></sidebar-item>

          <router-link
            v-else
            :to="item.path + '/' + child.path"
            :key="child.name"
          >
            <el-menu-item :index="item.path + '/' + child.path">
              <svg-icon
                v-if="child.meta && child.meta.icon"
                :icon-class="child.meta.icon"
              ></svg-icon>

              <span v-if="child.meta && child.meta.title" slot="title">{{
                child.meta.title
              }}</span>

              <!-- <el-badge
                v-if="
                  child.meta &&
                    child.meta.title == '新分配学员' &&
                    $store.getters.newAllocateNum > 0 &&
                    $store.getters.roles.includes('学服部主管')
                "
                slot="title"
                :value="$store.getters.newAllocateNum"
              >
              </el-badge> -->
              <el-badge
                v-if="
                  child.meta &&
                    child.meta.title == '待分配学员' &&
                    $store.getters.kfSelectUnBind > 0 &&
                    $store.getters.roles.includes('客服部主管')
                "
                slot="title"
                :value="$store.getters.kfSelectUnBind"
              >
              </el-badge>

              <el-badge
                v-if="
                  child.meta &&
                    child.meta.title == '待分配学员' &&
                    $store.getters.xfSelectUnBind > 0 &&
                    $store.getters.roles.includes('学服部主管')
                "
                slot="title"
                :value="$store.getters.xfSelectUnBind"
              >
              </el-badge>

              <el-badge
                v-if="
                  child.meta &&
                    child.meta.title == '合作院校课管' &&
                    $store.getters.cooperateSchoolAll > 0
                "
                slot="title"
                :value="$store.getters.cooperateSchoolAll"
              >
              </el-badge>

              <el-badge
                v-if="
                  child.meta &&
                    child.meta.title == '招生院校课管' &&
                    $store.getters.recruitSchoolAll > 0
                "
                slot="title"
                :value="$store.getters.recruitSchoolAll"
              >
              </el-badge>
            </el-menu-item>
          </router-link>
        </template>
      </el-submenu>
    </template>
  </div>
</template>

<script>
import {
  todayTask,
  kfSelectUnBind,
  xfSelectUnBind,
  outlineList
} from "@/api/cso";
import { cooperateSchoolAll, recruitSchoolAll } from "@/api/cso2";
export default {
  name: "SidebarItem",
  props: {
    routes: {
      type: Array
    },
    isNest: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    hasOneShowingChildren(children) {
      const showingChildren = children.filter(item => {
        return !item.hidden;
      });
      if (showingChildren.length === 1) {
        return true;
      }
      return false;
    },
    getData() {
      todayTask().then(res => {
        this.$store.commit("set_newAllocateNum", res.data.newAllocateNum);
      });
      kfSelectUnBind({
        pageNum: 1,
        pageSize: 10
      }).then(res => {
        this.$store.commit("set_kfSelectUnBind", res.data.total);
      });
      xfSelectUnBind({
        pageNum: 1,
        pageSize: 10
      }).then(res => {
        this.$store.commit("set_xfSelectUnBind", res.data.total);
      });
      cooperateSchoolAll({
        pageNum: 1,
        pageSize: 10,
        isMatch: 1
      }).then(res => {
        this.$store.commit("set_cooperateSchoolAll", res.data.total);
        // console.log(res.data.total, "vuex");
      });
      recruitSchoolAll({
        pageNum: 1,
        pageSize: 10,
        isMatch: 1
      }).then(res => {
        this.$store.commit("set_recruitSchoolAll", res.data.total);
        // console.log(res.data.total, "vuex");
      });
      outlineList({
        pageNum: 1,
        pageSize: 10,
        outlineState: 2
      }).then(res => {
        this.$store.commit("set_outlineListUnconfirm", res.data.total);
        // console.log(this.$store.getters.outlineListUnconfirm, "vuex");
      });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.badge {
  background-color: #f56c6c;
  border-radius: 50%;
  font-size: 8px;
  // padding: 5px;
}
.item {
  margin-top: 10px;
  // margin-right: 40px;
}
</style>
