// main.js
import Vue from 'vue';
// 引入 vue-router
import VueRouter from 'vue-router';
Vue.use(VueRouter); // 使用 vue-router

// 配置路由信息
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
  {
    path: "/", // 父路由路径
    component: App, // 父路由组件，传入 vue component
    name: "App", // 路由名称
    // 设置子路由
    children: [
      { 
        path: "login", // 子路由路径
        component: Login, // 子路由组件，会替换父组件中<router-view>中的内容
        name: "Login" // 路由名称
      },
      {
        // 应用首页
        path: "home", component: Home,  name: "Home",
        children: [
          // 服务列表
          { path: "service", component: Service, name: "Service" },
          // 产品容器
          { path: "product", component: Product, name: "Product",
            children: [ // 子路由内容
              // 产品列表
              { path: "list", component: ProductList, name: "ProductList" },
              // 产品新增
              { path: "add/0", component: ProductEdit, name: "ProductAdd" },
              // 产品编辑
              // 我们能看到，新增和编辑其实最终使用的是同一个组件，所以后面会有一些需要兼容处理的地方
              // :id可匹配任意值，且可在组件中通过this.$route.params.id获取该值
              { path: "edit/:id", component: ProductEdit, name: "ProductEdit" }
            ]
          }
        ]
      }
    ]
  }
];

// 加载路由信息
const router = new VueRouter({
  // mode: 路由模式，'hash' | 'history'
  // routes：传入路由配置信息，后面会讲怎么配置
  routes // （缩写）相当于 routes: routes
});
// 启动一个 Vue 应用
new Vue({
  el: "#app",
  router, // 传入路由能力
  render: h => h(App)
});

// routerName 为对应的路由的路由名称
const menus = [
  {
    text: "服务管理", icon: "el-icon-setting",
    subMenus: [{ text: "服务信息", routerName: 'Service' }]  
  },
  {
    text: "产品管理", icon: "el-icon-menu",
    subMenus: [
        { text: "产品信息", routerName: 'ProductList' }, 
        { text: "新增", routerName: 'ProductAdd' }
    ]
  },
  // 日志信息这里为空，则不会进行跳转
  { text: "日志信息", icon: "el-icon-message", routerName: '' }
].map((x, i) => {
  // 添加 index，可用于默认展开 default-openeds 属性，和激活状态 efault-active 属性的设置
  return {
    ...x,
    // 子菜单就拼接${父菜单index}-${子菜单index}
    subMenus: (x.subMenus || []).map((y, j) => {
      return { ...y, index: `${i}-${j}` };
    }),
    // 父菜单就把 index 加上好了
    index: `${i}`
  };
});

// 下面是 Vue 组件
export default {
  data() {
    return {
      menus, // menus: menus 的简写
      activeIndex: ''
    };
  },
  watch: {
    // 为了设置 el-menu 的 default-active 属性，需要获取到路由状态
    '$route' (to) {
      // 对路由变化作出响应...
      let activeIndex;
      // 找到匹配的 routerName
      this.menus.forEach(x => {
        if(x.routerName === to.name){
          activeIndex = x.index;
        }else{
          const subMenuItem = x.subMenus.find(y => y.routerName === to.name);
          if(subMenuItem){ activeIndex = subMenuItem.index; }
        }
      });
      // 并将 activeIndex 设置为对应的 菜单 index
      if(activeIndex){
        this.activeIndex = activeIndex;
      }
    }
  }
};

export default {
  // ...其他省略
  methods: {
    // 新增/修改一个数据
    updateTableItem(id = 0){
      // 跳转到编辑页面，新增则传id为0，否则为编辑
      // 可以通过 this.$router 访问路由实例
      if(id !== 0){
        // 传参 name 为路由名字，params 为我们定义的路由 path 的参数，变成 /edit/xxx
        // 还有另外一种传参方式 query，带查询参数，变成 /edit?id=xxx
        this.$router.push({name: 'ProductEdit', params: {id}})
      }else{
        this.$router.push({name: 'ProductAdd'})
      }
    },
  }
}

// globalData.js
// globalData 用来存全局数据
let globalData = {};

// 获取全局数据
// 传 key 获取对应的值
// 不传 key 获取全部值
export function getGlobalData(key){
    return key ? globalData[key] : globalData;
}

// 设置全局数据
export function setGlobalData(key, value){
    // 需要传键值对
    if(key === undefined || value === undefined){
        return;
    }
    globalData = {...globalData, [key]: value}
    return globalData;
}

// 清除全局数据
// 传 key 清除对应的值
// 不传 key 清除全部值
export function clearGlobalData(key){
    // 需要传键值对
    if(key === undefined){
        globalData = {};
    }else{
        delete globalData[key];
    }
    return globalData;
}

import {setGlobalData} from 'utils/globalData';

// 下面是 Vue 组件
export default {
  // ...其他省略
  methods: {
    // 提交新增/修改表单
    onSubmit(){
      // 校验表单，用户名和密码都必须填入
      // Element 表单校验规则配置，请查看https://element.eleme.cn/#/zh-CN/component/form
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 校验通过
          // 设置用户名
          setGlobalData('username', this.form.username);
          // 跳转到里页
          this.$router.push({name: "Home"});
        } else {
          // 校验失败
          return false;
        }
      });
    }
  }
};

// main.js
import { getGlobalData } from "utils/globalData";

router.beforeEach((to, from, next) => {
  if (to.name !== "Login") {
    // 非 login 页面，检查是否登录
    // 这里简单前端模拟是否填写了用户名，真实环境需要走后台登录，缓存到本地
    if (!getGlobalData("username")) {
      next({ name: "Login" });
    }
  }
  // 其他情况正常执行
  next();
});