import { Component, Input, forwardRef, Output, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { ModalController } from '@ionic/angular';
import { AppNotification } from '../../service/Notification';

@Component({
    selector: 'app-picker',
    templateUrl: './app-picker.html',
    styleUrls: ['./app-picker.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => AppPicker),
            multi: true
        }
    ]
})
export class AppPicker implements ControlValueAccessor {
    /**
     * 表单
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Input()
    form: any;
    /**
     * 选择视图
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Input()
    component: any;
    /**
     * 是否启用
     *
     * @type {boolean}
     * @memberof AppPicker
     */
    @Input()
    disabled: boolean;
    /**
     * 选择id存储字段
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Input()
    valueItem: any;

    @Output()  valueItemChange =new EventEmitter();
    /**
     * 提示信息
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Input()
    placeholder: string;

    /**
     * 值
     *
     * @type {string}
     * @memberof AppPicker
     */
    public value: string;

    /**
     * Creates an instance of AppPicker.
     * @param {ModalController} modalCtrl
     * @memberof AppPicker
     */
    constructor(private modalCtrl: ModalController, private notification: AppNotification) { }

    /**
     * 清空已选值
     *
     * @memberof AppPicker
     */
    public clear(): void {
        if (this.disabled) {
            return;
        }
        if (this.valueItem) {
            this.valueItem= undefined;
            this.valueItemChange.emit(undefined);
        }
        this.onChange(undefined);
        this.value = undefined;
    }

    /**
     * 打开选择视图
     *
     * @returns {Promise<any>}
     * @memberof AppPicker
     */
    public async openPicker(): Promise<any> {
        if (this.component) {
            if (!this.form) {
                return;
            }
            const modal = await this.modalCtrl.create({
                component: this.component,
                componentProps: { isModalMode: true, srfReferData: this.form }
            });
            await modal.present();
            const result = await modal.onWillDismiss();
            const res: any = result.data;
            if (res && Object.is(res.ret, 'OK') && res.selected && res.selected.length >0) {
                if (res.selected) {
                    const item = res.selected[res.selected.length-1];
                    this.valueItem = item.srfkey;
                    this.valueItemChange.emit(item.srfkey);
                    this.onChange(item.srfmajortext);
                    this.value = item.srfmajortext;
                } else {
                    this.clear();
                }
            }
        } else {
            this.notification.error('未指定选择视图');
        }
    }

    /**
     * 输入
     *
     * @param {string} val
     * @memberof AppPicker
     */
    public writeValue(val: string): void {
        this.value = val;
    }

    private onChange: (val: any) => void = () => { };
    private onTouched: () => void = () => { };
    public registerOnChange(fn: any): void { this.onChange = fn; }
    public registerOnTouched(fn: any): void { this.onTouched = fn; }

}