<template>
  <div class="sidebar">
    <div class="logo" @click="backhome">
      <img src="../assets/img/logo1.png" alt="" />
    </div>
    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :unique-opened="true"
             :collapse-transition="true" background-color="#ffffff" text-color="#333333" active-text-color="#333333">
      <div v-for="(item,index) in i18n.items" :key="index">
        <el-submenu :index="item.index" v-if="item.ChildrenStatus && item.status!=-1">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.title}}</span>
          </template>
          <el-menu-item-group v-if="item.ChildrenStatus && item.status!=-1">
            <div v-for="(item1,index1) in item.children" :key="index1">
              <el-submenu :index="item1.index" v-if="item1.ChildrenStatus && item1.status!=-1">
                <template slot="title">{{item1.title}}</template>
                <el-menu-item :index="item2.index" v-for="(item2,index2) in item1.children" @click="gopath(item2.index)" v-if="item2.status!=-1"
                              :key="index2">{{item2.title}}
                </el-menu-item>
              </el-submenu>
              <el-menu-item :index="item1.index" v-else-if="item1.status!=-1" @click="gopath(item1.index)">{{item1.title}}</el-menu-item>
            </div>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item :index="item.index" v-else-if="item.status!=-1" @click="gopath(item.index)">
          <i :class="item.icon"></i>
          <span>{{item.title}}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
  // import bus from "../common/bus";
  import {
    httpGet
  } from "../api/index";
  import utils from "../utils/util";
  import {ztreeToElementTree, ztreeToElementTree2} from "../utils";
  export default {
    data() {
      return {
        hiddenslderstatus: true,
        slideShow:false,
        slideShowOne:false,
        i18n: {items:[{subs:null}]},
        selectindex: 0,
        activeindex: 0,
        activeid: '',
        isrouterview: true,
        isCollapse: true,
        sq: true,
        items: [],
        tenantId: '',
        clientWidth:0
      };
    },
    created() {
      // this.i18n = this.$language.cn.i18n
      this.tenantId = 1200//JSON.parse(localStorage.getItem("tenantId"))
      // if (this.tenantId == 400) {
      //   this.getmenu1()
      // } else {
      //   this.getmenu()
      // }
        this.getmenu()
      if(document.documentElement.clientWidth<1080){
        this.slideShow = false
        this.slideShowOne = true
      }else{
        this.slideShow = true
        this.slideShowOne = false
      }
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          if(document.documentElement.clientWidth<1080){
            this.slideShow = false
          }else{
            this.slideShow = true
          }
        })()
      }
      console.log('数据', this.i18n)
    },
    methods: {
      hiddenslder() {
        if (this.hiddenslderstatus) {
          document.documentElement.style.setProperty("--sldebarLeft", "0");
          this.hiddenslderstatus = false
        } else {
          document.documentElement.style.setProperty("--sldebarLeft", "180px");
          this.hiddenslderstatus = true
        }
      },
      //
      getmenu() {
        let items=this.$language.cn.i18n.items
        let delayerData = utils.treeToArray(items)
        httpGet('', this.$api.userInfo).then(res3 => {
          let authorities = res3.data.authorities
          localStorage.setItem('info', JSON.stringify(res3.data))
          let arr3 = []
          if(res3.data.type == 0){
            arr3 = delayerData
          }else{
            authorities.forEach((item) => {
              delayerData.forEach((element) => {
                if (item == element.key) {
                  arr3.push(element)
                }
              })
            })
          }
          let itemsData = ztreeToElementTree2(arr3,[])
          let idItemsData = itemsData.sort((a,b)=>{
            return a.id - b.id
          })
          let arr=[]
          if (res3.data.type == 0) {
            idItemsData.map(li=>{
              if(li.index!='bluetoothInput' && li.index!='NormallyOpenPermission' && li.index!='FreezePermission' && li.index!='RemoteControlPermission'){
                arr.push(li)
              }
            })
            this.i18n.items = arr
          } else {
            idItemsData.map(li=>{
              if(li.index!='bluetoothInput' && li.index!='NormallyOpenPermission' && li.index!='FreezePermission' && li.index!='RemoteControlPermission'){
                arr.push(li)
              }
            })
            let i18n = arr
            this.$nextTick(() => {
              this.i18n.items = i18n
            });
          }
        })
      },
      getmenu1() {
        httpGet('', this.$api.userInfo).then(res3 => {
          var authorities = res3.data.authorities
          localStorage.setItem('info', JSON.stringify(res3.data))
          this.i18n = this.$language.cn.i18n1;
        })
      },
      gopath(path) {
        this.$router.push({
          path: `/${path}`
        })
        this.sq = true
      },
      mouseLeave() {
        this.sq = true
      },
      clicktab(id) {
        if (this.activeid == id) {
          this.activeid = '';
        } else {
          this.activeid = id;
        }
      },
      selectindexfun(index, i) {
        this.activeindex = i;
        this.selectindex = index;
        if (this.activeindex == i && this.i18n.items[i].subs) {
          this.sq = false;
        } else {
          this.$router.push(`/${index}`)
          this.sq = true;
        }
      },
      sqfun() {
        this.slideShow=false
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      reload() {
        this.isrouterview = false;
        this.$nextTick(function() {
          this.isrouterview = true;
        });
      },
      backhome() {},
    },
    computed: {
      contractFile() {
        return this.$store.state.user.contractFile;
      },
      onRoutes() {
        return this.$route.path.replace("/", "");
      },
      collapse() {
        return this.$store.state.collapse;
      },
    },

  };
