<template>
  <aside class="aside-tree">
    <h3 class="aside-header">{{ headerTitle }}</h3>
    <nav class="tree-box">
      <el-tree
        :data="treeData"
        node-key="id"
      />
    </nav>
  </aside>
</template>

<script>
export default {
  name: 'AsideTree',
  props: {
    headerTitle: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      treeData: [
        {
          id: 1,
          label: 'Level 1 - 1',
          children: [
            {
              id: 4,
              label: 'Level 2 - 1-1',
              children: [
                {
                  id: 9,
                  label: 'Level 3 - 1-1-1'
                },
                {
                  id: 10,
                  label: 'Level 3 - 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: 'Level 1 - 2',
          children: [
            {
              id: 5,
              label: 'Level 2 - 2-1'
            },
            {
              id: 6,
              label: 'Level 2 - 2-2'
            }
          ]
        },
        {
          id: 3,
          label: 'Level 1 - 3',
          children: [
            {
              id: 7,
              label: 'Level 2 - 3-1'
            },
            {
              id: 8,
              label: 'Level 2 - 3-2'
            }
          ]
        }
      ]
    }
  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
@import "element-ui/lib/theme-chalk/tree.css";
@import "element-ui/lib/theme-chalk/menu.css";
@import "element-ui/lib/theme-chalk/scrollbar.css";
.aside-tree {
  padding: 0;
  .aside-header {
    margin: 0;
    padding: 1.5rem 0;
    text-indent: 2.125rem;
    color: #fff;
    background-color: #015fe8;
    font-size: 1.25rem;
    font-weight: bold;
  }
  .tree-box {
    padding: .625rem .625rem;
    background-color: #f5f7f9;
    border: .0625rem solid #d9dde0;
  }
}

// 特殊样式小屏幕处理
@media screen and (max-width:400px) {
  
}

</style>