<template>
  <div class="container">
    <div class="myHeader">
      <myHeader></myHeader>
    </div>
    <div v-if="$route.meta.title && $route.meta.title == '首页'">
      <router-view />
    </div>
    <div class="body-container" v-else>
      <div class="tree-menu">
        <!-- <router-link tag="div" :to="{ path: item.path }" v-for="(item, index) in myRouter" :key="index"
          active-class="routerActive">
          <div class="mydiv">
            <div class="view-child" @click="$store.commit('SET_ROUTWESHOWFALS')">
              <img :src="item.icon" alt="" class="router-icon" />
              {{ item.meta.title }}
            </div>
          </div>
        </router-link> -->


        <el-menu class="el-menu-vertical-demo" :router="true" :default-active="activeMenu" >
          <div v-for="(item, index) in myRouter" :key="item.path">
            <el-submenu :index="item.path" v-if="item.children">
              <template slot="title" v-show="item.meta.title != '详情'">
                <img :src="item.icon" alt="" class="router-icon" />
                <span>{{ item.meta.title }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="itemb.path" v-for="(itemb, indexb) in item.children">{{
      itemb.meta.title }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item :index="item.path" v-else v-show="item.meta.title != '详情'">
              <img :src="item.icon" alt="" class="router-icon" />
              <span slot="title">{{ item.meta.title }}</span>
            </el-menu-item>
          </div>
        </el-menu>

      </div>
      <div class="view-box">

        <tags-view ref="tagsView" />
        <div class="view_box_title" v-show="$router.currentRoute.meta.title != '详情'">{{
      $router.currentRoute.meta.topTitle ||
      $router.currentRoute.meta.title }}</div>
        <div class="child-views">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
          <div class="view_box_title-bottom"
            v-show="$router.currentRoute.meta.titlefootChilder.length != 0 && $router.currentRoute.meta.title != '详情'">
            <div class="view_box_title-bottom-sanjiao" @click="handleClick">
              <i class="el-icon-caret-top icon" v-show="!vShow"></i>
              <i class="el-icon-caret-bottom icon" v-show="vShow"></i>
            </div>
            <div v-show="vShow" class="view_box_title-bottom-box">
              <div class="view_box_title-bottom-box-title" v-for="item in $router.currentRoute.meta.titlefootChilder">
                <div class="view_box_title-bottom-box-title-title">{{ item.name }}</div>
                <div class="view_box_title-bottom-box-title-line">
                  <div v-for="item2 in item.children">{{ item2 }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <el-backtop target=".view-box" :bottom="50" :visibility-height="450">
      <div class="view-box-top">
        回到</br>顶部
      </div>
    </el-backtop>
  </div>
</template>

<script>
import myHeader from "@/components/myHeader";
import TagsView from "@/layout/components/TagsView";
import router from "@/router";
export default {
  components: { myHeader, TagsView },
  data() {
    return {
      vShow: true,
    };
  },
  computed: {
    //获取自定义路由
    myRouter() {
      console.log("路由", this.$store.state.myselfPermission.routerList);

      return this.$store.state.myselfPermission.routerList.filter((item) => item.name != "portal");
      // return this.$store.state.myselfPermission.routerList;
      //.slice(0,this.$store.state.myselfPermission.routerList.length-1)
    },
    activeMenu() {
      // 返回当前激活的路由路径
      return this.$route.path;
      /* 
        
      */
    },
  },
  created() { },
  methods: {
    handleClick() {
      this.vShow = !this.vShow;
    }
  }
};
</script>

<style lang="scss" scoped>
.leftIcon {
  display: inline-block;
  height: 14px;
  width: 14px;
  margin-right: 10px;
}

::v-deep .el-submenu.is-active {
  background: none !important;
  border-radius: 5px !important;

}

::v-deep .el-submenu__title {
  padding: 0 8px !important;
  font-weight: bold !important;
}

::v-deep .el-menu-item {
  padding: 0 8px !important;
  margin-right: -1px;

}

::v-deep .el-menu-item-group .el-menu-item {
  align-items: center;
  margin-left: 20px !important;
  font-weight: bold !important;
}

::v-deep .el-menu-item-group__title {
  padding: 0 !important;
  font-weight: bold;
}

.container {
  height: 100%;

  .body-container {
    height: calc(100% - 50px);
    display: flex;
    align-items: center;

    &>div {
      height: 100%;
    }

    .tree-menu {
      // overflow: hidden;
      overflow-y: auto;
      background: #465970;
      width: 180px;
      box-sizing: border-box;
      padding: 14px 10px;


      .mydiv {
        width: 200px;
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        padding: 0 10px;
        cursor: pointer;

        .router-icon {
          display: inline-block;
          height: 14px;
          width: 14px;
          margin-right: 10px;
        }
      }
    }

    .view-box {
      flex: 1;
      width: 100%;
      height: 100%;
      background: #f2f2f2;
      overflow-y: auto;
    }

    .child-views {
      height: calc(100% - 40px);
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
    }
  }

  .routerActive {
    background: #1e80eb;
    border-radius: 4px;
  }

  .view-child {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
  }
}

::v-deep .el-menu {
  border-right: none;
  background: none;

  .router-icon {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin-right: 6px;
  }

  .el-submenu__title {
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    color: #ffffff;
    font-size: 15px;

    i {
      color: #ffffff;
      right: 5px;
    }

    &:hover {
      background: #1e80eb;
      border-radius: 5px;
    }

    &:focus {
      background: #1e80eb;
      border-radius: 5px;

    }
  }

  .is-active {
    background: #1e80eb;
    border-radius: 5px;
  }

  .el-menu-item {
    min-width: 0;
    // display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    padding: 0 10px;
    margin: 5px 0;
    height: 40px;
    line-height: 40px;



    &:hover {
      background: #1e80eb;
      border-radius: 5px;
    }

    &:focus {
      background: #1e80eb;
      border-radius: 5px;

    }
  }
}

.tree-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.view_box_title {
  // width: 700px;
  position: sticky;
  top: 0;
  width: 98.8%;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 19px;
  font-family: SourceHanSansCN;
  border-radius: 5px;
  color: #00356f;
  margin: 10px 0 0 10px;
  background: url("../assets/images/sub-title.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-weight: bold;
  z-index: 9999;

}

.view-box-top {
  position: relative;
  z-index: 999;
  padding: 5px 0;
  height: 100%;
  width: 100%;
  font-weight: 500;
  font-size: 16px;
  font-family: SourceHanSansCN;
  color: #fff;
  background: -webkit-linear-gradient(top, #1f80ea 0%, #005dc2 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#1f80ea), to(#005dc2));
  background: linear-gradient(180deg, #1f80ea 0%, #005dc2 100%);
  -webkit-box-shadow: 0px 3px 12px rgba(0, 0, 0, .26);
  border-radius: 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;

}

::v-deep .el-backtop {
  height: 50px;
  width: 50px;
}

.view_box_title-bottom {
  position: sticky;
  bottom: 0px;
  z-index: 9999;
  // padding: 5px 0 0 0;
  box-sizing: border-box;
  background: #f2f2f2;

  .view_box_title-bottom-sanjiao {
    position: sticky;
    top: -24px;
    left: 50%;
    transform: translateX(-26%);
    width: 90px;
    height: 20px;
    background: #1F80EA;
    border-radius: 5px 5px 0px 0;
    text-align: center;
    cursor: pointer;

    .icon {
      color: #fff;
      font-size: 20px;
      line-height: 20px;
    }
  }

  .view_box_title-bottom-box {
    padding: 5px;
    background: #ffffff;
    border-radius: 5px;

    .view_box_title-bottom-box-title {
      display: flex;
      align-items: center;
      line-height: 26px;
      margin: 10px 0;
      border-bottom: 1px solid #D3D3D3;

      /* 设置下边框为2px宽的黑色实线 */
      .view_box_title-bottom-box-title-title {
        width: 180px;
        height: 26px;
        background: #1F80EA;
        border-radius: 5px 5px 0px 0px;
        margin-right: 10px;
        color: #ffffff;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
      }

      .view_box_title-bottom-box-title-line {
        min-width: 80%;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 13px;
        font-weight: 600;
        color: #00356F;
        display: flex;
        align-items: center;
        display: flex;
        align-items: center;
        // justify-content: space-around;

        div {
          min-width: 100px;
          margin-right: 20px;

        }
      }
    }
  }
}
.myHeader{
  position: relative;
  z-index: 99999;
}
</style>