<template>
  <div class="app-wrapper">
    <div class="stair">

      <!-- 一级列表 -->
      <div :class="{ pandect: true, firstChange: isFirstChange }">
        <ul class="stairList">
          <li :class="{ active: firstActive == '' }" @click="getSecondRoute('', '', '')">
            <i class="el-icon-shopping-bag-1"></i>
            <p>概况</p>
          </li>
          <li v-for="(item, index) in permissionMenusArr" :key="index" @click="getSecondRoute(index, item.code, item.title, 1)" :class="{ active: firstActive == item.title }">
            <i class="el-icon-shopping-bag-1"></i>
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </div>

      <!-- 折叠按钮 -->
      <!-- <div :class="{folded:true,mySecondBtn:isMySecondBtn,firstBtn:isFirstBtn}">
        <div v-show="foldedStatus != 3" class="fold" @click="secondFoldBtn"><i class="el-icon-arrow-left"></i></div>
        <div v-show="foldedStatus == 1 || foldedStatus == 3 " class="foldFirst" @click="openFoldBtn"><i class="el-icon-arrow-right"></i></div>
      </div>-->

      <!-- 顶部栏 -->
      <div class="topNav">
        <div class="navName"> 管理平台 </div>
        <p class="topHead">
          <el-dropdown @command="handleCommand" trigger="click">
            <span class="el-dropdown-link">
              {{ name }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" style="text-align: center">
              <el-dropdown-item divided command="0">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </p>
      </div>

      <!-- 二级列表 -->
      <div :class="{secondLevel: true,isStatistics: secondFold,secondChnage: isSecondChnage,}" v-show="!unStatistics">
        <ul>
          <li :class="{ active: secondActive == item.title,unright: item.menuStatus == 1,}" v-for="(item, index) in secondRoute" :key="index" @click="getThreeRoute(index, item.code, item.title, 1)">
            {{ item.title }}
          </li>
        </ul>
      </div>

      <!-- 主体内容 -->
      <div :class="{ 'main-content': true,mainAnimation: isMainAnimation,firstMain: isFirstMain,secondMain: isSecondMain,}" v-show="!unStatistics">
        <div class="main-container">
          <!-- 路由标题栏 -->
          <ul class="entPly" v-if="threeRoute.children != ''" v-show="showThreeRoute">
            <li :class="{ active: threeActive == item.title }" v-for="(item, index) in threeRoute.children" :key="index" @click="getContent(index, item.code, item.title)">
              {{ item.title }}
            </li>
          </ul>
          <!-- 内容组件 -->
          <app-main v-show="threeMain" :threeRoutes="threeRoute.children != '' ? 2 : 1"></app-main>
        </div>
      </div>

    </div>
  </div>
</template>

<script type="javascript">
import { Navbar, Sidebar, AppMain } from "views/layout";
import { mapGetters } from "vuex";
import { objDeepCopy } from "../../utils";

export default {
  name: "layout",
  components: {
    Navbar,
    Sidebar,
    AppMain,
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar;
    },
    ...mapGetters([
      "sidebar",
      "permissionMenus",
      "menuState",
      "avatar",
      "name",
    ]),
  },
  data() {
    return {
      isSecondMain: false,
      isSecondChnage: false,
      isFirstMain: false,
      isFirstBtn: false,
      isMainAnimation: false,
      isMySecondBtn: false,
      secondFold: false,
      status: this.$route.path.indexOf("baseInfo"),
      firstActive: "", // 一级路由高亮
      secondActive: "", // 二级路由高亮
      threeActive: "", // 三级路由高亮
      secondRoute: [], // 二级路由列表
      secondName: "", // 二级路由名称
      threeName: "", // 三级路由名称
      threeRoute: {}, // 三级路由列表
      unStatistics: true, // 统计
      threeMain: false, //
      AllminiAppsArr: [], // 小程序列表
      isFirstChange: false, // 一级菜单打开关闭
      dateTime: "",
      todayPay: 0, // 昨日支付金额
      yesPay: 0, // 今日支付订单数
      todayOrder: 0, // 昨日支付订单数
      yesOrder: 0, // 待发货订单数
      deliverOrder: 0, // 昨日已发货订单数
      yesDeliverOrder: 0,
      totalProfit: 0,
      totalRefund: 0, // 总退款
      weName: "", //小程序名称
      foldedStatus: 0, //收起状态 0:原始状态 1:二级收起 3:二级三级收起
      permissionMenusArr: [],
      showThreeRoute: true,
    };
  },
  created() {
    this.permissionMenusArr = objDeepCopy(this.permissionMenus)
    this.getRefresh();
  },
  watch: {
    $route(to, from) {
      this.status = to.path.indexOf("baseInfo");
      if (to === "/") {
        this.getRefresh();
      }
    }
  },
  mounted() {
    this.showThreeRoute = true
    this.unStatistics = true;
    this.secondRoute = [];
    this.threeRoute = [];
    this.threeMain = false;
    this.$bus.$on("hideThreeRoute",bol => {
      this.showThreeRoute = bol
    })
  },
  methods: {
    //收起
    secondFoldBtn() {
      switch (this.foldedStatus) {
        case 0:
          this.secondFold = true; //二级菜单收起
          this.isMySecondBtn = true; //二级按钮收起
          this.isMainAnimation = true; //主题内容变宽
          this.foldedStatus = 1;
          break;
        case 1:
          this.isFirstChange = true;
          this.isFirstBtn = true;
          this.isFirstMain = true;

          this.foldedStatus = 3;
        default:
          break;
      }
    },
    //打开
    openFoldBtn() {
      switch (this.foldedStatus) {
        case 1:
          this.isSecondChnage = true;
          this.isSecondMain = true;
          this.foldedStatus = 0;
          break;

        default:
          break;
      }
    },
    /**
     * 添加管理店铺
     */
    manageShop() {
      this.firstActive = ""; // 一级路由高亮
      this.secondActive = ""; // 二级路由高亮
      this.threeActive = ""; // 三级路由高亮
      this.secondRoute = []; // 二级路由列表
      this.secondName = ""; // 二级路由名称
      this.threeName = ""; // 三级路由名称
      this.threeRoute = {}; // 三级路由列表
      this.unStatistics = true; // 统计
      this.threeMain = false; //
      this.$router.push({
        path: "/baseInfo/index",
      });
    },
    getDescribe(val) {
      this.$router.push({
        path: val,
      });
      this.getRefresh();
    },
    getRefresh() {
      setTimeout(() => {
        // 一级路由自动匹配
        let firstName = []; // this.permissionMenus.filter(item => item.name === this.$route.name); // 一级菜单
        let secondName = [];
        let thirdName = [];
        let indexInfo = 0;
        let indexInfo2 = 0;
        let indexInfo3 = 0;
        let pathType = 1;
        const pathArr = this.$route.path.split("/");
        if (firstName.length === 0) {
          // 二级菜单
          this.permissionMenusArr.filter((item, index) => {
            if (item.code === pathArr[1]) {
              firstName.push(item);
              indexInfo = index;
              item.children.filter((iitem, iindex) => {
                if (iitem.code === pathArr[2]) {
                  firstName = [];
                  secondName = [];
                  firstName.push(item);
                  secondName.push(iitem);
                  indexInfo = index;
                  indexInfo2 = iindex;
                  pathType = 2;
                }
              });
            }
          });
        }
        if (firstName.length === 0) {
          this.permissionMenusArr.filter((item, index) => {
            item.children.filter((iitem, iindex) => {
              if (iitem.code === pathArr[1]) {
                firstName.push(item);
                indexInfo = index;
                indexInfo2 = iindex;
                secondName.push(iitem);
                pathType = 2;
                iitem.children.filter((iiitem, iiindex) => {
                  if (iiitem.code === pathArr[2]) {
                    firstName = [];
                    secondName = [];
                    thirdName = [];
                    firstName.push(item);
                    secondName.push(iitem);
                    thirdName.push(iiitem);
                    indexInfo = index;
                    indexInfo2 = iindex;
                    indexInfo3 = iiindex;
                    pathType = 3;
                  }
                });
              }
            });
          });
        }
        if (firstName.length === 0) {
          this.permissionMenusArr.filter((item, index) => {
            item.children.filter((iitem, iindex) => {
              iitem.children.filter((iiitem, iiindex) => {
                if (iiitem.code === pathArr[2]) {
                  firstName.push(item);
                  secondName.push(iitem);
                  thirdName.push(iiitem);
                  indexInfo = index;
                  indexInfo2 = iindex;
                  indexInfo3 = iiindex;
                  pathType = 3;
                }
              });
            });
          });
        }
        if (firstName.length > 0 && firstName[0].code != "baseInfo") {
          this.firstActive = firstName[0].title;
          if (pathType === 1) {
            this.getSecondRoute(
              indexInfo,
              firstName[0].code,
              firstName[0].title
            );
          } else if (pathType === 2) {
            this.getSecondRoute(
              indexInfo,
              firstName[0].code,
              firstName[0].title
            );
            this.getThreeRoute(
              indexInfo2,
              secondName[0].code,
              secondName[0].title
            );
          } else if (pathType === 3) {
            this.getSecondRoute(
              indexInfo,
              firstName[0].code,
              firstName[0].title
            );
            this.getThreeRoute(
              indexInfo2,
              secondName[0].code,
              secondName[0].title
            );
            this.getContent(indexInfo3, thirdName[0].code, thirdName[0].title);
          }
        }
      }, 300);
    },
    reloadData() {
      this.getTime();
      // this.countData();
    },
    getTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.dateTime =
        yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    // 跳转
    handleCommand(command, event) {
      if (command == "add") {
        this.manageShop();
        return;
      }
      if (!!command) {
        if (command == 0) {
          this.$store.dispatch("FedLogOut").then(() => {
            setTimeout(() => {
              location.reload(); // 为了重新实例化vue-router对象 避免bug
            }, 300);
          });
        } else {
          // setMenuState(0); // 1：外层固定菜单 0：内部小程序菜单
          this.$store.commit("SET_STATE", 0);
          let avtiveInfo = this.AllminiAppsArr.filter(
            (item) => item.wxappId == command
          );
          Cookies.set("user", {
            names: avtiveInfo[0].nickName,
            image: avtiveInfo[0].headImg,
          });
          this.$store.commit("WECHATIFO", {
            names: avtiveInfo[0].nickName,
            image: avtiveInfo[0].headImg,
          });
          // setTourAuth(event.$attrs.tourAuth ? 1 : 0);
          // setWxappId(command);
          // return false
          if (this.$route.path === "/") {
            window.location.reload();
          } else {
            window.location.href = "#/";
            this.unStatistics = true;
            this.secondRoute = [];
            this.threeRoute = [];
            this.threeMain = false;
            this.firstActive = "";
            this.secondActive = "";
            this.threeActive = "";
            this.getTime();
            // this.countData();
            // this.getAllminiApps();
            this.getRefresh();
          }
        }
      }
    },
    // 获取全部小程序
    // getAllminiApps() {
    //   getWxapps().then((response) => {
    //     if (response.status === 200) {
    //       this.AllminiAppsArr = response.data;
    //     }
    //   });
    // },
    // countData() {
    //   const that = this;
    //   that.todayOrder = 0;
    //   that.yesOrder = 0;
    //   that.todayPay = 0;
    //   that.yesPay = 0;
    //   that.deliverOrder = 0;
    //   that.yesDeliverOrder = 0;
    //   that.totalProfit = 0;
    //   that.totalRefund = 0;
    //   countData().then((response) => {
    //     if (response.status === 200) {
    //       response.data.forEach(function (item) {
    //         if (item.type === 1) {
    //           // 今天下订单数量
    //           that.todayOrder = item.total;
    //         }
    //         if (item.type === 2) {
    //           // 昨日下订单数量
    //           that.yesOrder = item.total;
    //         }
    //         if (item.type === 3) {
    //           // 今天支付金额
    //           that.todayPay = item.total;
    //         }
    //         if (item.type === 4) {
    //           // 昨日支付金额
    //           that.yesPay = item.total;
    //         }
    //         if (item.type === 5) {
    //           // 待发货订单
    //           that.deliverOrder = item.total;
    //         }
    //         if (item.type === 6) {
    //           // 昨日已发货订单
    //           that.yesDeliverOrder = item.total;
    //         }
    //         if (item.type === 7) {
    //           // 总收益
    //           that.totalProfit = item.total;
    //         }
    //         if (item.type === 8) {
    //           // 总退款
    //           that.totalRefund = item.total;
    //         }
    //       });
    //     }
    //   });
    // },
    // 获取二级列表
    getSecondRoute(val, code, name, type) {
      this.firstActive = name;
      this.threeMain = false;
      this.unStatistics = true;
      console.log("permissionMenusArr=>",this.permissionMenusArr)
      console.log(this.permissionMenusArr[1].children[1].title,this.permissionMenusArr[1].children[1].children)
      if (code) {
        this.secondRoute = objDeepCopy(this.permissionMenus[val].children);
        this.secondName = this.permissionMenusArr[val].code;
        this.unStatistics = false;
        this.secondActive = this.secondRoute[0].title;
        console.log("secondActive=>",this.secondActive);
        this.threeMain = true;
        // 点击一级自动打开子级第一个页面
        if (this.secondRoute[0].children == "") {
          if (this.secondRoute[0].menuStatus == 1) {
            this.secondActive = "";
            this.threeActive = "";
            this.threeMain = false;
            this.threeRoute.children = [];
            this.$alert(
              '暂未开通"' +
                this.secondRoute[0].title +
                '"操作权限，请联系管理员开通',
              "系统通知",
              {
                callback: (action) => {},
              }
            );
          } else if (!type) {

          } else {
            this.threeRoute.children = [];
            this.$router.push("/" + code + "/" + this.secondRoute[0].code);
            console.log("二级列表导航=>","/" + code + "/" + this.secondRoute[0].code);
          }
        } else if (!type) {

        } else {
          this.threeActive = this.secondRoute[0].children[0].title;
          this.threeRoute.children = objDeepCopy(this.secondRoute[0].children);
          console.log("threeRoute.children=>",this.threeRoute.children)
          // console.log( this.secondRoute[0]);
          this.threeName = this.secondRoute[0].code;
          if (this.secondRoute[0].menuStatus == 1) {
            this.threeMain = false;
            this.secondActive = "";
            this.threeActive = "";
            this.threeRoute.children = [];
            this.$alert(
              '暂未开通"' +
                this.secondRoute[0].title +
                '"操作权限，请联系管理员开通',
              "系统通知",
              {
                callback: (action) => {},
              }
            );
          } else {
            this.$router.push("/" + this.secondRoute[0].code + "/" + this.secondRoute[0].children[0].code);
            console.log("二级列表导航=>","/" + this.secondRoute[0].code + "/" + this.secondRoute[0].children[0].code);
          }
        }
      } else {
        this.unStatistics = true;
        this.secondRoute = [];
        this.$router.push({
          path: "/",
        });
      }
    },
    // 获取三级列表
    getThreeRoute(val, code, name, type) {
      this.secondActive = name;
      console.log("secondActive=>",this.secondActive);
      this.threeRoute = this.secondRoute[val];
      this.threeMain = true;
      if (this.threeRoute.children == "") {
        console.log("三级列表导航路径1=>","/" + this.secondName + "/" + this.threeRoute.code);
        this.$router.push("/" + this.secondName + "/" + this.threeRoute.code);
      } else if (!type) {
        this.threeName = this.threeRoute.code;
      } else {
        this.threeName = this.threeRoute.code;
        // console.log(this.threeRoute);
        if (this.threeRoute.children[0].menuStatus == 1) {
          this.threeMain = false;
          this.threeActive = "";
          this.$alert(
            '暂未开通"' +
              this.threeRoute.children[0].nameStore +
              '"操作权限，请联系管理员开通',
            "系统通知",
            {
              callback: (action) => {},
            }
          );
        } else {
          console.log("三级列表导航路径2=>","/" + this.threeRoute.code + "/" + this.threeRoute.children[0].code);
          this.$router.push("/" + this.threeRoute.code + "/" + this.threeRoute.children[0].code);
          this.threeActive = this.threeRoute.children[0].title;
          console.log("threeRoute.children=>",this.threeRoute.children)
        }
      }
    },
    // 获取主题内容
    getContent(val, code, name) {
      this.threeActive = name;
      this.threeMain = true;
      this.$router.push("/" + this.threeName + "/" + code);
      console.log("threeActive",name)
      console.log("主题内容导航=>","/" + this.threeName + "/" + code);
    },
  },
};
</script>
<style>
body {
  background: rgba(237, 239, 243, 1);
}
.main-container {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.folded {
  position: fixed;
  display: inline-block;
  z-index: 70;
  top: 70vh;
  left: 223px;
  .fold,.foldFirst {
    color: rgba(81, 120, 242, 1);
    background: #fff;
    padding: 6px 0px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
  }
  .foldFirst {
    // top: 76vh;
    margin-top: 5px;
  }
}
li {
  list-style: none;
}
.stair .pandect .stairList li:hover {
  background: #282829;
  border-left: 4px solid #516fcd;
  color: #fff;
}
.stair .pandect .stairList li:hover p {
  color: #fff;
}
.stair .pandect .stairList li:hover i {
  color: #fff;
}
.stair .secondLevel ul li:hover {
  color: #516fcd;
}
.stair .main-content .entPly li:hover {
  color: #516fcd;
}
.stair {
  position: relative;
  .pandect {
    display: inline-block;
    width: 100px;
    height: 100vh;
    text-align: center;
    background: rgba(51, 51, 51, 1);
    position: fixed;
    z-index: 11;
    padding-top: 70px;
    overflow-y: scroll;
    .headImg {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-top: 20px;
    }
    .stairList {
      padding: 0;
      color: #999;

      li {
        padding: 10px 0;
        border-left: 4px solid transparent;
        cursor: pointer;
        p {
          margin: 0;
          margin-top: 10px;
          font-size: 13px;
        }
      }
    }
    .active {
      background: #282829;
      border-left: 4px solid #516fcd !important;
      color: #fff;
    }
  }
  .pandect::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    /**/
  }
  .pandect::-webkit-scrollbar-track {
    background: #333;
    border-radius: 10px;
  }
  .pandect::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 20px;
  }
  .pandect::-webkit-scrollbar-thumb:hover {
    background: #999;
  }
  .pandect::-webkit-scrollbar-corner {
    background: #179a16;
  }
  .topNav {
    position: fixed;
    height: 80px;
    width: 100%;
    background: #fff;
    top: 0;
    z-index: 11;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
    .navName {
      display: inline-block;
      margin-left: 35px;
      line-height: 80px;
      .title {
        font-size: 20px;
        .el-icon-link {
          color: #516fcd;
          font-weight: bold;
          font-size: 45px;
          position: relative;
          top: 7px;
        }
      }
      .versions,
      .upgrade {
        font-size: 14px;
        padding: 5px;
      }
      .versions {
        background: rgb(177, 187, 172);
        color: #666;
      }
      .upgrade {
        background: red;
        color: #fff;
      }
    }
    .topHead {
      float: right;
      margin-right: 20px;
      margin-top: 40px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      span {
        position: relative;
        top: -15px;
        margin-left: 10px;
      }
    }
  }
  .secondLevel {
    position: fixed;
    left: 100px;
    top: 80px;
    z-index: 0;
    width: 140px;
    height: calc(100vh - 80px);
    text-align: center;
    background: #fff;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
    ul {
      padding: 0;
      margin-top: 50px;
      li {
        padding: 10px 0;
        color: #666;
        cursor: pointer;
        font-size: 13px;
      }
      .active {
        background: #e4ecfc;
        color: #516fcd;
      }
    }
  }
  .main-content {
    width: calc(100% - 278px);
    height: calc(100vh - 124px);
    position: absolute;
    top: 100px;
    left: 260px;
    right: 20px;
    background: #fff;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    .entPly {
      margin-bottom: 0;
      border-bottom: 1px solid #eee;
      overflow: hidden;
      height: 33px;
      li {
        float: left;
        margin-right: 30px;
        cursor: pointer;
        font-size: 13px;
      }
      .active {
        color: #516fcd;
      }
    }
  }
  .statistics {
    position: absolute;
    top: 100px;
    left: 140px;
    width: calc(100% - 160px);
    height: 260px;
    background: #fff;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin-bottom: 20px;
  }
  .statistics-1 {
    position: absolute;
    top: 400px;
    left: 140px;
    width: calc(100% - 160px);
    height: 260px;
    background: #fff;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin-bottom: 20px;
  }
  .statistics .title,
  .statistics-1 .title {
    margin: 20px;
    font-weight: bold;
  }
  .statistics .time {
    margin: 20px 10px;
  }
  .statistics img {
    width: 20px;
    height: 20px;
    margin: 20px 10px;
  }
  .statistics-1 img {
    width: 280px;
    // height: 50px;
    // margin-left: 10%;
    // margin-top: 5px;
    // margin-right: 20px;
    // border-radius: 50px;
  }
  .statistics .line,
  .statistics-1 .line {
    border: 1px #f6f6f6 solid;
    margin: 0px 20px;
  }
  .statistics .data,
  .statistics-1 .data {
    margin-top: 50px;
  }
  .statistics .block {
    width: 30%;
  }
  .statistics-1 .block {
    width: 40%;
  }
  .statistics-1 .block {
    margin-left: 6%;
  }
  .statistics-1 .block .content {
    // margin: 10px 18%;
    display: flex;
    // background-color: white;
    // border: 1px #f6f6f6 solid;
    width: 100%;
    position: relative;
    cursor: pointer;
  }
  .statistics .block-2 {
    border-right: 1px #f6f6f6 solid;
  }
  .statistics .block div,
  .statistics-1 .block div {
    text-align: center;
  }
  .statistics-1 .block div {
    // margin: 20px 0px;
    margin-top: 20px;
  }
  .statistics .number,
  .statistics-1 .number {
    font-weight: bold;
    font-size: 30px;
    margin: 10px 0px;
  }
  .firstChange {
    animation: myFirst 0.5s infinite;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .isStatistics {
    animation: mySecond 0.5s infinite;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .mySecondBtn {
    animation: mySecondBtn 0.5s infinite;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .mainAnimation {
    animation: mainAnimation 1s infinite;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .firstBtn {
    animation: firstBtn 0.4s infinite;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .firstMain {
    animation: firstMain 1s infinite;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .secondChnage {
    animation: secondChnage 0.5s infinite;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .secondMain {
    animation: secondMain 0.5s infinite;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  @keyframes secondMain {
    from {
      left: 120px;
      width: calc(100% - 140px);
    }
    to {
      left: 260px;
      width: calc(100% - 278px);
    }
  }
  @keyframes secondChnage {
    from {
      left: -40px;
      opacity: 0;
    }
    to {
      left: 100px;
      opacity: 1;
    }
  }
  @keyframes firstMain {
    from {
      left: 260px;
      width: calc(100% - 278px);
    }
    to {
      left: 1.5%;
      width: 98%;
    }
  }
  @keyframes firstBtn {
    from {
      left: 223px;
    }
    to {
      left: 0;
    }
  }
  @keyframes myFirst {
    from {
      left: 0px;
    }
    to {
      left: -120px;
    }
  }

  @keyframes mySecond {
    from {
      left: 140px;
    }
    to {
      left: -40px;
      opacity: 0;
    }
  }

  //二级菜单按钮
  @keyframes mySecondBtn {
    from {
      left: 223px;
    }
    to {
      left: 83px;
    }
  }

  //二级收起主页面变宽
  @keyframes mainAnimation {
    from {
      left: 260px;
      width: calc(100% - 278px);
    }
    to {
      left: 120px;
      width: calc(100% - 140px);
    }
  }
}

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  &.hideSidebar {
    .sidebar-container {
      width: 36px;
      overflow: inherit;
    }
    .main-container {
      margin-left: 36px;
    }
  }
  .sidebar-container {
    transition: width 0.28s ease-out;
    width: 210px;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .main-container {
    min-height: 100%;
    transition: margin-left 0.28s ease-out;
    /*margin-left: 210px;*/
  }
}
</style>