<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>
      <!-- <div class="appList">
        <div class="typeTitle">OA</div>
        <div style="display: flex;flex-wrap: wrap;margin-bottom: 20px;">
          <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
            <svg-icon :icon-class="item.meta.icon"/>
            {{ item.meta.title }}
          </div>
        </div>
      </div>
      <div class="appList">
        <div class="typeTitle">人事管理</div>
        <div style="display: flex;flex-wrap: wrap;margin-bottom: 20px;">
          <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
            <svg-icon :icon-class="item.meta.icon"/>
            {{ item.meta.title }}
          </div>
        </div>
      </div>
      <div class="appList">
        <div class="typeTitle">财务</div>
        <div style="display: flex;flex-wrap: wrap;margin-bottom: 20px;">
          <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
            <svg-icon :icon-class="item.meta.icon"/>
            {{ item.meta.title }}
          </div>
        </div>
      </div>
      <div class="appList">
        <div class="typeTitle">CRM</div>
        <div style="display: flex;flex-wrap: wrap;margin-bottom: 20px;">
          <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
            <svg-icon :icon-class="item.meta.icon"/>
            {{ item.meta.title }}
          </div>
        </div>
      </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">
              <!-- <el-popconfirm
                title="确定删除吗？">
                <i slot="reference" class="el-icon-delete-solid" @click="removeApp(index)"></i>
              </el-popconfirm> -->
              <i slot="reference" class="el-icon-s-tools" @click.stop="editApp(childItem)"></i>
              <!-- <el-popover
                placement="bottom"
                width="200"
                trigger="click"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                <i slot="reference" class="el-icon-delete-solid"></i>
              </el-popover> -->

              
            </div>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="OA" name="first">
          <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
            <svg-icon :icon-class="item.meta.icon"/>
            {{ item.meta.title }}
          </div>
        </el-tab-pane>
        <el-tab-pane label="人事" name="second">
          <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
            <svg-icon :icon-class="item.meta.icon"/>
            {{ item.meta.title }}
          </div>
        </el-tab-pane>
        <el-tab-pane label="财务" name="third">
          <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
            <svg-icon :icon-class="item.meta.icon"/>
            {{ item.meta.title }}
          </div>
        </el-tab-pane>
        <el-tab-pane label="CRM" name="fourth">
          <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
            <svg-icon :icon-class="item.meta.icon"/>
            {{ item.meta.title }}
          </div>
        </el-tab-pane> -->
      </el-tabs>
    </el-card>
    </el-col>
  </el-row>
</template>

<script>

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: '/system/user',
              title: '请假',
              icon: 'qingjia',
            },
            {
              type:2,
              path: '/',
              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;
    },
  },
  methods: {
    childMethod() {
        this.$parent.openAppList();
    },
    //编辑应用
    editApp(item){
      this.$parent.editApp(item);
    },
    // 菜单选择事件
    handleSelect(item) {
      let key = item.path;
      if (this.ishttp(key)) {
        // http(s):// 路径新窗口打开
        window.open(key, "_blank");
      }else{
        //路径内部打开
        this.$router.push({ path: key });
      }
    },
    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>
