import { Component, OnInit } from '@angular/core';
import { HighlightResult } from 'ngx-highlightjs'; 
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'app-left-right-layout',
  templateUrl: './left-right-layout.component.html',
  styleUrls: ['./left-right-layout.component.scss']
})
export class LeftRightLayoutComponent implements OnInit {

  constructor(private message: NzMessageService) { }

  response: HighlightResult;

  typeScriptCode =
  `import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-sub-left-right-layout',
  templateUrl: './sub-left-right-layout.component.html',
  styleUrls: ['./sub-left-right-layout.component.scss']
})
export class SubLeftRightLayoutComponent implements OnInit {

  constructor(
    private router: Router
  ) { }

  menuDatas=[];
  menu = [];
  ngOnInit() {
    this.menuDatas = [
      {children: null,fatherId: 0,id: 1,isEnable: "1",menuName: "layer1",menuUrl: "layer1/layer1",remark: null,weight: 1},
      {children: [
        {children: null,fatherId: 2,id: 21,isEnable: "1",menuName: "左右布局",menuUrl: "layer2/left-right-layout",remark: null,weight: 1},
        ],
      fatherId: 0,id: 2,isEnable: "1",menuName: "layer2",menuUrl: "layer2",remark: null,weight: 2}
    ];
    this.menu = this.extractMenuTree(this.menuDatas);
  }

  //TODO 提取菜单树方法
  extractMenuTree(data) {
    let treeNodes = [];
    for (const item of data) {
      let nodeData
      if (item.isEnable && item.isEnable === '1') {
        nodeData = {
          title: item.menuName,
          link: "",
          path: "/" + item.menuUrl,
          children: []
        }
        if (item.children && item.children.length > 0) {
          nodeData.children = this.extractMenuTree(item.children)
        }
        treeNodes.push(nodeData)
      }
      
    }
    console.log("treeNodes", treeNodes);
    return treeNodes
  }

  // TODO 点击菜单
  clickMenu(item) {
    event.stopPropagation();
    if (item.children && item.children.length > 0) {
      return
    } else {
      this.router.navigate([item.path]);
    }
  }
}
  `;

  htmlCode = 
  `<nz-layout class="layout">
  <nz-header nz-row nzType="flex" nzJustify="space-around" nzAlign="middle">
      <div nz-col nzSpan="4" [nzXs]='4' [nzSm]='4' [nzMd]='4' [nzLg]='4' [nzXl]='4' [nzXXl]='4' style="height: 100%;">
          <div nz-col class="logo" style="height: 100%;"><img style="width: 12rem;height: 5.6rem"
                  src="./assets/img/layout/logo.png" /></div>
      </div>
      <div nz-col nzSpan="20" nz-row nzType="flex" nzJustify="space-around" nzAlign="middle" [nzXs]='20' [nzSm]='20'
          [nzMd]='20' [nzLg]='20' [nzXl]='20' [nzXXl]='20' class="login_pannl">
      </div>
  </nz-header>

  <nz-layout>
      <div class="leftbanner">
          <nz-sider id="silder" nzTheme="light" nzCollapsible="true" [(nzCollapsed)]="isCollapsed"
              [nzBreakpoint]="'xl'" [nzWidth]="200" [nzTrigger]="null">
              <div class="placeholder"></div>
              <ul nz-menu nzTheme="light" nzMode="inline" [nzInlineCollapsed]="isCollapsed" class="siderul">
                  <ng-container *ngFor="let nav of menu">
                      <li nz-submenu *ngIf="nav.children.length > 0 " class="menu-list" (click)="clickMenu(nav)">
                          <span title >
                              <i nz-icon nzType="appstore"></i>
                              <span>{{nav.title}}</span>
                          </span>
                          <ul>
                              <ng-container *ngFor="let item of nav.children;">
                                  <li nz-submenu *ngIf="item.children.length > 0 " (click)="clickMenu(item)">
                                      <span title>
                                          <span>{{item.title}}</span>
                                      </span>
                                      <ul>
                                          <ng-container *ngFor="let inneritem of item.children;">
                                              <li nz-submenu *ngIf="inneritem.children.length > 0 "
                                                  (click)="clickMenu(inneritem)">
                                                  <span title>
                                                      <span>{{inneritem.title}}</span>
                                                  </span>
                                                  <ul>
                                                      <ng-container *ngFor="let fouritem of inneritem.children">
                                                          <li nz-submenu *ngIf="fouritem.children.length > 0 "
                                                              (click)="clickMenu(fouritem)">
                                                              <span title>
                                                                  <span>{{fouritem.title}}</span>
                                                              </span>
                                                          </li>
                                                          <li nz-menu-item *ngIf="fouritem.children.length == 0 "
                                                              (click)="clickMenu(fouritem)">
                                                              <span title>
                                                                  <span>{{fouritem.title}}</span>
                                                              </span>
                                                          </li>
                                                      </ng-container>
                                                  </ul>
                                              </li>
                                              <li nz-menu-item *ngIf="inneritem.children.length == 0 "
                                                  (click)="clickMenu(inneritem)">
                                                  <span title>
                                                      <span>{{inneritem.title}}</span>
                                                  </span>
                                              </li>
                                          </ng-container>
                                      </ul>
                                  </li>
                                  <li nz-menu-item *ngIf="item.children.length == 0 " (click)="clickMenu(item)">
                                      <span title>
                                          <span>{{item.title}}</span>
                                      </span>
                                  </li>
                              </ng-container>
                          </ul>
                      </li>
                      <li nz-menu-item *ngIf="nav.children.length == 0" class="menu-list" (click)="clickMenu(nav)">
                          <span title>
                              <i nz-icon nzType="appstore"></i>
                              <span>{{nav.title}}</span>
                          </span>
                      </li>
                  </ng-container>
              </ul>
          </nz-sider>

          <div class="switch">
              <i nz-icon class="trigger" [nzType]="isCollapsed ? 'double-right' : 'double-left'" nzTheme="outline"
                  (click)="isCollapsed = !isCollapsed"></i>
          </div>
      </div>
      <nz-content class="rightcontent">
          <div class="inner-content">
              <router-outlet>
              </router-outlet>
          </div>
      </nz-content>
  </nz-layout>
</nz-layout>
<ng-template #zeroTrigger>
  <i nz-icon nzType="menu-fold"></i>
</ng-template>
  `;

