<template>
  <el-container>
    <el-header height="1rem" class="header">
      <header-component/>
    </el-header>
    <el-container class="body">
      <el-aside  class="layer-menu" width="3.1rem">

        <!--<el-input-->
          <!--placeholder="输入关键字进行过滤"-->
          <!--v-model="filterText">-->
        <!--</el-input>-->
        <el-tree
          class="layer-menu-tree"
          node-key="id"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
          ref="menuTree"
          @current-change="showTreeNode"
          :render-content="renderContent">
        </el-tree>
      </el-aside>
      <el-container>
        <router-view class="main-body"/>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
  /**
   * 本页负责与权限联动的动态报表展示
   *
   *  version = "1.0.0";
   *  author = "徐飞";
   *  email = "xu.fei@data-u.com";
   * */
  import routerUserMenu from '@/mixins/router-user-menu'
  import headerComponent from '@/components/header-component'
  import {toTree} from '@/utils/util'

  export default {
    name: 'App',
    components: { headerComponent },
    mixins: [routerUserMenu],
    data () {
      return {
        /* 树过滤条件 */
        filterText: '',
        /* 接口返回的树 */
        menu: [],

        /* 树组件配置 */
        defaultProps: {
          children: 'children',
          label: 'name'
        },

      }
    },
    watch: {
      /* 监听树过滤条件 */
      filterText(val) {
        this.$refs.menuTree.filter(val);
      }
    },
    computed: {
      /* 转换数据格式 */
      treeData:{
        get: function(){
          let tree=this.menu
          // 线性数组转成树后渲染
          let defaultProps={
            id: 'menuCode',
            parent_id: 'pcode',
            label: 'menuName'
          }
          let newTree=toTree(tree,'0',defaultProps)
          let root={
            id: '0',
            children: newTree,
            name: '自助报表',
            data:{
              id: '0',
              menuCode: '0',
              menuName: '自助报表'
            }
          }
          return newTree
        }
      }
    },
    mounted () {
      this.getTree()
    },
    methods: {
      /* 获取整个树 */
      getTree(){
        this.$api.menu.getTree().then(res=>{
          if(res.code==1){
            this.menu=res.data
            if(this.$route.name === 'AutoReportLayer'){
              this.$nextTick(()=>{
                let data=this.treeData
                if(data.length>0){
                  let menuCode=data[0].data.menuCode
                  this.$refs.menuTree.setCurrentKey(menuCode)
                  this.viewNode(menuCode)
                }
              })
            }else{
              let {id}=this.$route.params
              this.$nextTick(()=> {
                this.$refs.menuTree.setCurrentKey(id)
              })
            }

          }
        })
      },

      /* 点击查看 */
      showTreeNode( data, store){
        this.viewNode(data.data.menuCode)
      },

      viewNode(menuCode){
        this.go('AutomaticMenuReport',{id: menuCode})
      },

      // 修改节点文本，自定义图标，return内是jsx语法
      renderContent(h, { node, data, store }) {
        if(node.level == 1){
          return (
            <div class='tree-node' on-click={() => this.showTreeNode(node, data, store)}>
              <span >{node.label}</span>
            </div>
          )
        }
        return (
          <div class='tree-node' on-click={() => this.showTreeNode(node, data, store)}>
            <span >{node.label}</span>
          </div>
        )
      },

    }
  }
</script>
