<template>
  <el-aside>
    <div class="sidebar">
      <div class="side-logo">
        <img @click="$router.push({path:'/'})" src="../../static/image/logo.png" class="logo" />
      </div>
      <el-menu class="sidebar-el-menu" :default-active="$route.path" :collapse="collapse" background-color="#00152A" text-color="#FFFFFF" active-text-color="#FC7200" router>
        <template v-for="item in items">
          <template v-if="item.children">
            <el-submenu :index="item.path" :key="item.path">
              <template slot="title">
                <img v-if="item.icon" class="side-bar-icon" :src="item.icon" />
                <span slot="title">{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.children">
                <el-submenu v-if="subItem.children" :index="subItem.path" :key="subItem.path">
                  <template slot="title">{{ subItem.title }}</template>
                  <el-menu-item v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.path">
                    {{ threeItem.title }}</el-menu-item>
                </el-submenu>
                <el-menu-item v-show="['pictureManagement'].includes(subItem.name) ? memberType === 1 ? false : true : true" v-else :index="subItem.path" :key="subItem.path">{{ subItem.title }}</el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="item.path" :key="item.path">
              <img :src="item.icon" class="side-bar-icon" v-if="item.icon" />
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
  </el-aside>
</template>

<script>
import bus from "../common/bus";
import router from "../router/index.js";
export default {
  data() {
    return {
      collapse: false,
      memberType: this.$store.state.userInfo.memberType,
      items: [
        {
          path: "/",
          title: "一键发单",
          icon: require("../../static/image/order-icon.png"),
          children: [
            {
              path: "/",
              name: "HomeIndex",
              title: "订单列表",
            },
            {
              path: "/orderSearch",
              name: "orderSearch",
              title: "订单查询",
            },
            {
              path: "/manualCreate",
              name: "manualCreate",
              title: "手动发单",
            },
          ],
        },
        {
          path: "/shopInfo",
          title: "商户信息",
          icon: require("../../static/image/shop-icon.png"),
          children: [
            {
              path: "/shop/shopList",
              name: "shopList",
              title: "我的店铺",
            },
            {
              path: "/platformAccount/index",
              name: "platformAccount",
              title: "账号管理",
            },
          ],
        },
        {
          path: "/account",
          title: "我的账户",
          icon: require("../../static/image/account-icon.png"),
          children: [
            {
              path: "/account/wallet",
              name: "wallet",
              title: "我的钱包",
            },
            {
              path: "/account/walletDetail",
              name: "walletDetail",
              title: "收支明细",
            },
            {
              path: "/account/coupon",
              name: "coupon",
              title: "优惠券",
            },
          ],
        },
        {
          path: "/platform",
          title: "平台管理",
          icon: require("../../static/image/platform-icon.png"),
          children: [
            {
              path: "/platform/bindTakeOut",
              name: "bindTakeOut",
              title: "绑定外卖平台",
            },
            {
              path: "/platform/bindDelivery",
              name: "bindDelivery",
              title: "绑定配送平台",
            },
          ],
        },
        {
          path: "/set",
          title: "设置中心",
          icon: require("../../static/image/setting-icon.png"),
          children: [
            {
              path: "/set/waimai",
              name: "waimai",
              title: "外卖设置",
            },
            {
              path: "/set/print",
              name: "print",
              title: "打印设置",
            },
            // {
            //   path: "/set/system",
            //   name: "system",
            //   title: "系统设置",
            // }
          ],
        },
        {
          path: "/help",
          title: "帮助中心",
          icon: require("../../static/image/help-icon.png"),
          children: [
            {
              path: "/help/commonProblem",
              name: "commonProblem",
              title: "常见问题",
            },
            {
              path: "/help/customerService",
              name: "customerService",
              title: "客服中心",
            },
            {
              path: "/help/download",
              name: "download",
              title: "下载中心",
            },
            {
              path: "/help/feedback",
              name: "feedback",
              title: "意见反馈",
            },
            {
              path: "/help/about",
              name: "about",
              title: "关于我们",
            },
          ],
        },
      ],
    };
  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.memberType = newVal.memberType;
      },
      deep: true,
    },
  },
  created() {
    // console.log(router.options.routes);
    //this.items = [...router.options.routes];
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on("collapse", (msg) => {
      this.collapse = msg;
      bus.$emit("collapse-content", msg);
    });
  },
  methods: {
    showTitle(name) {
      if (name === "c") {
        if (this.memberType === 1) {
          return false;
        }
      }
      return true;
    },
  },
};
</script>

<style lang='scss' scoped='scoped'>
/deep/ .el-submenu .el-menu-item {
  padding-left: 76px !important;
}
/deep/ .el-menu-item.is-active {
  background-color: #0c2b47 !important;
  border-right: 4px solid #fc7200;
}
/deep/ .el-submenu .el-submenu__title {
  font-size: 15px !important;
}
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  padding-top: 80px;
}
.side-logo {
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  padding-top: 18px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #fff;
  font-size: 0;
  padding-left: 32px;
  cursor: pointer;
}
.logo {
  width: 204px;
  height: 44px;
}
.side-bar-icon {
  width: 21px;
  height: 21px;
  margin-right: 18px;
  margin-left: 14px;
}
.aliFamily {
  font-size: 24px;
  margin-right: 10px;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 254px;
  box-sizing: border-box;
}

.sidebar > ul {
  height: 100%;
  overflow-y: auto;
}
</style>
