import { Component, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';
import { HttpClient } from '@angular/common/http';
import { AddroleComponent } from './addrole/addrole.component';
import { EditroleComponent } from './editrole/editrole.component';
import { TreeService } from 'src/app/service/tree.service';
import { MenusComponent } from './menus/menus.component';
@Component({
  selector: 'app-role',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.scss']
})
export class RoleComponent implements OnInit {


  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient, private toTree: TreeService) { }

  ngOnInit(): void {
    this.getAllRoles()

    this.loadMore()

    this.getAllMenus()
  }

  listOfData: any[] = [];

  //获取角色列表

  getAllRoles() {
    let params = {
      SkipCount: '0',
      MaxResultCount: '999'
    }
    this.http.get('/api/services/app/Role/GetAll', {
      params: params
    }).subscribe((data: any) => {
      console.log('角色列表', data.result.items)
      this.listOfData = data.result.items
    })
  }

  totalCount
  nodes
  getAllMenus() {
    let params = {
      SkipCount: '0',
      MaxResultCount: '999'
    }
    this.http.get('/api/services/app/Menu/GetAll', {
      params: params
    }).subscribe((data: any) => {
      // console.log(666, data)
      this.totalCount = data.result.totalCount
      data.result.items.forEach(element => {
        element.key = element.id
        element.title = element.name
        element.selectable = false
      });
      this.nodes = [...this.toTree.toTree(data.result.items)]
    })
  }

  addRole(): void {
    const modal = this.modal.create({
      nzTitle: '新增角色',
      nzContent: AddroleComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzWidth: 400,
      nzComponentParams: {
        nodes: this.nodes
      },
      nzMaskClosable: false,
      nzOnOk: async () => {
        if (instance.validateForm.valid) {
          await new Promise(resolve => {
            console.log('表单信息', instance.validateForm)
            let arr = []
            instance.validateForm.value.power.forEach(element => {
              arr.push(element.name)
            });
            let body = {
              name: instance.validateForm.value.name,
              DisplayName: instance.validateForm.value.name,
              grantedPermissions: arr
            }
            let body2=instance.validateForm.value.menus
            this.http.post('/api/services/app/Role/Create', body).subscribe((data:any) => {
              resolve(data)
              this.http.post('/api/services/app/Role/SetRoleMenus', body2, {
                params: {
                  roleId: data.result.id
                }
              }).subscribe(data => {
                resolve(data)
                
                // this.message.create('success', '分配成功！');

                return true
              })
              this.message.create('success', '创建成功！');
              this.getAllRoles()
              return true
            })
          })
        } else {
          this.message.create('warning', '请填写完整！');
          return false
        }
      }
    });
    const instance = modal.getContentComponent();
    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
  }
  
  edit(item) {
    const modal = this.modal.create({
      nzTitle: '编辑角色',
      nzContent: EditroleComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzWidth: 400,
      // nzOkLoading: true,
      nzComponentParams: {
        data: item,
        optionList: this.optionList,
        nodes: this.nodes
      },
      nzMaskClosable: false,
      nzOnOk: async () => {
        if (instance.validateForm.valid) {
          await new Promise(resolve => {
            console.log('表单信息', instance.validateForm)
            let arr = []
            instance.validateForm.value.power.forEach(element => {
              arr.push(element.name ? element.name : element)
            });
            let body = {
              id: item.id,
              name: instance.validateForm.value.name,
              DisplayName: instance.validateForm.value.name,
              grantedPermissions: arr
            }
            let body2=instance.validateForm.value.menus
            this.http.put('/api/services/app/Role/Update', body).subscribe((data:any) => {
              resolve(data)
              this.http.post('/api/services/app/Role/SetRoleMenus', body2, {
                params: {
                  roleId: data.result.id
                }
              }).subscribe(data => {
                resolve(data)

                // this.message.create('success', '分配成功！');

                return true
              })
              this.message.create('success', '修改成功！');
              this.getAllRoles()
              return true
            })
          })
        } else {
          this.message.create('warning', '请填写完整！');
          return false
        }
      }
    });
    const instance = modal.getContentComponent();
    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    // Return a result when closed
    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
  }

  allotMenus(item) {
    // console.log(item)
    const modal = this.modal.create({
      nzTitle: '分配菜单',
      nzContent: MenusComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzWidth: 400,
      nzComponentParams: {
        data: item,
        nodes: this.nodes
      },
      nzMaskClosable: false,
      nzOnOk: async () => {
        await new Promise(resolve => {
          console.log('表单信息', instance.validateForm)

          // let arr = []
          // let treeData = instance.nzTreeComponent.getCheckedNodeList()
          // console.log('tree', treeData)
          // treeData.forEach(element => {
          //   arr.push(element.key)
          //   if (element.origin.children && element.origin.children.length != 0) {
          //     element.origin.children.forEach(ele => {
          //       arr.push(ele.key)
          //     })
          //   }
          //   if (element.parentNode) {
          //     arr.push(element.parentNode.key)
          //   }
          // });
          let body = instance.validateForm.value.menus
          this.http.post('/api/services/app/Role/SetRoleMenus', body, {
            params: {
              roleId: item.id
            }
          }).subscribe(data => {
            resolve(data)
            this.message.create('success', '分配成功！');
            this.getAllRoles()
            return true
          })
        })
      }
    });
    const instance = modal.getContentComponent();
    // modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    // modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
  }


  optionList = [];
  //获取权限列表
  loadMore() {
    this.http.get('/api/services/app/Role/GetAllPermissions').subscribe((data: any) => {
      this.optionList = data.result.items
      // this.modal.containerInstance.config.nzOkLoading = false
      // console.log('所有权限',data)
    })
  }




  delete(item) {
    console.log(item)
    this.modal.confirm({
      nzTitle: `确定要删除${item.name}这个角色吗?`,
      nzOkText: '确定',
      nzOkType: 'danger',
      nzOnOk: () => {
        this.http.delete('/api/services/app/Role/Delete', {
          params: {
            Id: item.id
          }
        }).subscribe(data => {
          this.message.create('success', '删除成功！');
          this.getAllRoles()
        })
      },
      nzCancelText: '取消',
      nzOnCancel: () => {

      }
    });
  }
}