import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { HttpClientService } from '../../../services/http-client.service';
import { Router } from '@angular/router';
import { NzMessageService, NzModalRef, NzModalService } from 'ng-zorro-antd';
import { Observable } from 'rxjs';

import 'ztree';
declare var $: any;
declare var jQuery: any

@Component({
    selector: 'app-department-management',
    templateUrl: './department-management.component.html',
    styleUrls: ['./department-management.component.scss']
})
export class DepartmentManagementComponent implements OnInit {
    collectionSize: any;
    treeSelected: any;		//树模型-当前选中项
    treeSelectedChild: any; //上级机构选择树
    statusParamsTree: any = {	//获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
        status: 1,
    }
    statusParamsUsers: any = {	//接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
        status: 1,
    }
    public TreeData: any;
    public canDel: any = false;
    public canEdit: any = false;
    public search: any = {
        page_index: '1',
        page_size: '10',
        real_name: '',
    }
    public orgDetail: any = '';	//左侧机构目录当前选中项机构的详情信息
    public sekOrgDetail: any = '';
    public orgSeleted: any = ''; //新增或者修改时，当前选中的所属机构的机构详情信息
    public modifyType: any = '3'; //操作状态 1新增 2修改 3详情
    public parentName: any = '';
    public parentNode: any = '';	//当前选中机构的父级节点
    public userList: any = '';		//机构负责人列表-详情时展示用户列表
    public userSelecteds: any = []; 	//机构负责人已选用户-新增、修改时 
    public userData: any = [];		//用户列表数据
    saveCheck: any = false; //保存检查，保存验证表单 false 还未验证  true 触发了验证
    public visible: any = false;
    public orgSeletedBtn: any = true; //控制机构选择按钮
    validateForm: FormGroup;
    visibleUsers: any = false;
    isLoadingSave: any = false;
    nameOnly: any = true; //系统账号是否唯一 true唯一 false重复
    oldLoginName: any = ''; //修改时，保存原本的系统账号，用于检测唯一性
    checkNameStatus: any = ''; //检测账号唯一性的图标状态
    orgList: any = [];
    confirmModal: NzModalRef;
    constructor(
        private fb: FormBuilder,
        private http: HttpClientService,
        private router: Router,
        private message: NzMessageService,
        private modal: NzModalService,
    ) {
    }

