<template>
  <div class="home-box">
    <el-container>
      <el-aside :class="{'aside-show':isActive}">
        <div class="logo-box" :class="{'logo-box-show':isActive}">
          <img class="logo-img" src="@/assets/images/logo-realestate.png" alt="">
          <span class="logo-text" v-show="!textLogo">不动产+互联网</span>
        </div>
        <el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isActive" background-color="#121958" text-color="#fff" active-text-color="#21FAFD" :collapse-transition="false" :router='true'>
          <template  v-for="item in menuList">
            <el-submenu :index="item.code" :key="item.code" v-if="item.children&&item.children.length>0">
              <template slot="title">
                <i :class="item.icon" style="margin-right:10px;"></i>
                <span slot="title">{{item.name}}</span>
              </template>
              <template v-for="seconditem in item.children">
                <el-menu-item  :index="seconditem.code" :key="seconditem.code" v-if="!seconditem.children" :route="{path: seconditem.path}">
                  {{seconditem.name}}
                </el-menu-item>
              </template>
              <template v-for="seconditem in item.children">
                <el-submenu  :index="seconditem.code" :key="seconditem.code" v-if="seconditem.children">
                  <span slot="title" style="padding-left:15px;">{{seconditem.name}}</span>
                  <el-menu-item v-for="threeitem in seconditem.children" :index="threeitem.code" :key="threeitem.code" :route="{path: threeitem.path}">{{threeitem.name}}</el-menu-item>
                </el-submenu>
              </template>
            </el-submenu>
            <el-menu-item :index="item.code" :key="item.code" v-else :route="{path: item.path}">
              <i :class="item.icon" style="margin-right:10px;"></i>
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
    <el-container>
      <el-header height="120px">
        <div class="header-top">
          <div class="top-items"  @click="toggleClick">
            <i class="fa fa-outdent hamburger" v-show="!isActive"></i>
            <i class="fa fa-indent hamburger" v-show="isActive"></i>
          </div>
          <div class="top-items" v-for="(item,index) in headTop" :key="index+'1'" :class="{'is-active':item.select}" @click="selectTopItems(index)">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </div>          
        </div>
        <div class="header-bottom">
          <Navigation ref="navigation"></Navigation>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
  </div>
</template>
<script>
  import util from '@/libs/util.js'
  import screenfull from "screenfull"
  import Navigation from "../components/IvyElement/navigation"
  import { setTimeout } from 'timers'
  export default {
    components: {
      Navigation
    },
    data() {
      return {
        navigationList: [],
        isActive: false,
        textLogo: false,
        activePath: '',
        defaultActive: '',
        headTop:[{
          select:true,
        },{
          select:false,
        },{
          select:false,
        },{
          select:false,
        },{
          select:false,
        }
        ],
        // 上导航选中id
        indId: undefined,
        menuList:[],
        pathAndCodeObj:{
          '/article-draft' : "PSH004",
          '/article-publish': "PSH005",
          "/article-recycle":"PSH006",
          "/notice-draft":"PSH007",
          "/notice-publish":'PSH008',
          "/notice-recycle":"PSH009",
          "/column_management":"PSH018",
          "/announcement_template":"PSH019",
          "/business_management":"PSH020"
        }
      };
    },
    computed: {
      permission_routes() {
        return this.$store.state.permission_routes.navigation
      }
    },
    watch:{
      '$route.path':function(newPath){
        this.defaultActive = this.pathAndCodeObj[newPath]
      }
    },
    created() {
      if ( this.$route.meta ) {
        this.defaultActive = this.$route.meta.code
      }
      if( this.permission_routes.length!==0 ){
        this.navigationList = this.permission_routes
      } else {
        let list = JSON.parse(util.cookies.get('navigation-1')).concat(JSON.parse(util.cookies.get('navigation')))
        this.navigationList = list
      }
      this.sortNavigation(this.navigationList,0)
      if (util.cookies.get('indId')) {
        let indId = util.cookies.get('indId')-0
        this.navSelect(indId)
        this.sortNavigation(this.navigationList,indId)
      }
    },
    methods: {
      sortNavigation( data,selectId) {
        let headTop = this.headTop
        data.forEach((item, index) => {
          headTop[index].name = item.name
          headTop[index].icon = item.icon
        })
        this.menuSelect(data,selectId)
      },
      menuSelect(data,selectId) {
        this.menuList = data[selectId].children
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      toggleClick(){
        this.isActive=!this.isActive;
        if(!this.isActive){
          setTimeout(()=>{
            this.textLogo=this.isActive;
          },200)
        }else{
          this.textLogo=this.isActive;
        }
      },
      selectTopItems(ind){
        this.indId = ind
        this.menuSelect(this.navigationList,ind)
        this.$store.dispatch("setTabs/init_tabs")
        this.$store.dispatch("setTabs/set_active_index", "/panel")
        this.$router.push("/panel")
        this.navSelect(ind)
        util.cookies.set('indId',ind)
      },
      // 上导航选中id
      navSelect (id) {  
        this.headTop.forEach((item,index)=>{
          item.select=false
          if(index==id){
            item.select=true
          }
        })
      },
      screen() {
        // 如果不允许进入全屏，发出不允许提示
        // if (!screenfull.enabled) {
        //   this.$message('您的浏览器不能全屏');
        //   return false
        // }
        screenfull.toggle();
      }
    }
  };
</script>
<style lang="less" scoped>
  .home-box {
    width: 100%;
    height: 100vh;
    .el-container {
      height: 100%;
    }
    .el-header{
      background-color: #fff;
      padding: 0 !important;
      .header-top{
        height: 60px;
        border-bottom:1px solid rgba(242,242,242,1);
        box-sizing: border-box;
        .top-items{
          cursor: pointer;
          height: 60px;
          padding: 0 30px;
          font-size: 16px;
          line-height: 60px;
          float: left;
          position: relative;
          color: #4A4A4A;
          i{
            margin-right: 6px;
          }
          .hamburger{
            font-size: 16px;
            line-height: 60px;
            color: #000;
          }
        }
        .top-items:not(:last-child)::after{
          content: "";
          width:1px;
          height: 14px;
          background: #EAEAEA;
          position: absolute;
          right: -1px;
          top: 24px;
        }
        .top-items.is-active {
          color: #00CACD;
        }
      }
      .header-bottom{
        height: 50px;
        box-shadow:0px 2px 4px 0px rgba(222,222,222,0.7);
        border-bottom:1px solid rgba(234,234,234,1);
        box-sizing: border-box;
      }
    }
    .el-aside {
      width: 200px !important;
      background-color: #121958;
      color: #333;
      // text-align: center;
      overflow: hidden;
      transition:width 0.3s;
      .logo-box{
        width: 200px;
        height: 120px;
        border-bottom:1px solid rgba(255, 255, 255, 0.2);
        padding: 30px 0 28px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        transition:width 0.3s;
        .logo-img{
          width: 38px;
          height: 38px;;
        }
        .logo-text{
          font-size:14px;
          color:rgba(255,255,255,1);
          line-height: 14px;
        }
      }
      .logo-box-show{
        width: 64px;
      }
      .el-menu{
        border-right:0;
      }
      .el-submenu .el-menu-item{
        text-align: left;
        text-indent: 15px;
      }
    }
    .aside-show{
      width: 64px !important;
    }
    
    .el-main {
      background-color: #ffffff;
      color: #333;
      // text-align: center;
      // line-height: 160px;
      padding: 0;
    }
  }
</style>