<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu"
      >
        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <icon-svg name="shuju" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">数据中心</span>
        </el-menu-item>
        <!-- <el-menu-item index="userList" @click="$router.push({ name: 'userList' })">
			<icon-svg name="yonghu" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">用户中心</span>
		</el-menu-item> -->
        <!-- <el-menu-item index="financeList" @click="$router.push({ name: 'financeList' })">
			<icon-svg name="caiwu" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">财务中心</span>
		</el-menu-item> -->
        <el-menu-item
          index="merchIncome"
          @click="$router.push({ name: 'merchIncome' })"
        >
          <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">店铺管理</span>
        </el-menu-item>
        <el-menu-item
          index="missionSm"
          @click="$router.push({ name: 'missionSm' })"
        >
          <icon-svg name="xiaoxi" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">订单中心</span>
        </el-menu-item>
        <!-- <el-menu-item index="shopsListAdminSm" @click="$router.push({ name: 'shopsListAdminSm' })">
			<icon-svg name="shangpin" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">商品管理</span>
		</el-menu-item> -->
        <el-menu-item
          index="message"
          @click="$router.push({ name: 'message' })"
        >
          <icon-svg name="pinglun" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">消息中心</span>
        </el-menu-item>
        <el-menu-item
          index="vueMchat"
          @click="$router.push({ name: 'vueMchat' })"
        >
          <icon-svg name="yonghul" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">群聊天</span>
        </el-menu-item>
        <el-menu-item
          index="vueMchatKf"
          @click="$router.push({ name: 'vueMchatKf' })"
        >
          <icon-svg name="yonghul" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">客服聊天</span>
        </el-menu-item>
        <el-menu-item
          index="specification"
          @click="$router.push({ name: 'specification' })"
        >
          <icon-svg
            name="fenleilist"
            class="site-sidebar__menu-icon"
          ></icon-svg>
          <span slot="title">商品规格</span>
        </el-menu-item>
        <el-menu-item
          index="classifyAdmin"
          @click="$router.push({ name: 'classifyAdmin' })"
        >
          <icon-svg name="peizhilb" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">商品分类</span>
        </el-menu-item>
        <el-menu-item
          index="shopsListAdmin"
          @click="$router.push({ name: 'shopsListAdmin' })"
        >
          <icon-svg name="renwu" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">商品管理</span>
        </el-menu-item>

        <el-menu-item
          index="pingjiaList"
          @click="$router.push({ name: 'pingjiaList' })"
        >
          <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">店铺评价</span>
        </el-menu-item>
        <el-menu-item index="coupon" @click="$router.push({ name: 'coupon' })">
          <icon-svg name="leibie" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">店铺优惠券</span>
        </el-menu-item>
        <el-menu-item
          index="couponList"
          @click="$router.push({ name: 'couponList' })"
        >
          <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">优惠券领取列表</span>
        </el-menu-item>

        <el-menu-item
          index="activity"
          @click="$router.push({ name: 'activity' })"
        >
          <icon-svg name="shangpin" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">店铺活动</span>
        </el-menu-item>
        <el-menu-item
          index="huodongList"
          @click="$router.push({ name: 'huodongList' })"
        >
          <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">活动参与记录</span>
        </el-menu-item>
        <el-menu-item
          index="duanxinlist"
          @click="$router.push({ name: 'duanxinlist' })"
        >
          <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">短信记录</span>
        </el-menu-item>

        <el-menu-item
          index="printSet"
          @click="$router.push({ name: 'printSet' })"
        >
          <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">打印配置</span>
        </el-menu-item>
        <!-- <el-menu-item index="userList" @click="$router.push({ name: 'userList' })">
			<icon-svg name="yonghul" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">用户中心</span>
		</el-menu-item>
		<el-menu-item index="financeList" @click="$router.push({ name: 'financeList' })">
			<icon-svg name="caiwu" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">财务中心</span>
		</el-menu-item>
		<el-menu-item index="message" @click="$router.push({ name: 'message' })">
			<icon-svg name="xiaoxi" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">消息中心</span>
		</el-menu-item>
		<el-menu-item index="mission" @click="$router.push({ name: 'mission' })">
			<icon-svg name="renwu" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">任务中心</span>
		</el-menu-item>
		<el-menu-item index="taskConfig" @click="$router.push({ name: 'taskConfig' })">
			<icon-svg name="renwu" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">任务配置</span>
		</el-menu-item> -->
        <!-- <el-menu-item index="missionsye" @click="$router.push({ name: 'missionsye' })">
			<icon-svg name="pingtai" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">系统任务</span>
		</el-menu-item> -->
        <!-- <el-menu-item index="materialsList" @click="$router.push({ name: 'materialsList' })">
			<icon-svg name="xinxi" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">好物圈</span>
		</el-menu-item> -->
        <!-- <el-menu-item index="bannerList" @click="$router.push({ name: 'bannerList' })">
			<icon-svg name="shangpin" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">商城配置</span>
		</el-menu-item>
		<el-menu-item index="allocationList" @click="$router.push({ name: 'allocationList' })">
			<icon-svg name="system" class="site-sidebar__menu-icon"></icon-svg>
			<span slot="title">系统配置</span>
		</el-menu-item> -->
        <!-- <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu> -->
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from "./main-sidebar-sub-menu";
import { isURL } from "@/utils/validate";
export default {
  data() {
    return {
      dynamicMenuRoutes: []
    };
  },
  components: {
    SubMenu
  },
  computed: {
    sidebarLayoutSkin: {
      get() {
        return this.$store.state.common.sidebarLayoutSkin;
      }
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      }
    },
    menuList: {
      get() {
        return this.$store.state.common.menuList;
      },
      set(val) {
        this.$store.commit("common/updateMenuList", val);
      }
    },
    menuActiveName: {
      get() {
        return this.$store.state.common.menuActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMenuActiveName", val);
      }
    },
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      }
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.common.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMainTabsActiveName", val);
      }
    }
  },
  watch: {
    $route: "routeHandle"
  },
  created() {
    this.menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]");
    this.dynamicMenuRoutes = JSON.parse(
      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
    );
    this.routeHandle(this.$route);
  },
  methods: {
    // 路由操作
    routeHandle(route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter(item => item.name === route.name)[0];
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(
              item => item.name === route.name
            )[0];
            if (!route) {
              return console.error("未能找到可用标签页!");
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? "iframe" : "module",
            iframeUrl: route.meta.iframeUrl || "",
            params: route.params,
            query: route.query
          };
          this.mainTabs = this.mainTabs.concat(tab);
        }
        this.menuActiveName = tab.menuId + "";
        this.mainTabsActiveName = tab.name;
      }
    }
  }
};
</script>