    ngOnInit() {
        $('.tree-box').css('height', (document.documentElement.clientHeight - 106 + 'px'));
        $('.main-content').css('height', (document.documentElement.clientHeight - 106 + 'px'));
        $(window).resize(function () {
            $('.tree-box').css('height', (document.documentElement.clientHeight - 106 + 'px'));
            $('.main-content').css('height', (document.documentElement.clientHeight - 106 + 'px'));
        })
        //表单实例化
        this.validateForm = this.fb.group({
            organization: ['', [Validators.required, Validators.maxLength(20)]],
            shortName: ['', [Validators.maxLength(10)]],
            code: ['', [Validators.required, Validators.maxLength(10)]],
            contact_person: ['', [Validators.maxLength(10)]],
            contact_method: ['', [Validators.maxLength(20)]],
            organization_type: [''],
            address: ['', [Validators.maxLength(30)]],
        });
        this.initTree();
        this.queryTable();
    }
    //新增、修改  type 1新增  2修改
    addModify(type) {
        //数据清空重置
        this.modifyType = type;
        // this.validateForm.reset();
        this.userSelecteds = [];
        this.orgSeleted = '';
        this.checkNameStatus = '';
        this.nameOnly = true;
        // this.validateForm.patchValue({ organization_type: 1, });
        if (type == 1) {
            this.sekOrgDetail = true;
            this.zNodesChild = this.zNodes.concat();
            $.fn.zTree.init($("#treeDemoChild"), this.settingChild, this.zNodesChild);
            this.validateForm.patchValue({
                organization: '',
                shortName: '',
                code: '',
                contact_person: '',
                contact_method: '',
                organization_type: 1,
                address: '',
            });
        } else if (type == 2) {
            this.sekOrgDetail = false;
            let item = this.orgDetail;
            this.zNodesChild = this.zNodes.concat();
            // for (let i = 0; i < this.zNodesChild.length; i++) {
            //     if (this.zNodesChild[i].id === item.id) {
            //         this.zNodesChild.splice(i, 1);
            //         break;
            //     }
            // }
            $.fn.zTree.init($("#treeDemoChild"), this.settingChild, this.zNodesChild);
            this.validateForm.patchValue({
                organization: item.organization,
                shortName: item.shortName,
                code: item.code,
                contact_person: item.contact_person,
                contact_method: item.contact_method,
                organization_type: item.organization_type,
                address: item.address,
            });
            this.orgSeleted = this.parentNode;
            this.userList.forEach(option => {
                option.checked = true;
                option.disabled = false;
                this.userSelecteds.push(option)
            })

        }

    }
    //删除
    delete() {
        this.confirmModal = this.modal.confirm({
            nzTitle: '删除',
            nzContent: '确定删除【' + this.orgDetail.organization + '】?',
            nzOnOk: () => new Promise((resolve, reject) => {
                if (this.userList && this.userList.length > 0) {
                    setTimeout(()=>{
                        this.message.error('删除失败，请删除此机构下的用户后再执行此操作！');
                        reject()
                    },500);
                } else {
                    this.http.delete('/sysapi/setting/organization/delOrgByid/' + this.orgDetail.id).subscribe((json) => {
                        if (json.is_success) {
                            resolve();
                            this.message.success(`删除成功!`);
                            this.initTree();
                        } else {
                            reject();
                            this.message.error(`删除失败!`);
                        }
                    })
                }

            }).catch(() => console.log('Oops errors!'))
        });
    }
    //保存
    submitForm() {
        let pid = '';
        let userList = [];
        this.orgSeleted ? pid = this.orgSeleted.id : pid = '';
        if (this.userSelecteds && this.userSelecteds.length > 0) {
            this.userSelecteds.forEach(item => {
                userList.push({ uid: item.uid })
            })
        }
        let params = Object.assign({}, this.validateForm.value, { pid: pid }, { userList: userList })
        if (this.modifyType == 1) {
            this.http.post('/sysapi/setting/organization/add/', params).subscribe((json) => {
                if (json.is_success) {
                    this.message.success(`新增成功!`);
                    this.initTree();
                } else {
                    this.message.error(`新增失败!`);
                }
            })
        } else if (this.modifyType == 2) {
            this.http.put('/sysapi/setting/organization/updateById/' + this.orgDetail.id, params).subscribe((json) => {
                if (json.is_success) {
                    this.message.success(`修改成功!`);
                    this.initTree();
                } else {
                    this.message.error(`修改失败!`);
                }
            })
        }
    }
    //取消	
    cancel() {
        this.modifyType = 3;
    }
    //保存机构负责人
    userSave() {
        this.userData.forEach(item => {
            if (item.checked && !item.disabled) {
                // 增加数据
                this.userSelecteds = [...this.userSelecteds, item];
            }
        })
        this.visibleUsers = false;
    }
    //保存选择机构
    treeSave() {
        if (this.treeSelectedChild) {
            if (this.sekOrgDetail) {
                //新增
            } else {
                //修改
                if (this.orgDetail && this.orgDetail.id === this.treeSelectedChild.id) {
                    this.message.create('warning', '不能选择自己作为所属机构！');
                    this.close();
                    return;
                }
            }


            this.orgSeleted = this.treeSelectedChild;
            this.close();
            // this.visible = false;
            // this.orgSeletedBtn=false;
        } else {
            //如果没有选择机构,提示请选择机构
            this.message.create('warning', `请选择所属机构！`, { nzDuration: 2000 });
        }
    }
    //打开机构负责人抽屉
    openUsers() {
        this.visibleUsers = true;
        this.queryTable();
    }
    //处理机构负责人选择和数据回填
    userSelect() {
        if (this.userData) {
            this.userData.forEach(item => {
                this.userSelecteds.forEach(option => {
                    if (item.uid == option.uid) {
                        item.checked = true;
                        item.disabled = true;
                    }
                })
            })
        }
    }
    //关闭用户选择抽屉
    closeUser() {
        this.visibleUsers = false;
    }
    //打开机构树抽屉
    open(): void {
        this.treeSelectedChild = '';
        this.visible = true;
    }
    //关闭机构选择页面
    close(): void {
        this.visible = false;
    }
    //删除机构标签
    tagClose(event) {
        // this.orgSeletedBtn=true;
        this.orgSeleted = '';
    }
    //删除机构负责人
    delectConfirm(item) {
        this.userSelecteds = this.userSelecteds.filter(function (option) {
            return item.uid !== option.uid
        })
    }
    //取消删除
    delectCancel() {

    }

