import { Component, OnInit, Input, ViewChild, ElementRef, Renderer2, Output, EventEmitter, ViewEncapsulation, ChangeDetectorRef, Injector } from '@angular/core';
import { UploaderOptions, FUploadFileExtend } from '@farris/extend-file-upload';
import { NotifyService } from '@farris/ui-notify';
import { LocaleService } from '@farris/ui-locale';
import { ValueConfig, MsgInfo, editAttachFile } from './discussion-editor.interface';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';

@Component({
    selector: 'farris-discussion-editor',
    templateUrl: './discussion-editor.component.html',
    styleUrls: ['./discussion-editor.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class DiscussionEditorComponent implements OnInit {
    @Input() personnelsPrimaryKey: string = 'id';
    @Input() personnelsDisplayKey: string = 'name';
    @Input() replyPersonnelsDisplayKey: string = 'userName';
    // @Input() personnels: Array<any> = [];
    // @Input() permissionList: Array<any> = [
    //     { value: 'ALL', text: this.localeService.getValue('discussionGroup.all') },
    //     { value: 'RELATED', text: this.localeService.getValue('discussionGroup.related') }
    // ];
    @Input() cancelVisible: boolean = true;
    @Input() editHeight: number = 130;

    @Input() type: string = 'user';
    @Input() orgUrl:string;
    @Input() personSearchUrl:string;
    // 需要的树数据
    // @Input() treeData: any[];
    // 左侧树的主键字段
    @Input() treeIdField: string;
    @Input() treeDisplayText: string;
    @Input() sectionData:any[];
    // 用户角色
    // @Input() groupList: any[] = [];

    options: UploaderOptions;
    placeholder:string;
    sectiontreeData:Array<any>;
    // 人事弹窗列表数据
    private _personnels: Array<any> = [];

    get personnels() {
        return this._personnels;
    }
    @Input() set personnels(val) {
        if (val) {
            this._personnels = val;
            this.innerPersonnels = this._personnels;
            this.copyPersonnels = this._personnels;
            // this.copyPersonnels = this._personnels;
        }
    }

    // 人事弹窗列表数据
    private _replyUser;

    get replyUser() {
        return this._replyUser;
    }
    @Input() set replyUser(val) {
        if (val) {
            this._replyUser = val;
            if(this._replyUser['id']){
                this.editorFocus();
            }
        }
    }

    _attachFiles: FUploadFileExtend[];
    get attachFiles() {
        return this._attachFiles;
    }
    @Input() set attachFiles(val) {
        if (val) {
            this._attachFiles = val;
        }
    }

    // 新建还是维护自定义角色
    // @Output() customGroupChange = new EventEmitter<any>();
    // 对外暴露数据
    @Output() selectionsChange = new EventEmitter<any>();
    // 选中的行
    @Output() lineDataChange = new EventEmitter<any>();
    // 对外
    @Output() valueChange = new EventEmitter<ValueConfig>();
    /** 附件预览 */
    @Output() filePreview = new EventEmitter();
    /** 附件删除 */
    @Output() fileRemove = new EventEmitter();
    @Output() fileUploadDone = new EventEmitter();
    @Output() personnelSearch = new EventEmitter();
    @Output() getOugUsers = new EventEmitter();
    @ViewChild('editor') editor;
    @ViewChild('personModal') personModal;
    // @ViewChild('searchInput') searchInput;
    // 审批意见
    textValue: string = '';
    // 暂存文本框的输入，解决焦点问题
    tempTextValue: string;
    // 暂存人员信息
    tempPersonnelsValue: string = '';
    // 暂存部门
    tempSectionValue: string = '';
    // 搜索人事管理弹窗
    personModalVisible = false;
    // 选择要发送的人员列表
    selectedPersonnels: Array<any> = [];
    // 选择要发送的部门
    selectedSection: Array<any> = [];
    // 搜索文本框中绑定的值
    personnelText;
    // 暂存人员信息，用于搜索
    copyPersonnels: Array<any> = [];
    innerPersonnels: Array<any> = [];
    el: ElementRef;
    // 避免重复输入的token
    token: boolean;
    relativeVisible: boolean = false;
    permission: any;
    //上传附件是否显示
    attachFilesModalVisible = false;
    pageSize:number = 20;
    searchPersonnelList:any = {};
    showSearchList:boolean = false;
    permissionList: Array<any> = [];
    localeService: LocaleService;
    groupIcon = '<span class="f-icon f-icon-search"></span>';
    constructor(
        private renderer: Renderer2,
        private elementRef: ElementRef,
        private cd: ChangeDetectorRef,
        private notifyService: NotifyService,
        private injector: Injector,
        private http: HttpClient,
    ) { 
        this.localeService = this.injector.get(LocaleService);
    }

    ngOnInit() {
        const self = this;
        this.renderer.listen(document, 'click', function (event) {
            self.personModalVisible = false;
            self.relativeVisible = false;
        });
        // this.copyPersonnels = this.personnels;
        this.el = this.elementRef.nativeElement;
        this.permissionList = [
            { value: 'ALL', text: this.localeService.getValue('discussionGroup.all') },
            { value: 'RELATED', text: this.localeService.getValue('discussionGroup.related') }
        ]
        this.permission = this.permissionList[0];
        this.options = { maxUploads: 3, maxFileSize: 10240, allowedContentTypes: ['.jpg', '.pdf'] };
        this.placeholder = this.localeService.getValue('discussionGroup.placeholder');
    }

    /**
     * 单个附件上传完成
     * @param ev 
     */
    fUploadDoneHandler(ev) {
        this.fileUploadDone.emit(ev);
    }
    /**
     * 上传附件中单个附件删除完成
     * @param ev 
     */
    fUploadRemovedHandler(ev) {
       // console.log('fUploadRemovedHandler');
       // console.log(ev);
    }
    /**附件列表中预览 */
    filePreviewEventHandler(info) {
        this.filePreview.emit(info);
    }
    /**附件列表中删除 */
    fileRemoveEventHandler(file) {
        this.fileRemove.emit(file);
    }

    // 文本框失去焦点触发
    setTextValue(e = null) {
        if (e) {
            // console.log(e.target.innerHTML);
            this.tempTextValue = e.target.innerHTML;
            this.textValue = this.tempTextValue;
        }
        // if (this.tempTextValue) {
        //     this.textValue = this.tempTextValue
        // }
        if (this.tempPersonnelsValue) {
            this.textValue += this.tempPersonnelsValue;
        }
        if(this.tempSectionValue){
            this.textValue += this.tempSectionValue;
        }
        this.tempTextValue = '';
        this.tempPersonnelsValue = '';
        this.tempSectionValue = '';
    }

    // 监听键盘事件, 主要是用于删除@人
    listenEditorValueChange(e) {
        this.tempTextValue = e.target.innerHTML;
        const children = e.target.children;
        const childrenId = [];
        for (let i = 0; i < children.length; i++) {
            childrenId.push(children[i].id);
        }
        this.selectedPersonnels.forEach((personnel, index) => {
            if (!childrenId.includes(personnel[this.personnelsPrimaryKey])) {
                this.selectedPersonnels.splice(index, 1);
            }
        });
        this.selectedSection.forEach((section, index) => {
            if (!childrenId.includes(section[this.personnelsPrimaryKey])) {
                this.selectedSection.splice(index, 1);
            }
        });
        if (!this.tempTextValue) {
            this.tempTextValue = '';
        }
    }

    /**
     * 搜索人员
     */
    serachPersonnel() {
        // if (this.personnelText) {
        //     this.innerPersonnels = this.copyPersonnels.filter(item => {
        //         if(item[this.personnelsDisplayKey]){
        //             return item[this.personnelsDisplayKey].indexOf(this.personnelText) !== -1;
        //         }
        //     })
        // }
        // else {
        //     this.innerPersonnels = this.copyPersonnels;
        // }
        if(this.personnelText){
            this.showSearchList = true;
            this.getSearchData(this.personnelText,0).subscribe(d=>{
                if(d.hasOwnProperty("users")){
                    this.searchPersonnelList = d;
                    this.setPersonModalPosition();
                }
            });
        }
        else{
            this.showSearchList = false;
        }
        // this.searchInput.nativeElement.blur();
        //暂时注释掉服务器端查询
        // this.personnelSearch.emit(this.personnelText);
    }
    /**
     * 搜索下一页
     */
    getMoreSearchData(){
        this.getSearchData(this.personnelText,this.searchPersonnelList.pageIndex + 1).subscribe(d=>{
            if(d.hasOwnProperty("users")){
                this.searchPersonnelList.pageIndex = d['pageIndex'];
                this.searchPersonnelList['users'] = [...this.searchPersonnelList['users'],...d['users']];
            }
        });
    }

    getSearchData(text:string,pageIndex:number,pageSize:number = this.pageSize){
        if(this.personSearchUrl){
            const url = `${this.personSearchUrl}?param=${text}&pageSize=${pageSize}&pageIndex=${pageIndex}`;
            //console.log(url);
            return this.http.get(url);
            //return this.http.get('assets/data/discussionPerson3.json');
        }
        else{
            return of(true);
        }
    }

    personnelChecked(item){
        item.active = !item.active;
        this.innerPersonnels = this.innerPersonnels.map(o => ({ ...o }));
        this.cd.markForCheck();
        this.appendPersonnels();
    }

    // 增加@人员
    appendPersonnels() {
        let selectedList = [];
        if(!this.showSearchList){
            selectedList = this.innerPersonnels.filter(item => item.active === true);
        }
        else{
            selectedList = this.searchPersonnelList['users'].filter(item => item.active === true);
        }
        if (selectedList.length) {
            this.appendPersonnel(selectedList);
        }
        this.resetPersonnels();
        this.setTextValue();
        this.personModalVisible = false;
    }
    //高级搜索人员添加
    appendPersonnelsList(listData) {
        if (listData.length) {
            this.appendPersonnel(listData, true);
        }

        this.setTextValue();
    }
    //循环增加人员
    appendPersonnel(listData, external = false) {
        listData.forEach(item => {
            if (this.selectedPersonnels.length && this._isInArray(item[this.personnelsPrimaryKey], this.personnelsPrimaryKey, this.selectedPersonnels)) {
                return;
            } else {
                //if (!external) {
                this.tempPersonnelsValue += '<a name="personnel" contenteditable="false" class="at-user" id="' + item[this.personnelsPrimaryKey] + '" userid="' + item[this.personnelsPrimaryKey] + '">@' + item[this.personnelsDisplayKey] + '</a>&nbsp;';
                // }
                // else {
                //     this.tempPersonnelsValue += '<a name="personnel" contenteditable="false" class="at-user" id="' + item[this.personnelsPrimaryKey] + '" userid="' + item[this.personnelsPrimaryKey] + '">@' + item[this.replyPersonnelsDisplayKey] + '</a>';
                // }
                this.selectedPersonnels.push(item);
            }
        })
    }
    /**
     * 添加部门
     * @param listData 
     */
    appendSectionList(listData){
        if(listData.length){
            this.appendSection(listData);
        }
        this.setTextValue();
    }

    appendSection(listData,) {
        listData.forEach(item => {
            if (this.selectedSection.length && this._isInArray(item[this.personnelsPrimaryKey], this.personnelsPrimaryKey, this.selectedSection)) {return;} 
            else {
                this.tempSectionValue += '<a name="org" contenteditable="false" class="at-org" id="' + item[this.personnelsPrimaryKey] + '" orgid="' + item[this.personnelsPrimaryKey] + '">@' + item['name'] + '</a>&nbsp;';
                this.selectedSection.push(item);
            }
        })
    }


    // 判断是否在数组
    private _isInArray(value: any, fieldInArray: string, array: any[]) {
        if (!value || !fieldInArray) {
            return false;
        }
        return array.findIndex(item => value === item[fieldInArray]) === -1 ? false : true;
    }

    /**
     * 关闭人事管理弹窗
     */
    resetPersonnels() {
        this.showSearchList = false;
        this.personModalVisible = false;
        this.innerPersonnels = this.copyPersonnels;
        if(this.innerPersonnels.length){
            this.innerPersonnels.forEach(item => item.active = false);
        }
        this.personnelText = '';
        // this.stopBubble(e);
    }

    /**
     * 打开人员管理
     * @param e 事件
     */
    openModalPerson(e) {
        this.personModalVisible = !this.personModalVisible;
        setTimeout(() => {
            if(this.personModalVisible){
                this.setPersonModalPosition();
            }
        }, 0);
        // this.getPersonnelList();
        this.stopBubble(e);
    }
    setPersonModalPosition(){
        let winH = window.innerHeight;
        let ModalBottom = this.personModal.nativeElement.getBoundingClientRect().bottom;
        if(winH < ModalBottom){
            this.personModal.nativeElement.scrollIntoView(false);
        }
    }
    openModalPermission(e) {
        this.relativeVisible = !this.relativeVisible;
        this.stopBubble(e);
    }

    /**
     * 打开上传附件
     */
    openModalFile(e) {
        this.attachFilesModalVisible = !this.attachFilesModalVisible;
        this.stopBubble(e);
    }

    // 阻止冒泡
    stopBubble(e) {
        if (e && e.stopPropagation) {
            e.stopPropagation();
        } else {
            window.event.cancelBubble = true;
        }
    }

    /**
     * 提交评语
     */
    submitApproval() {
        if (!this.textValue) {
            let notEmptyText = this.localeService.getValue('discussionGroup.notEmpty');
            if(notEmptyText){
                this.notifyService.error(notEmptyText);
            }
            return;
        }
        let editAttachFiles: editAttachFile[] = [];
        if (this.attachFiles && this.attachFiles.length) {
            this.attachFiles.forEach(file => {
                let id = file['id'],
                    name = file['name'],
                    size = file['size'],
                    metadataId = file['extend']['metadataId'];
                let attachFile = {
                    id,
                    name,
                    size,
                    metadataId
                }
                editAttachFiles.push(attachFile);
            })
        }
        this.valueChange.emit({
            msgInfo: MsgInfo.Confirm,
            text: this.textValue,
            mailTos: this.selectedPersonnels,
            mailToSections: this.selectedSection,
            visibility: this.permission.value,
            parentId: (this.replyUser && this.replyUser.hasOwnProperty('id')) ? this.replyUser.id : null,
            attachFiles: editAttachFiles.length ? editAttachFiles : null
        });
        this.textValue = '';
        this.selectedPersonnels = [];
        this.selectedSection = [];
        this.attachFiles = [];
        this.replyUser = {};
    }

    cancel() {
        this.valueChange.emit({
            msgInfo: MsgInfo.Cancel,
            text: null,
            mailTos: [],
            mailToSections: [],
            visibility: null,
            parentId: null,
            attachFiles: null
        });
        this.textValue = '';
        this.selectedPersonnels = [];
        this.selectedSection = [];
        this.attachFiles = [];
        this.replyUser = {};
    }
    /**修改查看权限 */
    changePermission(value: string) {
        this.permission = this.permissionList.find(item => item.value === value);
        this.relativeVisible = false;
    }
    //获得焦点
    editorFocus() {
        this.editor.nativeElement.focus();
    }
    // customGroupChangePar(event){
    //     this.customGroupChange.emit(event);
    // }
    /**
     * 高级人员点确认
     */
    selectionsChangePar(event) {
        //this.resetPersonnels();
        if(event.data.users.length){
            let userList = [];
            event.data.users.forEach(user => {
                userList.push(user.data);
            });
            this.appendPersonnelsList(userList);
        }
        if(event.data.section.length){
            let sectionList = [];
            event.data.section.forEach(sec => {
                sectionList.push(sec.data);
            });
            this.appendSectionList(sectionList);
        }
        this.selectionsChange.emit(event);
    }
    /**高级人员中选中某行 */
    lineDataChangePar(event) {
        this.lineDataChange.emit(event);
    }
    /**获得占位头像 */
    getAvatar(item) {
        if (item && item[this.personnelsDisplayKey]) {
            let str = item[this.personnelsDisplayKey];
            return str.substring(str.length - 2, str.length);
        }
        else {
            return '';
        }
    }

    ougUsers(event){
        this.getOugUsers.emit(event);
    }
}