<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="安全生产标准化" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
        </slot>
      </lx-header>
    </div>
    <div class="menuwrap">
      <div v-for="(item,index) in permission_routes">
        <div class="firstmenu" v-if="item.children&&item.children.length==0">
          1-{{item.name}}
        </div>
        <!--一级有 二级栏目 -->
        <div v-else class="firstmenu">
          <div>1-{{item.name}}</div>
          <div>
            <div v-for="(i,index) in item.children">
              <div class="submenu" v-if="i.children&&i.children.length==0">
                2-<a :href="'/admin/#'+i.url">{{i.name}}</a>
              </div>
              <!--二级有 三级栏目 -->
              <div v-if="i.children&&i.children.length>0" class="thirdmenu">
                <div>2-{{i.name}}</div>
                <div>
                  <div v-for="(j,index) in i.children">
                    3-<a :href="'/admin/#'+j.path">{{j.name}}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- <a href="/admin/#/objective/standbook">123</a>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <div v-for="(item,index) in permission_routes" :key="index" style="display: inline-block;padding:0 5px">
       <el-menu-item :index="item.url" v-if="item.children&&item.children.length==0">{{item.name}}</el-menu-item>
        <el-submenu :index="item.url" v-else>
           <template slot="title">{{item.name}}</template>
          <div v-for="(i,index) in item.children" :key="index">
             <el-menu-item :index="i.url" v-if="i.children&&i.children.length==0">{{i.name}}</el-menu-item>
               <el-submenu :index="i.path" v-if="i.children&&i.children.length>0">
                  <template slot="title">{{i.name}}</template>
                  <el-menu-item :index="j.path" v-for="(j,index) in i.children" :key="index">{{j.name}}</el-menu-item>
               </el-submenu>
          </div>
       </el-submenu>
      </div>
    </el-menu> -->
    <!-- <div>
      <iframe id="fram_box" :src="path" style="width:100%;height:500px" frameborder="0"></iframe>
    </div> -->



  </div>
</template>

<script>
import {
  getAuthMenu
} from '@/api/user.js'
  export default{
    data(){
      return{
        permission_routes:[],
        activeIndex:'',
        path:''
      }
    },
    created() {
      this.getPer()

    },
    methods:{
      getPer(){
    
        getAuthMenu().then(res=>{
          for(var k of res){
            if(k.visible===0){
              this.permission_routes.push(k)
             
            }


            // if(k.name=='资料管理'){
            //   for(var c of k.children){
            //     if(c.name=='安全生产标准化1'){

            //     }
            //   }
            // }
          }
        })
        console.log("this.permission_routes",this.permission_routes)
      },
      handleSelect(key,path){
        console.log(key,path)
        this.path = ""+key
        this.$router.push({ path: this.path })

        // const iframeBox = document.getElementById('fram_box')
        // const doc = iframeBox.contentWindow.document
        // doc.remove(".sidebar-container")
        // var sidbar = doc.getElementsByClassName("main-container")[0]
        // sidbar.style.marginLeft = "0!important"
        // console.log("iframeBox",sidbar)
      },
    }
  }
</script>

<style scoped>
  .menuwrap{
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    background-color: #fff;
    padding:20px;
    font-size: 18px;
  }
  .menuwrap>div{
    flex-basis: 33%;
    /* margin:1%; */

  }
/*  .firstmenu{
    background-color: #fff;
    border:1px solid #ddd;
    font-size: 20px;
    color:#333;
    padding:10px 20px
  } */
  .firstmenu,.submenu,.thirdmenu{
    display: flex;
    align-items: center;
  }
  .firstmenu>div{
    margin:5px 10px
  }
  .submenu{
    margin:5px 0;
  }
  .thirdmenu{
    margin:5px 10px;
    margin-left:0
  }
  .thirdmenu>div{
    margin-right:10px
  }
</style>