    //获取用户列表
    queryTable(): void {
        this.statusParamsUsers.status = 1;
        this.http.get('/sysapi/setting/user/list', this.search).subscribe((json) => {
            if (json.is_success) {
                this.userData = json.body.list;
                this.collectionSize = json.body.total;
                if (json.body.list && json.body.list.length > 0) {
                    this.statusParamsUsers.status = 3;
                    this.userData.forEach(item => {
                        if (this.userSelecteds.length > 0) {
                            this.userSelecteds.forEach(option => {
                                if (item.uid == option.uid) {
                                    item.checked = true;
                                    item.disabled = true;
                                }
                            })
                        } else {
                            item.checked = false;
                            item.disabled = false;
                        }
                    })
                } else {
                    this.statusParamsUsers.status = 4;
                }
            } else {
                this.statusParamsUsers.status = 0;
            }
        })
    }
    //翻页
    pageChange(event) {
        this.search.page_index = event;
        this.queryTable();
    }
    //修改时查询该系统下的所有用户
    queryUserById(): void {
        this.http.get('/sysapi/setting/organization/queryUserById/' + this.orgDetail.id).subscribe((json) => {
            if (json.is_success) {
                this.userList = json.body
            } else {

            }
        })
    }
    //检验编码的唯一性
    checkName() {
        //处理修改的时候，修改的值为原来的值，这时候直接显示验证成功
        if (this.modifyType == 2 && this.validateForm.value.code.trim() == this.oldLoginName) {
            this.nameOnly = true;
            this.checkNameStatus = 'success';
            return false;
        }
        //拿用户输入的机构编码跟机构列表的编码对比，判断编码是否已经存在
        let status = 'true';
        this.orgList.forEach(item => {
            if (this.validateForm.value.code.trim() == item.code) {
                this.checkNameStatus = 'error';
                this.nameOnly = false;
                status = 'false';
                return false;
            }
        });
        if (status == 'true' && this.validateForm.value.code.trim()) {
            this.checkNameStatus = 'success';
            this.nameOnly = true;
        }
    }
    //获取机构列表，树模型数据处理
    initTree() {
        //获取目录列表
        this.statusParamsTree.status = 1;
        this.http.get("/sysapi/setting/organization/list").subscribe(json => {
            if (json.is_success) {
                if (json.body.length > 0) {
                    this.statusParamsTree.status = 3;
                    this.orgList = json.body;
                    let children = [];
                    json.body.forEach(option => {
                        option.name = option.organization;
                        if (option.pid) {
                            option.pId = option.pid;
                        } else {
                            option.pId = 'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
                        }
                    });
                    json.body.push({
                        name: "全部机构",
                        isParent: true,
                        open: true,
                        id: 'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
                    })
                } else {
                    //数据为空
                    this.statusParamsTree.status = 4;
                }
            } else {
                //请求失败
                this.statusParamsTree.status = 0;
            }
            this.zNodes = json.body;
            $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            let node = zTree.getNodes();
            if (json.body.length > 0) {
                if (node[0].children && node[0].children.length > 0) {
                    zTree.selectNode(node[0].children[0])
                    zTree.setting.callback.onClick(null, zTree.setting.treeId, node[0].children[0])
                } else {
                    zTree.selectNode(node[0])
                    zTree.setting.callback.onClick(null, zTree.setting.treeId, node[0])
                }
            }
        })
    }
    //树模型参数设置-左侧机构树
    public zNodes: any[];
    setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        view: {
            showLine: true,
            dblClickExpand: false,
            showIcon: true
        },
        callback: {
            //节点点击事件
            onClick: (event, treeId, treeNode, clickFlag) => {
                this.modifyType = 3;
                this.parentName = '';
                this.parentNode = '';
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                this.treeSelected = treeNode;
                let isTopNode = this.treeSelected.getParentNode();	//是否为顶级节点 true不是顶级节点 false 为顶级节点
                if (isTopNode) {	//子节点
                    this.orgDetail = treeNode;
                    this.oldLoginName = this.orgDetail.code;
                    this.queryUserById();
                    if (this.treeSelected.children && this.treeSelected.children.length > 0) {
                        this.canDel = false;
                        this.canEdit = true;
                    } else {
                        this.canDel = true;
                        this.canEdit = true;
                    }
                    if (isTopNode.id == 'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc') {
                        //除去全部机构这层的第一层 也就是实际意义的顶层
                    } else {
                        this.parentName = isTopNode.name;
                        this.parentNode = isTopNode;
                    }
                } else {	//顶级节点
                    this.orgDetail = '';
                    this.canDel = false;
                    this.canEdit = false;
                }
            },
        },
    };
    //树模型参数设置-右侧机构树
    public zNodesChild: any[];
    settingChild = {
        data: {
            simpleData: {
                enable: true
            }
        },
        view: {
            showLine: true,
            dblClickExpand: false,
            showIcon: true
        },
        callback: {
            //节点点击事件
            onClick: (event, treeId, treeNode, clickFlag) => {
                var zTree = $.fn.zTree.getZTreeObj("treeDemoChild");
                this.treeSelectedChild = treeNode;
            },
        },
    };

}