  scssCode = 
  `@import "src/styles.scss";
nz-layout {
  background: $body-background;
}
  
.layout {
  width: 100%;
  height: 100%;

  .login_pannl {
    height: 100%;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .pannel {
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      margin: 0 1rem;
    }
  }

  .rightcontent {
    margin-top: 0.5%;
  }

  .inner-content {
    width: 99.5%;
    margin-left: 0.5%;
    min-height: 99%;
    background: $content-background;
  }

  .leftbanner {
    margin-top: 0.5%;
    display: flex;
    flex-wrap: nowrap;
    background: $content-background;

    .menu-list {
      margin-top: 1.4rem;
    }
  }

  .switch {
    display: flex;
    width: 100%;
    align-items: center;
    background: $content-background;
  }
}
  
#silder {
  font-size: 1.4rem;
  overflow-y: auto;
  overflow-x: hidden;
  background: $content-background;
  width: 90%;
  display: flex;
  flex-direction: column;

  &::-webkit-scrollbar {
    width: 0.11rem;
  }

  .ant-menu-inline {
    border: 0;
  }

  .ant-menu {
    background: 0;
    background-color: 0;
  }

  .innerul {
    .ant-menu {
      background: 0;
      background-color: 0;
    }
  }
}

nz-header {
  background: $header-background;
  color: $header-color;
  line-height: 0;
  padding: 0;
  height: 4.8rem;

  .ant-row {
    height: 100%;
  }

  .login_pannl {
    line-height: 100%;
    text-align: right;
    padding: 0 1rem;
  }

  .logo {
    // height: 8%;
    min-height: 3.5rem;
    height: 100%;
    display: inline-block;
  }
}

nz-breadcrumb {
  height: 5%;
  padding: 0.5% 0;
  font-size: 1.4rem;
}

nz-footer {
  text-align: center;
  padding: 1rem;
}

:host ::ng-deep {
  .ant-menu-sub.ant-menu-inline {
    background: $content-background;
  }

  .ant-menu-inline,
  .ant-menu-vertical,
  .ant-menu-vertical-left {
    border-right: unset
  }
}

.placeholder { //占位
  margin: 0 16px;
}  
  `;
  ngOnInit() {
  }

  copied($event) {
    if ($event.isSuccess) {
      this.message.success('复制成功')
    }
  }
}