import { Component, OnInit, OnDestroy, ViewChild, Input } from '@angular/core';
import { DialogComponent } from '../../../../../projects/dialog/src/public-api';
import { MessagerService } from '@farris/ui-messager';

@Component({
    selector: 'app-dialog-content',
    template: `
        I am from a component!!!!
        <h1>{{ content }}</h1>
        <div  class="col-6">
        <farris-combo-list [idField]="'id'" [textField]="'label'" [data]="items"
        [panelHeight]="'auto'"></farris-combo-list></div>
        <div class="d-flex flex-wrap farris-form">
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label">
                        <span class="farris-label-info text-danger">*</span>
                        <span class="farris-label-text">输入控件标签</span>
                    </label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" value="输入值" readonly>
                        <div class="farris-feedback valid-feedback"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label">
                        <span class="farris-label-info text-danger">*</span>
                        <span class="farris-label-text">输入控件标签</span>
                    </label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" value="输入值" readonly>
                        <div class="farris-feedback valid-feedback"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label">
                        <span class="farris-label-info text-danger">*</span>
                        <span class="farris-label-text">输入控件标签</span>
                    </label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" value="输入值" readonly>
                        <div class="farris-feedback valid-feedback"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label">
                        <span class="farris-label-info text-danger">*</span>
                        <span class="farris-label-text">输入控件标签</span>
                    </label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" value="输入值" readonly>
                        <div class="farris-feedback valid-feedback"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label">
                        <span class="farris-label-info text-danger">*</span>
                        <span class="farris-label-text">输入控件标签</span>
                    </label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" value="输入值" readonly>
                        <div class="farris-feedback valid-feedback"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label">
                        <span class="farris-label-info text-danger">*</span>
                        <span class="farris-label-text">输入控件标签</span>
                    </label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" value="输入值" readonly>
                        <div class="farris-feedback valid-feedback"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <farris-dialog #farrisDialog2 ></farris-dialog>
        <farris-dialog #farrisDialog ></farris-dialog>
        <button (click)="farrisDialog.show()">再弹出一个</button>
        <button (click)="farrisDialog2.show()">再弹出一个2</button>
        <button (click)="showQuestiongMsg()">再弹出一个</button>
    `
})
export class DialogContentComponent implements OnInit, OnDestroy {
    constructor(private msgService: MessagerService) { }
    content = '弹出窗口内容';
    items = [
        {id: false, label: '中国', src: 'assets/images/avatar-1.png'},
        {id: 2, label: '俄罗斯', src: 'assets/images/avatar-2.png'},
        {id: 3, label: '菲律宾', src: 'assets/images/avatar-3.png'},
        {id: 4, label: '越南', src: 'assets/images/avatar-4.png'},
        {id: 5, label: '老挝', src: 'assets/images/avatar-5.png'},
    ];
    @ViewChild('farrisDialog') farrisDialog: DialogComponent;
    ngOnInit() { }

    ngOnDestroy() {
        // this.farrisDialog.destroy();
    }
    showQuestiongMsg() {
        this.msgService.question('登录失败，请检查用户名或密码是否正确！', () => {
            this.showInfoMsg();
        });
    }

    showInfoMsg() {
        this.msgService.info(`登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，
                            请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！
                            登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！登录失败，请检查用户名或密码是否正确！`, () => {
            alert('Callback Function.');
        });
    }

}