</script>

<style scoped lang="scss">
  li {
    list-style: none;
  }

  .bg {
    background: var(--custom-color);
    height: 100vh;
    width: 250px;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 9999;
    transition: all 0.5s;
    overflow: hidden;
  }

  .bg1 {
    width: 100px;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    //width: 100%;
    //min-height: 400px;
    //overflow: hidden;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar {
    display: block;
    position: absolute;
    width: var(--sldebarLeft);
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 99;
    overflow-y: scroll;
    transition: all 0.5s;
  }

  .sidebar::-webkit-scrollbar {
    width: 0;
  }

  .sidebar-el-menu:not(.el-menu--collapse) {
    width: 100px;
  }

  .sidebar>ul {
    height: calc(100% - 97px);
    width: var(--sldebarLeft);
    overflow: hidden;
    transition: all 0.5s;
  }


  /* .el-submenu .el-menu-item {
  padding-left: 60px !important;
} */
  .logo {
    // background: var(--custom-color);
    background-color: rgb(250, 142, 0);
    text-align: center;
    color: #fff;
    overflow: hidden;
    width: var(--sldebarLeft);
    cursor: pointer;
    padding: 20px 0;
    transition: all 0.5s;
    // border-bottom: 1px solid var(--border-color);
  }

  .logo span {
    font-size: 22px;
    line-height: 20px;
  }

  .logo img {
    width: 100px;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
  }

  .el-submenu >>> .el-submenu__title i {
    color: #333333 !important;
  }
  .el-submenu >>> .el-submenu__icon-arrow{
    margin-top: -4px;
  }
  .el-menu--collapse {
    width: 100px;
  }
  .el-menu-item i{
    color: #fff !important;
  }

  .el-menu-item-group__title {
    color: #f2f3f5;
  }

  .navmenu {
    background: var(--custom-color);
    height: calc(100vh - 70px);
    color: #fff;
    text-align: center;
    font-size: 14px;
    overflow-y: scroll;
  }

  ::-webkit-scrollbar {
    width: 2px;
  }

  ::-webkit-scrollbar-track {
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background-color: #E8E8E8;
  }

  .navmenu>ul {
    height: auto;
  }

  .navli {
    cursor: pointer;
    padding: 10px;
  }

  .navli .iconfont {
    font-size: 20px;
  }

  .navli .navtitle {
    margin-top: 10px;
  }

  .navli:hover {
    background: rgba(76, 163, 240, 0.5);
  }

  .el-menu {
    background: none;
  }

  .centernav {
    /* background: #59adf7; */
    display: block;
    position: absolute;
    left: 100px;
    top: 0;
    bottom: 0;
    z-index: 999;
    width: 150px;
    transition: all 0.2s;
    opacity: 1;
    overflow: hidden;
  }

  .centernav1 {
    width: 0;
  }

  .centernav .logo {
    height: 97px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: none;
  }

  .centernav .logo span {
    font-size: 16px;
    width: 150px;
    word-break: break-word;
    white-space: pre-line;
    letter-spacing: 6px;
  }

  .navcontent {
    border-top: 1px solid  var(--border-color);
    border-left: 1px solid  var(--border-color);
    overflow-y: scroll;
    padding-top: 70px;
    height: calc(100vh - 97px);
  }

  .sq .iconfont {
    color: #fff;
    font-size: 20px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 999;
  }

  .navlicon {
    padding: 10px;
    box-sizing: border-box;
    text-align: left;
    color: #fff;
    position: relative;
    font-size: 14px;
    cursor: pointer;
  }

  .navlicon .iconfont {
    color: #fff;
    font-size: 12px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }

  .navlicon .iconfonttop {
    top: 20px;
  }

  .activenavli {
    background: #0087ff80;
    border-left: 2px solid #b82f0e;
    box-sizing: border-box;
  }

  /* .navlicon:hover {
   background: rgba(76, 163, 240, 0.5);
} */
  .navulhidden {
    height: 0;
    overflow: hidden;
  }

  .navulshow {
    height: auto;
    padding-left: 15px;
    box-sizing: border-box;
  }
  .wl{
    width: 100%;
    color: #fff;
    font-size: 20px;
    padding: 28px 0;
  }
  .slideTwo{
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 999;
    display: none;
  }
  @media only screen and (max-width: 1024px){
    .slideTwo{
      display: inline-block;
    }
  }
</style>
