import {Component, OnInit} from '@angular/core';
import {NavController, PickerController} from '@ionic/angular';

@Component({
    selector: 'v-env-add-model',
    templateUrl: './env-add-model.page.html',
    styleUrls: ['./env-add-model.page.scss'],
})
export class EnvAddModelPage implements OnInit {

    constructor(public nav: NavController,
                private pickerController: PickerController) {}

    fanMode = {
        'selecting': false,
    };
    defaultColumnOptions = [[]];
    controlConfig = [];
    ngOnInit() {
        this.init();
    }

    init() {
        this.controlConfig = [{id: 1, config: {id: 1, name: '', interval: '', T: '', A: '', B: ''}}];
    }

    addModel() {
        const modelCount = this.controlConfig.length;
        this.controlConfig.push({id: modelCount + 1, config: {id: modelCount + 1, name: '', interval: '', T: '', A: '', B: ''}});
    }

    deleteModel(one) {
        const updateModel = this.controlConfig.filter(data => data.id !== one.id);
        this.controlConfig = updateModel;
        this.controlConfig.forEach((item, index) => {
            item.id = index + 1;
            item.config.id = index + 1;
        });
    }

    saveModels() {
        const query = '?addModelCfg=' + JSON.stringify(this.controlConfig);
        // this.nav.navigateForward('', );
        // this.nav.navigateBack()
        // this.nav.navigateBack('', {changeModels: this.controlConfig});
        // this.router.navigate(['/tabs/tab-cfg'], { queryParams: { changeModelCfg: this.controlConfig } });
        this.nav.navigateBack('/tabs/tab-cfg' + query);
    }

    goBack() {
        this.nav.back();
    }

    tempHaveTouch(event) {
        const selectedId = event.target.value - 10; // 温度: 10~
        for (let i = 10; i <= 50; i++) {
            this.defaultColumnOptions[0][i - 10] = i.toString();
        }
        if (this.fanMode.selecting === false) {
            this.fanMode.selecting = true;

            this.openPicker(1, 41, this.defaultColumnOptions, event, selectedId);
        }
    }

    async openPicker(numColumns = 1, numOptions = 5, columnOptions = this.defaultColumnOptions, event, selectedId) {
        const picker = await this.pickerController.create({
            columns: this.getColumns(numColumns, numOptions, columnOptions, selectedId),
            buttons: [
                {
                    text: '取消',
                    role: 'cancel',
                    handler: () => {
                        this.fanMode.selecting = false;
                    }
                },
                {
                    text: '确认',
                    handler: (value) => {
                        event.target.value = value.col0.text;
                        console.log(value.value);
                        this.fanMode.selecting = false;
                    }
                }
            ]
        });
        await picker.present();
    }

    getColumns(numColumns, numOptions, columnOptions, selectedId) {
        const columns = [];
        for (let i = 0; i < numColumns; i++) {
            columns.push({
                name: `col${i}`,
                selectedIndex: selectedId,
                options: this.getColumnOptions(i, numOptions, columnOptions)
            });
        }
        return columns;
    }

    getColumnOptions(columnIndex, numOptions, columnOptions) {
        const options = [];
        for (let i = 0; i < numOptions; i++) {
            options.push({
                text: columnOptions[columnIndex][i % numOptions],
                value: i
            });
        }
        return options;
    }
}
