import { Component, OnInit, Input, forwardRef, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { ApiService } from '../services/api.service';
import { AutoCompleteModule } from '../share/primeng/autocomplete/autocomplete';

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => PickAddrComponent),
    multi: true
};

@Component({
    selector: 'pick-addr',
    template: `
    <p-autoComplete
        name="pickAddr"
        [(ngModel)]="value" 
        [placeholder]='defaultLabel'
        [suggestions]="suggestions" 
        field="name" 
        [style]="{'width':'100%'}">
        <ng-template let-brand pTemplate="item">
            <div class="ant-select-dropdown-menu-item">
                {{brand.name}}
            </div>
        </ng-template>
    </p-autoComplete>
    `,
    styles: [`
     :host ::ng-deep .ui-autocomplete-panel {
         background: #fff;
     }
    `],
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class PickAddrComponent implements OnInit {

    /**
     * 数据
     */
    suggestions: any[];
    
    _userCode = "";

    @Input()
    defaultLabel: string = "请选择…";
    @Input()
    multiSelect: boolean = false;
    @Input()
    valueField: string = "";
    @Input()
    styleClass: string;

    @Input() set userCode(code: any) {
        if(this._userCode !== code) {
            this._userCode = code;
            this.queryData(null);
        }
    }

    public onTouchedCallback: () => () => {};
    public onChangeCallback: (_: any) => () => {};
    public innerValue;
    

    // 获取属性
    get value(): any {
        return this.innerValue;
    };

    // 设置属性，并触发监听器
    set value(v: any) {
        let vv = v && v.detailed ? v.detailed : v;
        this.innerValue = vv;
        if (this.valueField === 'object') {
            // let _value=v[this.valueField]?v[this.valueField]:v;
            this.onChangeCallback(v);
        } else {
            this.onChangeCallback(vv);
        }
    }

    constructor(public api: ApiService) {
    }

    ngOnInit() {
        this.suggestions = [];
    }

    // 写入值
    writeValue(value: any) {
        if (value !== this.innerValue) {
            this.innerValue = value;
        }
    }

    // 注册变化处理事件
    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    // 注册触摸事件
    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }

    /**
     * 查询数据
     * @param $event
     */
    queryData($event: any) {
        // let value = $event.query;
        this.api.getPickAddr([{
            name: this._userCode
        }]).subscribe(json => {
            let result: any = json.result && json.result.content || [];
            this.suggestions = result || [];
        });
    }

}

@NgModule({
    declarations: [
        PickAddrComponent
    ],
    exports: [PickAddrComponent],
    imports: [
        CommonModule,
        FormsModule,
        AutoCompleteModule
    ]
})
export class PickAddrModule { }