<template>
  <el-row>
    <el-col :span="24">
      <el-card class="el-card-auto" style="min-height:350px">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px;">我的应用</span>
          <!-- <el-button style="font-size: 20px;float: right; padding: 3px 0" type="text"
            @click="childMethod()">新建应用</el-button> -->
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="item, index in appList" :label="item.name" :name="item.type" :key="index">
            <div class="app-item" v-for="(childItem, index) in item.list" :key="index" @click="handleSelect(childItem)"
              @mouseover="showContent = index" @mouseleave="showContent = null">
              <svg-icon :icon-class="childItem.icon" style="width: 40px;height: 40px" />
              {{ childItem.title }}
              <div v-if="showContent == index" class="app-item-tools">
                <!-- <i slot="reference" class="el-icon-s-tools" @click.stop="editApp(childItem)"></i> -->
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { constantRoutes } from "@/router";
import router from '@/router'
import store from '@/store'
import { set } from "nprogress";
export default {
  data() {
    return {
      activeName: 'first',
      showContent: null,
      appList: [
        {
          name: 'OA',
          type: 'first',
          list: [
            {
              type: 1,
              path: 'https://www.baidu.com/',
              title: '自定义应用',
              icon: 'zidingyi',
            },
            {
              type: 2,
              path: '/oa/entry',
              title: '入职审批',
              icon: 'qingjia',
            },
            {
              type: 2,
              path: '/task/my',
              title: '出差',
              icon: 'chuchai',
            },
            {
              type: 2,
              path: '/system/menu',
              title: '系统管理',
              icon: 'chuchai',
            },
          ],
        },
        {
          name: '人事',
          type: 'second',
          list: [],

        },
        {
          name: '财务',
          type: 'third',
          list: [],

        },
        {
          name: 'CRM',
          type: 'fourth',
          list: [],

        },
      ]
    };
  },
  computed: {
    // 顶部显示菜单
    topMenus() {
      let topMenus = [];
      this.routers.map((menu) => {
        if (menu.hidden !== true) {
          // 兼容顶部栏一级菜单内部跳转
          if (menu.path === "/") {
            topMenus.push(menu.children[0]);
          } else {
            topMenus.push(menu);
          }
        }
      });
      return topMenus;
    },
    // 所有的路由信息
    routers() {
      return this.$store.state.permission.topbarRouters;
    },
    // 设置子路由
    childrenMenus() {
      const childrenMenus = [];
      this.routers.map((router) => {
        for (let item in router.children) {
          if (router.children[item].parentPath === undefined) {
            if (router.path === "/") {
              router.children[item].path = "/" + router.children[item].path;
            } else {
              if (!this.ishttp(router.children[item].path)) {
                router.children[item].path = router.path + "/" + router.children[item].path;
              }
            }
            router.children[item].parentPath = router.path;
          }
          childrenMenus.push(router.children[item]);
        }
      });
      return constantRoutes.concat(childrenMenus);
    },
  },
  methods: {
    // 当前激活的路由
    activeRoutes(key) {
      debugger
      const routes = []
      if (this.childrenMenus && this.childrenMenus.length > 0) {
        this.childrenMenus.map((item) => {
          if (key === item.parentPath || (key === "index" && "" === item.path)) {
            routes.push(item);
          }
        });
      }
      if (routes.length > 0) {
        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
      }
      this.$router.push({ path: key });
    },
    childMethod() {
      this.$parent.openAppList();
    },
    //编辑应用
    editApp(item) {
      this.$parent.editApp(item);
    },
    // 菜单选择事件
    handleSelect(item) {
      let key = item.path;
      const menus = [
        // {
        //   "id": 1,
        //   "parentId": 0,
        //   "name": "任务管理",
        //   "path": "/task",
        //   "component": null,
        //   "componentName": null,
        //   "icon": "cascader",
        //   "visible": true,
        //   "keepAlive": true,
        //   "alwaysShow": true,
        //   "children": [
        //     {
        //       "id": 1201,
        //       "parentId": 1200,
        //       "name": "我的流程",
        //       "path": "my",
        //       "component": "bpm/processInstance/index",
        //       "componentName": "BpmProcessInstance",
        //       "icon": "people",
        //       "visible": true,
        //       "keepAlive": true,
        //       "alwaysShow": true,
        //       "children": null
        //     },
        //     {
        //       "id": 1207,
        //       "parentId": 1200,
        //       "name": "待办任务",
        //       "path": "todo",
        //       "component": "bpm/task/todo/index",
        //       "componentName": "BpmTodoTask",
        //       "icon": "eye-open",
        //       "visible": true,
        //       "keepAlive": true,
        //       "alwaysShow": true,
        //       "children": null
        //     },
        //     {
        //       "id": 1208,
        //       "parentId": 1200,
        //       "name": "已办任务",
        //       "path": "done",
        //       "component": "bpm/task/done/index",
        //       "componentName": "BpmDoneTask",
        //       "icon": "eye",
        //       "visible": true,
        //       "keepAlive": true,
        //       "alwaysShow": true,
        //       "children": null
        //     }
        //   ]
        // },
        // {
        //   "id": 1224,
        //   "parentId": 0,
        //   "name": "租户管理",
        //   "path": "/tenant",
        //   "component": null,
        //   "componentName": null,
        //   "icon": "peoples",
        //   "visible": true,
        //   "keepAlive": true,
        //   "alwaysShow": true,
        //   "children": [
        //     {
        //       "id": 1138,
        //       "parentId": 1224,
        //       "name": "租户列表",
        //       "path": "list",
        //       "component": "system/tenant/index",
        //       "componentName": "SystemTenant",
        //       "icon": "peoples",
        //       "visible": true,
        //       "keepAlive": true,
        //       "alwaysShow": true,
        //       "children": null
        //     },
        //     {
        //       "id": 1225,
        //       "parentId": 1224,
        //       "name": "租户套餐",
        //       "path": "package",
        //       "component": "system/tenantPackage/index",
        //       "componentName": "SystemTenantPackage",
        //       "icon": "eye",
        //       "visible": true,
        //       "keepAlive": true,
        //       "alwaysShow": true,
        //       "children": null
        //     }
        //   ]
        // },
        {
          "id": 1,
          "parentId": 0,
          "name": "系统管理",
          "path": "/system",
          "component": null,
          "componentName": null,
          "icon": "system",
          "visible": true,
          "keepAlive": true,
          "alwaysShow": true,
          "children": [
            {
              "id": 1224,
              "parentId": 1,
              "name": "租户管理",
              "path": "tenant",
              "component": null,
              "componentName": null,
              "icon": "peoples",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": [
                {
                  "id": 1138,
                  "parentId": 1224,
                  "name": "租户列表",
                  "path": "list",
                  "component": "system/tenant/index",
                  "componentName": "SystemTenant",
                  "icon": "peoples",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                },
                {
                  "id": 1225,
                  "parentId": 1224,
                  "name": "租户套餐",
                  "path": "package",
                  "component": "system/tenantPackage/index",
                  "componentName": "SystemTenantPackage",
                  "icon": "eye",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                }
              ]
            },
            {
              "id": 100,
              "parentId": 1,
              "name": "用户管理",
              "path": "user",
              "component": "system/user/index",
              "componentName": "SystemUser",
              "icon": "user",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            {
              "id": 101,
              "parentId": 1,
              "name": "角色管理",
              "path": "role",
              "component": "system/role/index",
              "componentName": "SystemRole",
              "icon": "peoples",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            {
              "id": 102,
              "parentId": 1,
              "name": "菜单管理",
              "path": "menu",
              "component": "system/menu/index",
              "componentName": "SystemMenu",
              "icon": "tree-table",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            {
              "id": 103,
              "parentId": 1,
              "name": "部门管理",
              "path": "dept",
              "component": "system/dept/index",
              "componentName": "SystemDept",
              "icon": "tree",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            {
              "id": 104,
              "parentId": 1,
              "name": "岗位管理",
              "path": "post",
              "component": "system/post/index",
              "componentName": "SystemPost",
              "icon": "post",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            {
              "id": 105,
              "parentId": 1,
              "name": "字典管理",
              "path": "dict",
              "component": "system/dict/index",
              "componentName": "SystemDictType",
              "icon": "dict",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            {
              "id": 107,
              "parentId": 1,
              "name": "通知公告",
              "path": "notice",
              "component": "system/notice/index",
              "componentName": "SystemNotice",
              "icon": "message",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            {
              "id": 108,
              "parentId": 1,
              "name": "审计日志",
              "path": "log",
              "component": "",
              "componentName": null,
              "icon": "log",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": [
                {
                  "id": 500,
                  "parentId": 108,
                  "name": "操作日志",
                  "path": "operate-log",
                  "component": "system/operatelog/index",
                  "componentName": "SystemOperateLog",
                  "icon": "form",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                },
                {
                  "id": 501,
                  "parentId": 108,
                  "name": "登录日志",
                  "path": "login-log",
                  "component": "system/loginlog/index",
                  "componentName": "SystemLoginLog",
                  "icon": "logininfor",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                }
              ]
            },
            {
              "id": 1261,
              "parentId": 1,
              "name": "OAuth 2.0",
              "path": "oauth2",
              "component": null,
              "componentName": null,
              "icon": "people",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": [
                {
                  "id": 1263,
                  "parentId": 1261,
                  "name": "应用管理",
                  "path": "oauth2/application",
                  "component": "system/oauth2/client/index",
                  "componentName": "SystemOAuth2Client",
                  "icon": "tool",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                },
                {
                  "id": 109,
                  "parentId": 1261,
                  "name": "令牌管理",
                  "path": "token",
                  "component": "system/oauth2/token/index",
                  "componentName": "SystemTokenClient",
                  "icon": "online",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                }
              ]
            },
            {
              "id": 2447,
              "parentId": 1,
              "name": "三方登录",
              "path": "social",
              "component": "",
              "componentName": "",
              "icon": "fa:500px",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": [
                {
                  "id": 2448,
                  "parentId": 2447,
                  "name": "三方应用",
                  "path": "client",
                  "component": "views/system/social/client/index.vue",
                  "componentName": "SocialClient",
                  "icon": "ep:set-up",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                },
                {
                  "id": 2453,
                  "parentId": 2447,
                  "name": "三方用户",
                  "path": "user",
                  "component": "system/social/user/index.vue",
                  "componentName": "SocialUser",
                  "icon": "ep:avatar",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                }
              ]
            },
            {
              "id": 1093,
              "parentId": 1,
              "name": "短信管理",
              "path": "sms",
              "component": null,
              "componentName": null,
              "icon": "validCode",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": [
                {
                  "id": 1094,
                  "parentId": 1093,
                  "name": "短信渠道",
                  "path": "sms-channel",
                  "component": "system/sms/channel/index",
                  "componentName": "SystemSmsChannel",
                  "icon": "phone",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                },
                {
                  "id": 1100,
                  "parentId": 1093,
                  "name": "短信模板",
                  "path": "sms-template",
                  "component": "system/sms/template/index",
                  "componentName": "SystemSmsTemplate",
                  "icon": "phone",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                },
                {
                  "id": 1107,
                  "parentId": 1093,
                  "name": "短信日志",
                  "path": "sms-log",
                  "component": "system/sms/log/index",
                  "componentName": "SystemSmsLog",
                  "icon": "phone",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                }
              ]
            },
            {
              "id": 2130,
              "parentId": 1,
              "name": "邮箱管理",
              "path": "mail",
              "component": null,
              "componentName": null,
              "icon": "email",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": [
                {
                  "id": 2131,
                  "parentId": 2130,
                  "name": "邮箱账号",
                  "path": "mail-account",
                  "component": "system/mail/account/index",
                  "componentName": "SystemMailAccount",
                  "icon": "user",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                },
                {
                  "id": 2136,
                  "parentId": 2130,
                  "name": "邮件模版",
                  "path": "mail-template",
                  "component": "system/mail/template/index",
                  "componentName": "SystemMailTemplate",
                  "icon": "education",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                },
                {
                  "id": 2141,
                  "parentId": 2130,
                  "name": "邮件记录",
                  "path": "mail-log",
                  "component": "system/mail/log/index",
                  "componentName": "SystemMailLog",
                  "icon": "log",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                }
              ]
            },
            {
              "id": 2144,
              "parentId": 1,
              "name": "站内信管理",
              "path": "notify",
              "component": null,
              "componentName": null,
              "icon": "message",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": [
                {
                  "id": 2145,
                  "parentId": 2144,
                  "name": "模板管理",
                  "path": "notify-template",
                  "component": "system/notify/template/index",
                  "componentName": "SystemNotifyTemplate",
                  "icon": "education",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                },
                {
                  "id": 2151,
                  "parentId": 2144,
                  "name": "消息记录",
                  "path": "notify-message",
                  "component": "system/notify/message/index",
                  "componentName": "SystemNotifyMessage",
                  "icon": "edit",
                  "visible": true,
                  "keepAlive": true,
                  "alwaysShow": true,
                  "children": null
                }
              ]
            },
            {
              "id": 1110,
              "parentId": 1,
              "name": "错误码管理",
              "path": "error-code",
              "component": "system/errorCode/index",
              "componentName": "SystemErrorCode",
              "icon": "code",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            {
              "id": 1247,
              "parentId": 1,
              "name": "敏感词管理",
              "path": "sensitive-word",
              "component": "system/sensitiveWord/index",
              "componentName": "SystemSensitiveWord",
              "icon": "education",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            {
              "id": 2083,
              "parentId": 1,
              "name": "地区管理",
              "path": "area",
              "component": "system/area/index",
              "componentName": "SystemArea",
              "icon": "row",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            }
          ]
        }
      ]
      localStorage.setItem("menus", JSON.stringify(menus))
      if (this.ishttp(key)) {
        // http(s):// 路径新窗口打开
        window.open(key, "_blank");
      } else {
        store.dispatch('GenerateRoutes', menus).then(accessRoutes => {
          console.log(accessRoutes);
          // 根据 roles 权限生成可访问的路由表
          router.addRoutes(accessRoutes) // 动态添加可访问路由表
        })
        setTimeout(() => {
          this.$router.push({ path: key });
        }, 200);
      }

    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    ishttp(url) {
      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
    }
  },
};
</script>
<style>
/*去掉切换时el-tab-pane底部的蓝色下划线*/
/* .el-tabs__active-bar {
    background-color: transparent !important;
  } */

/*去掉tabs底部的下划线*/
.el-tabs__nav-wrap::after {
  position: static !important;
}

.el-tabs__nav-wrap {
  padding: 0 30px !important;
}
</style>
<style lang="scss">
.el-icon-s-tools:hover {
  color: #00B899;
}

.typeTitle {
  font-size: 20px;
  font-weight: 400;
  color: #1f2f3d;
  margin-left: 10px;
  margin-bottom: 10px;
}

.el-card-auto {
  min-height: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.el-card-auto>>>.el-card__body {
  height: 100%;
}

.el-tabs__item {
  font-size: 18px;
  font-weight: 500;
}

.app-item {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  float: left;
  width: 178px;
  height: 150px;
  color: #999093;
  margin: 10px 10px 10px 10px;
  border-radius: 5px;
}

.app-item {
  line-height: 50px;
  font-size: 18px;
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
  white-space: nowrap;
}

.app-item-tools {
  color: #838892;
  cursor: pointer;
  font-size: 16px;
  line-height: 16px;
  position: absolute;
  right: 10px;
  top: 10px;
}

.app-item:hover,
.app-item:focus {
  outline: none;
  background-color: #FFFFFF;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
