<my-info   [msg]="msg" (msg_)="msg_($event)"></my-info>
<!--<my-content-header [firstName]="firstName" [secondName]="secondName"></my-content-header>-->
<section class="content-header">
  <h1>
    {{secondName}}
    <small>{{firstName}}</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
    <li><a href="#">{{firstName}}</a></li>
    <li class="active">{{secondName}}</li>
  </ol>
</section>


<!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-md-6">
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title">导航菜单</h3>
          <div class="btn-group" style="margin-left:10px;">
            <button *ngIf="addTMenuButton" type="button" class="btn btn-info" routerLink="../tMenuAdd" ><i class="fa fa-plus"></i></button>
            <button *ngIf="editTMenuButton" type="button"  class="btn btn-info" (click)="updateMenu()"><i class="fa fa-pencil"></i></button>
            <button *ngIf="deleteTMenuButton" type="button" class="btn btn-info" (click)="deleteMenu()"><i class="fa fa-trash"></i></button>
          </div>

          <div class="box-tools">
            <div class="input-group input-group-sm" style="width: 150px;">
              <input type="text" name="table_search" class="form-control pull-right" placeholder="Search">

              <div class="input-group-btn">
                <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
              </div>
            </div>
          </div>
        </div>
        <!-- /.box-header
                [dataReader]="'data'" [pageSize]="2"
                [title]="'菜单列表'" [httpMethod]="'get'"
                [httpUrl]="'assets/data/menus.json'"
                (selectedRecord)="selectedMenu1($event)">
         -->
        <div class="box-body">
          <amexio-card-pane>
            <amexio-pane-body>
              <amexio-tree-data-table  [pageSize]="2"
                [title]="'菜单列表'" [dataTableBindData]="menuTree"
                (selectedRecord)="selectedMenu1($event)" >
                <amexio-data-table-column [dataIndex]="'title'" [dataType]="'string'" [hidden]="false" [text]="'名称'"></amexio-data-table-column>
                <amexio-data-table-column [dataIndex]="'code'" [dataType]="'string'" [hidden]="false" [text]="'编码'"></amexio-data-table-column>
                <amexio-data-table-column [dataIndex]="'icon'" [dataType]="'string'" [hidden]="false" [text]="'图标'"></amexio-data-table-column>
              </amexio-tree-data-table>
            </amexio-pane-body>
          </amexio-card-pane>
          <div >选中菜单：<span style="font-weight: bold;">{{selectedMenu.title}}</span></div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
    <div class="col-md-6">
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title">元素</h3>
          <div class="btn-group" style="margin-left:10px;">
            <button *ngIf="addTElementButton" type="button" class="btn btn-info" (click)="addElement()"  ><i class="fa fa-plus"></i></button>
            <button *ngIf="editTElementButton" type="button" class="btn btn-info" (click)="updateElement()"><i class="fa fa-pencil"></i></button>
            <button *ngIf="deleteTElementButton" type="button" class="btn btn-info" (click)="deleteElement()"><i class="fa fa-trash"></i></button>
          </div>

          <div class="box-tools">
            <div class="input-group input-group-sm" style="width: 150px;">
              <input type="text" name="table_search" class="form-control pull-right" placeholder="Search">

              <div class="input-group-btn">
                <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
              </div>
            </div>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <table class="table table-bordered table-hover ">
            <tr>
              <th></th>
              <th>名称</th>
              <th>uri</th>
              <th>method</th>
            </tr>
            <tr *ngFor="let element of elementList" (click)="radio.checked=true;selectedElement=element;" >
              <td>
                <input type="radio" name="r1" class="minimal" #radio >
              </td>
              <td>{{element.name}}</td>
              <td>{{element.uri}}</td>
              <td>{{element.method}}</td>
            </tr>
          </table>
         <!-- <amexio-card-pane>
            <amexio-pane-body>
              <amexio-tree-data-table
                [dataReader]="'data'" [pageSize]="2"
                [title]="'元素列表'" [httpMethod]="'get'"
                [httpUrl]="'assets/data/elements.json'"
                (selectedRecord)="selectedElement = $event">
                <amexio-data-table-column [dataIndex]="'name'" [dataType]="'string'" [hidden]="false" [text]="'名称'"></amexio-data-table-column>
                <amexio-data-table-column [dataIndex]="'uri'" [dataType]="'string'" [hidden]="false" [text]="'uri'"></amexio-data-table-column>
                <amexio-data-table-column [dataIndex]="'method'" [dataType]="'string'" [hidden]="false" [text]="'method'"></amexio-data-table-column>
              </amexio-tree-data-table>
            </amexio-pane-body>
          </amexio-card-pane>
          {{selectedElement}}-->
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
  </div>
</section>

