<template>
    <div class="main">
        <div class="nav-box">
            <div class="nav-box-header">
                FBG-UI
            </div>
            <ul class="nav-box-menu">
                <!-- <li class="nav-box-menu-item">组件</li> -->
            </ul>
            <span>版本1.01</span>
        </div>
        <div class="container">
            <div class="layout-left">
              <ul class="menu-box">
                <div v-for="(item, index) in menuList" :key="index">
                  <li class="menu-box-item menu-box-item-title" >{{item.title}}</li>
                  <li :class="'menu-box-item menu-box-item-default ' + ($route.path===child.url?'active':'')" v-for="(child, i) in item.children" :key="i" @click="jumpPage(child.url)">{{child.title}}</li>
                </div>
              </ul>
            </div>
            <div class="layout-right">
              <router-view />
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      menuList: [
        {
          title: '开发指南',
          children: [
            {
              title: '介绍',
              url: '/introduction'
            },
            {
              title: 'ui规范',
              url: '/ui'
            },
            {
              title: '主题色',
              url: '/theme'
            }
          ]
        },
        {
          title: '组件',
          children: [
            {
              title: 'Alert 提示类组件',
              url: '/alert'
            },
            {
              title: 'Input 输入框',
              url: '/input'
            },
            {
              title: 'Button 按钮',
              url: '/button'
            },
            {
              title: 'ButtonGroup 按钮选项组',
              url: '/buttonGroup'
            },
            {
              title: 'Select 下拉选择',
              url: '/select'
            },
            {
              title: 'Dropdown 下拉菜单',
              url: '/dropdown'
            },
            {
              title: 'Checkbox 多选按钮',
              url: '/checkbox'
            },
            {
              title: 'Form 表单',
              url: '/form'
            },
            {
              title: 'Navbar 菜单',
              url: '/navbar'
            },
            {
              title: 'Card 卡片',
              url: '/card'
            },
            {
              title: 'Tooltip  文字提示',
              url: '/tooltip'
            },
            {
              title: 'Table 表格',
              url: '/table'
            },
            {
              title: 'SystemSelect 系统选择',
              url: '/systemSelect'
            },
            {
              title: 'Notice 系统公告',
              url: '/notice'
            },
            {
              title: 'Header 头部',
              url: 'header'
            },
            {
              title: 'Dialog 对话框',
              url: '/dialog'
            },
            {
              title: 'Page 分页器',
              url: '/page'
            },
            {
              title: 'Tagpage 系统标签页',
              url: '/tabpage'
            },
            {
              title: 'Tabs 标签页',
              url: '/tabs'
            },
            {
              title: 'Tree 树形控件',
              url: '/tree'
            },
            {
              title: 'DateTimePicker 时间选择器',
              url: '/timepicker'
            },
            {
              title: 'Calendar 日历选择器',
              url: '/calendar'
            },
            {
              title: 'Upload 上传组件',
              url: '/upload'
            },
            {
              title: 'Message 消息提示组件',
              url: '/message'
            },
            {
              title: 'Popper 提示弹窗',
              url: '/popper'
            }
          ]
        },
      ]
    }
  },
  methods: {
    jumpPage(link) {
      this.$router.push({
        path: link
      });
    }
  }
}
</script>
<style lang="scss">
* {
  font-family: '微软雅黑';
}
div,ul,li,p,span {
  font-size: 14px;
  margin: 0px;
  padding: 0px;
}
.main {
  width: 1100px;
  margin: 0px auto;
}
.nav-box {
  height: 55px;
  line-height: 55px;
  display: flex;
  position: fixed;
  width: 1100px;
  z-index: 99;
  background-color: #fff;
  &-header {
    width: 280px;
    font-weight: 800;
    color: #1989fa;
    font-size: 18px;
  }
  &-menu {
    display: flex;
    flex: 1;
    // justify-content:  flex-end;
    &-item {
      list-style: none;
      width: 100px;
      cursor: pointer;
    }
  }
}
.container {
  padding-top: 55px;
  height: 100%;
  .layout-left {
    position: fixed;
    width: 250px;
    height: 100%;
    overflow-y: auto;
    top: 0px;
    box-sizing: border-box;
    padding-top: 60px;
    .menu-box {
      .active {
        color: #409eff;
      }
      &-item {
        list-style: none;
        &-title {
          font-weight: 600;
          height: 40px;
          line-height: 40px;
          cursor: default;
        }
        &-default {
          height: 30px;
          line-height: 30px;
          cursor: pointer;
          color: #555;
          &:hover {
            color: #409eff;
          }
        }
      }
    }
  }
  .layout-right {
    overflow-y: auto;
    padding-left: 280px;
    min-height: 90vh;

  }
}
</style>