<template lang="pug">
el-container.main
  el-aside.aside
    .aside-top
      el-avatar(:src="avatar", :size="48") {{ role }}
      div
        p {{ name }}
        span 考勤月度报表
    el-menu(:default-active="$route.path", router, unique-opened, :collapse="collapse")
      el-submenu(v-for="menu of menus", :index="menu.path", :key="menu.path")
        section(slot="title")
          i(:class="menu.icon")
          span {{ menu.title }}
        el-menu-item(v-for="subMenu of menu.children", :index="subMenu.path", :key="subMenu.path", :route="subMenu.path")
          i(:class="subMenu.icon")
          span(slot="title") {{ subMenu.title }}
  el-container.view
    //- el-header
      p.view-title OPay假勤管理
    el-main
      router-view
</template>

<script>
import menuRouter from "opay/router";
import { mapState } from "vuex";
import ding from "@/vendor/dingApi";
import { authCode } from "../service/api"
import progress from "@/service/progress"

// arr to obj, such as { CN : "China", US : "USA" }
const menus = [];
menuRouter[0].children.reduce((acc, cur) => {
  const path = `${menuRouter[0].path}/${cur.path}`;
  // 由路由表初始化侧边栏
  const menu = {
    path: path,
    icon: cur.meta.icon,
    title: cur.meta.title,
    children: []
  };
  if (cur.meta.menu) {
    const subMenu = Object.assign({}, menu);
    delete subMenu.icon;
    menu.children.push(subMenu);
    menu.title = cur.meta.menu;
    menus.push(menu);
  } else {
    delete menu.children;
    menus[menus.length - 1].children.push(menu);
  }
  return acc;
}, {});

export default {
  name: "admin-layout",
  components: {},
  data () {
    return {
      menus,
      collapse: false
    };
  },
  filters: {},
  computed: {
    ...mapState({
      avatar: state =>
        state.user.avatar || require("opay/assets/logo/logo.png"),
      name: state => state.user.name || "丰凯利",
      role: state => state.user.desc || "假勤管理"
    })
  },
  watch: {},
  created () {
    this.loginAuth()
  },
  mounted () { },
  methods: {
    // 钉钉免登 [H5无需配置, 但宜搭内需要配置鉴权, 才能获取到code]
    loginAuth () {
      if (ding.dd.env.platform == "notInDingTalk") {
        progress.dialogConfirm("操作提示", "请在钉钉工作台打开!")
        return
      }
      ding.dd.runtime.permission.requestAuthCode({
        corpId: "dingade22a8c4fd34b8535c2f4657eb6378f", // 企业id
        onSuccess: async info => {
          const rsp = await authCode(info.code);
          this.$store.dispatch("user/updateUser", rsp.data)
        },
        onFail (err) {
          console.log("onFail", err)
        }

      });
    }
  }
};
</script>

<style scoped lang="stylus">
@import '~extend'
// reset
.main, .aside
  height: 100%
// aside menu
.aside
  width: 11% !important
  padding-bottom: 30px
  &-top
    padding: 30px 0
    color: $-color-menu
    padding-right: 10px
    display: flex
    align-items: center
    justify-content: center
    div
      padding-left: 15px
      span
        font-size: 12px
        color: #fff
      p
        font-size: 14px
        color: #fff
.view
  padding-left: 1px
  position: relative
  &-title
    text-align: center
    color: #fff
    line-height: 3
    font-size: 20px
    letter-spacing: 1px
  >>> .el-main
    padding: 10px
</style>
