import { Component } from '@angular/core';

@Component({
  selector: 'apps-idea',
  template: `
    <div class="main-wrap" style="height: 100vh">
      <bixi-layout>
        <bixi-layout-header
          [logoSmall]="logoSmall"
          [logoLarge]="logoLarge">
        </bixi-layout-header>
        <bixi-layout-menu [menus]="menus"></bixi-layout-menu>
        <bixi-layout-content>
          <section class="content">
            <router-outlet></router-outlet>
          </section>
        </bixi-layout-content>
      </bixi-layout>
    </div>
  `,
  styles: [
    `
      .content {
        height: 100%;
        width: 100%;
      }
    `
  ]
})
export class IdeComponent {

  logoSmall = './assets/img/layout-logo-large.svg';
  logoLarge = './assets/img/layout-logo-small.svg';
  open = true;

  menus = [
    {
      title: '基本使用',
      icon: 'bars',
      link: '/idea/table',
      matchRouterExact: true
    },
    {
      title: '搜索表格',
      icon: 'bars',
      link: '/idea/filter',
      matchRouterExact: true
    },
    {
      title: '空表格测试',
      icon: 'bars',
      link: '/idea/empty-table',
      matchRouterExact: true
    },
    {
      title: '表格分页',
      icon: 'bars',
      link: '/idea/table-pagination',
      matchRouterExact: true
    },
    {
      title: '列选择',
      icon: 'bars',
      link: '/idea/table-checkbox',
      matchRouterExact: true
    },
    {
      title: '服务端列选择',
      icon: 'bars',
      link: '/idea/table-checkbox-backend',
      matchRouterExact: true
    },
    {
      title: '高级筛选面板',
      icon: 'bars',
      link: '/idea/filter-advance',
      matchRouterExact: true
    }, {
      title: '权限',
      icon: 'bars',
      link: '/idea/ac',
      matchRouterExact: true
    }, {
      title: '文本标注',
      icon: 'bars',
      link: '/idea/label-text',
      matchRouterExact: true
    }, {
      title: '表格抽取',
      icon: 'bars',
      link: '/idea/label-table',
      matchRouterExact: true
    },
    {
      title: '标签选择',
      icon: 'bars',
      link: '/idea/ts',
      matchRouterExact: true
    }
  ];
}